使用 SizeTransition 小部件

Question

我只想将 SizeTransition 小部件用于图像而不是页面。这将是我的加载页面，加载应用程序时，应用程序符号将显示大小转换。

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

我想要我的徽标在 link 中具有这种效果。但是，没有足够的资源让我了解该小部件。你能举个例子吗？我尝试过类似的方法，但它不起作用。

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()中这样做，除非是出于测试目的），为了达到您链接页面上显示的效果，你可能想考虑

通过将 SizeTransition 小部件包裹在 Center() 小部件中，使它居中
通过将 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()。

使用 SizeTransition 小部件

Using SizeTransition widget

dart

flutter

flutter-animation