欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

flutter动画中AnimatedWidget的使用

程序员文章站 2022-03-25 08:52:31
...

flutter中通过animatedWidget和AnimatedBuilder两个类可以快速搭建动画:
以下实例为通过animatedwidget实现图片有小到大的动画。

//思路:
/**
 * 1 创建animationlogo的widget类 实现其构造函数和build方法(用于指明动画样式和具体动作)
 * 2 创建state类 其中initstate函数中通过实例化controller对象和animation类对象指明animation的动画
 * 3 在state的build函数中返回实例的animationlogo对象
 */
class TestAnimation2 extends StatefulWidget {
  @override
  _TestAnimationState createState() {
    return _TestAnimationState();
  }
}

//创建一个动画类继承自animatedwidget(其中可以通过构造函数传入必要的动画)
class AnimationLogo extends AnimatedWidget {
  @override
  Widget build(BuildContext context) {
    final Animation<double> animation = listenable;
    return Center(
      child: Container(
        margin: new EdgeInsets.symmetric(vertical: 10),
        height: animation.value,
        width: animation.value,
        child: new FlutterLogo(),
      ),
    );
  }

  AnimationLogo({Key key, Animation<double> animation})
      : super(key: key, listenable: animation);
}

class _TestAnimationState extends State<TestAnimation2>
    with SingleTickerProviderStateMixin {
  //实例animation对象  和必要的控制和状态对象
  Animation<double> animation;
  AnimationController controller;
  AnimationStatus animationStatus;
  double animationvalue;

  @override
  void initState() {
    super.initState();
    //初始化一个动画控制器 定义好动画的执行时长
    controller =
        AnimationController(duration: const Duration(seconds: 3), vsync: this);
    //初始化一个补间动画 实例化一个补间类动画的实例,明确需要变换的区间大小和作用的controller对象
    animation = Tween<double>(begin: 0, end: 300).animate(controller);
    //提供方法 为动画添加监听
    controller.forward();
  }

  //重写生命周期的dispose函数  将controller资源回收
  @override
  void dispose() {
    //回收资源
    controller.dispose();
    super.dispose();
  }

  //build方法  返回页面的布局widget
  @override
  Widget build(BuildContext context) {
    return AnimationLogo(
      animation: animation,
    );
  }
}