使用SizeTransition小部件

Question

我想使用SizeTransition小部件只为图像而不是页面。它将是我的加载页面，在加载应用程序应用程序符号时将显示大小过渡。

https://docs.flutter.io/flutter/widgets/SizeTransition-class.html

我希望我的徽标在链接中有这种效果。但是，我没有足够的资源来了解该小部件。你能举个例子吗？我试过这样的东西，但它没有用。

class _AnimTestState extends State<AnimTest>
    with SingleTickerProviderStateMixin {
  AnimationController controller;
  @override
  void initState() {
    super.initState();
    controller = AnimationController(vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizeTransition(
        child: Image.asset('assets/images/appLogo.png'),
        sizeFactor: CurvedAnimation(
          curve: Curves.fastOutSlowIn,
          parent: controller,
        ),
      ),
    );
  }
}

Answer 1

首先给控制器一个持续时间，在这样的构造函数中：

controller = AnimationController(vsync: this,duration: Duration(seconds: 1));

或者在调用controller.forward()之前的任何地方：

controller.duration = Duration(seconds: 1);

最后也是最重要的一点，你需要通过调用来启动动画

controller.forward();

Answer 2

除了Ryosuke的答案（添加controller.forward()，注意不要在build()中执行此操作而不是用于测试目的），为了达到您链接的页面上显示的效果，您可能需要考虑

1. 通过将SizeTransition小部件包装在Center()小部件中来居中
2. 通过将axisAlignment: -0.5添加到SizeTransition小部件来指定过渡轴（有关原因的详细信息，请参阅https://docs.flutter.io/flutter/widgets/SizeTransition/axisAlignment.html）。

@override
Widget build(BuildContext context) {
  controller.forward();
  return Scaffold(
    body: Center(
      child: SizeTransition(
        child: Image.asset('assets/images/appLogo.png'),
        axisAlignment: -0.5,
        sizeFactor: CurvedAnimation(
          curve: Curves.fastOutSlowIn,
          parent: controller,
        ),
      ),
    ),
  );
}

Answer 3

class _AnimTestState extends State<HomePage> with SingleTickerProviderStateMixin {
  AnimationController controller;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 400),
    )..repeat(reverse: true); // automatically animation will be started
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizeTransition(
        child: Image.asset('assets/images/appLogo.png'),
        sizeFactor: CurvedAnimation(
          curve: Curves.fastOutSlowIn,
          parent: controller,
        ),
      ),
    );
  }
}

如果您不希望它像我一样自动运行，您也可以在按下按钮时使用_controller.forward()或_controller.reverse()。