dart - 使用 SizeTransition 小部件

Question

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

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

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

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

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()。