flutter中的动画(tween动画)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/zhakesipailuo/article/details/89882968

flutter中的动画分为两类:基于tween的动画和以及物理的动画。
以下引用自flutterchina:
补间(Tween)动画
“介于两者之间”的简称。在补间动画中,定义了开始点和结束点、时间线以及定义转换时间和速度的曲线。然后由框架计算如何从开始点过渡到结束点。
基于物理的动画
在基于物理的动画中,运动被模拟为与真实世界的行为相似。例如,当你掷球时,它在何处落地,取决于抛球速度有多快、球有多重、距离地面有多远。 类似地,将连接在弹簧上的球落下(并弹起)与连接到绳子上的球放下的方式也是不同。
主要的类的介绍:
Animation 对象,是 Flutter 动画库中的核心类,插入用于引导动画的值。
Animation 对象知道当前动画的状态(如:动画是否开始,停止,前进或者后退),但对屏幕上显示的内容一无所知。
AnimationController 对象管理着 Animation。
CurvedAnimation 将动画定义成非线性运动的动画。
Tween 在被动画对象使用的数据范围之间进行插值。例如,Tween 可能会定义从红色到蓝色或从 0 到 255 的插值。
使用 Listeners 和 StatusListeners 来监听动画状态的变化。
(《主要类的介绍》引用自https://juejin.im/post/5b6270edf265da0f473539a6)
以下代码展示了tween动画的实现:

class TestAnimation extends StatefulWidget {
  @override
  _TestAnimationState createState() {
    return _TestAnimationState();
  }
}

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

  @override
  void initState() {
    super.initState();
    //初始化一个动画控制器 定义好动画的执行时长
    controller =
        AnimationController(duration: const Duration(seconds: 2), vsync: this);
    //初始化一个补间动画 实例化一个补间类动画的实例,明确需要变换的区间大小和作用的controller对象
    animation = Tween<double>(begin: 0, end: 300).animate(controller);
    //提供方法 为动画添加监听
    animation.addListener(() {
      //当widget有变化的时候系统调用setstate方法重新绘制widget
      setState(() {
        //将动画的值传递给animationvalue(方便展示变化)
        animationvalue = animation.value;
      });
    });
    //提供方法 为动画添加状态监听
    animation.addStatusListener((AnimationStatus state) {
      //当animation的状态发生变化的时候系统调用setstate方法 将新的状态赋值并重新绘制widget
      setState(() {
        animationStatus = state;
      });
    });
  }

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

  //build方法  返回页面的布局widget
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        //column中包含3部分内容,1 带有点击效果的文字  2 列提示文字  3 一个图片
        children: <Widget>[
          //手势探测者(widget),可以将指定的child作为点击触发点,在ontap参数中可以设置具体的点击事件
          GestureDetector(
            onTap: () {
              controller.reset();
              controller.forward();
            },
            child: Text("开始"),
          ),
          Text("动画状态:" + animationStatus.toString()),
          Text("动画值:" + animationvalue.toString()),
          Container(
            height: animation.value,
            width: animation.value,
            child: FlutterLogo(),
          )
        ],
      ),
    );
  }
}

实现效果截图:
在这里插入图片描述

展开阅读全文

没有更多推荐了,返回首页