如何在flutter中制作一个带有垂直动画的打开小部件？

Question

有一个简单的想法：打开一个带有特定动画的自定义

Scaffold

小部件。现在有这个代码：

Navigator.push(
    context,
    PageRouteBuilder(
        pageBuilder: (context, animation, secondaryAnimation) => const ChooserWidget(),
        transitionsBuilder: (context, animation, secondaryAnimation, child) {
            final curvedAnimation = CurvedAnimation(
                parent: animation,
                curve: Curves.easeInOut,
            );

            return ScaleTransition(
                alignment: Alignment.center,
                scale: Tween<double>(
                    begin: 0.0,
                    end: 1.0,
                ).animate(curvedAnimation),
                child: child,
            );
        },
    )
)

这个动画从屏幕中心显示小部件，并同时垂直和水平扩展，但我只想垂直扩展，就像gameboy的游戏菜单一样，从水平开始到100%，垂直到0%，然后扩展到顶部开始和底部末端同时从屏幕中心开始并以反向模式关闭。

如何做到这一点？，我可以在动画时添加外部边框，并在结束动画时隐藏边框，就像完成扩展时的边框窗口一样？

Answer 1

如果你看

ScaleTransition

的源代码，你只需要更改单个值即可使其水平缩放；

class HorizontalScaleTransition extends MatrixTransition {
  /// Creates a scale transition.
  ///
  /// The [alignment] argument defaults to [Alignment.center].
  const HorizontalScaleTransition({
    super.key,
    required Animation<double> scale,
    super.alignment = Alignment.center,
    super.filterQuality,
    super.child,
  }) : super(animation: scale, onTransform: _handleScaleMatrix);

  /// The animation that controls the scale of the child.
  Animation<double> get scale => animation;

  /// The callback that controls the scale of the child.
  ///
  /// If the current value of the animation is v, the child will be
  /// painted v times its normal size.
  static Matrix4 _handleScaleMatrix(double value) =>
      Matrix4.diagonal3Values(1.0, value, 1.0);
}