使用 SizeTransition 小部件答案

【问题标题】：Using SizeTransition widget使用 SizeTransition 小部件
【发布时间】：2019-08-27 20:54:32
【问题描述】：

我想将 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,
        ),
      ),
    );
  }
}

【问题讨论】：

标签： dart flutter flutter-animation

【解决方案1】：

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

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

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

controller.duration = Duration(seconds: 1);

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

controller.forward();

【讨论】：

使用 controller.forward(from: 0);此解决方案有效。

【解决方案2】：

除了凉介的回答（添加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,
        ),
      ),
    ),
  );
}

【讨论】：

controller.forward() 不应该在构建中。
你说得对。在演示 sn-p 中有什么更好的地方？
是的，为了演示，一切正常。我只是说这不是一种愚蠢的做法。

【解决方案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()。

【讨论】：