时间戳

首页 > 解决方案 > 使用 SizeTransition 小部件

dart - 使用 SizeTransition 小部件

问题描述

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

标签： dartflutterflutter-animation

解决方案

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

推荐阅读