· 更新于 2022-02-14
Flutter►第五章：详解

第7节：详解Animation-1基础

详解Animation-1基础

参考文章：

一、动画入门

请点击进入阅读：【Flutter】Animation 动画 ( Flutter 动画基本流程 | 创建动画控制器 | 创建动画 | 设置值监听器 | 设置状态监听器 | 布局中使用动画值 | 动画运行 )

二、Animation、AnimationController、Tween

以下内容摘自：Flutter动画 2 - Animation、Tween 详解

Tween的唯一职责就是定义从输入范围到输出范围的映射。输入范围通常为0.0到1.0

1
final Tween doubleTween = new Tween<double>(begin: -200.0, end: 0.0);

AnimationController 首先是继承于 Animation 的, 相对Animation而言,AnimationController作用则是控制动画.它可以设置动画的时长,并且包含动画的执行方法,具体如下表格所示.

AnimationController 的常用操作说明:

动画执行方法 说明
forward() 正向开始执行动画
reverse() 反向开始执行动画
reset() 重置动画到初始状态
dispose() 取消/停止动画

flutter AnimationStatus 动画状态说明：

AnimationStatus 动画状态值 说明
AnimationStatus.forward 执行 controller.forward() 会回调此状态
AnimationStatus.reverse 执行 controller.reverse() 会回调此状态
AnimationStatus.dismissed 动画从 controller.reverse() 反向执行 结束时会回调此方法
AnimationStatus.completed 动画从 controller.forward() 正向执行 结束时会回调此方法 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
_animationController = AnimationController(duration: Duration(milliseconds: 300), 
                                           
// 位移动画
_positionAnimation = Tween<double>(begin: 0, end: 50).animate(_animationController)
  ..addListener(() {
    setState(() {});
  });

// 颜色动画
_colorAnimation = ColorTween(begin: Colors.orangeAccent, end: Colors.redAccent).animate(_animationController)
  ..addListener(() {
    setState(() {});
  });
                                           
_animationController.addStatusListener((status) {
	if (status == AnimationStatus.completed) {
    print("动画完成");
  }
});

三、旋转动画 RotationTransition

End