Flutter动画 3 - Animation动画组

在前面的两篇博客中,我们了解了在Flutter中动画如何简单的使用动画,了解Tween相关使用方法.但是在很多场景下,我们使用的并不是单单一种动画,而是多种动画一起执行或者顺序执行,那么在应对这样的场景我们该怎么办呢? 今天,我们就聊一聊如何在Flutter中实现这种并行动画或者串行动画呢?接下来我们就一起看看这两种形式的动画是如何实现的.

并行动画

---

对于并行动画这种多个动画同时执行,我们需要让各个动画Animation的动画控制器AnimationController保持一致就可以了. 这个在上一篇Tween已经进行了对应说明演示.这里就直接把代码拿来了.

首先创建动画并保持动画控制器的统一性.示例如下代码所示.

_animationController = AnimationController(duration: Duration(milliseconds: 300), vsync: this);
_animation = Tween(begin: 0, end: 50).animate(_animationController)
…addListener(() {
setState(() {});
});
_colorAnimation = ColorTween(begin: Colors.orangeAccent, end: Colors.redAccent).animate(_animationController)
…addListener(() {
setState(() {});
});

然后再构建build方法中直接使用_animation和_colorAnimation的动画值就好,具体代码如下所示.

Container(
width: 200,
height: 50,
color: _colorAnimation.value,
margin: EdgeInsets.only(top: _animation.value),
),

串行动画

---

相对于并行动画而言,串行动画写起来就比较复杂的多,串行动画的实现方案总共有三种,分别是 监听状态法, Interval时间间隔法, TweenSequence动画序列法.下面我们就分别来看看三种方法的实现以及区别.

监听状态法

状态监听法主要通过AnimationController监听动画的completed状态,然后再去执行下一个动画,如此往复,直到所有动画完成.

例如现在我们需要实现先执行组件在0.3秒钟往下偏移50个单位,然后再执行在0.6s中组件的颜色由 橘色 变为 红色 .

首先,我们先声明位移动画控制器和颜色动画控制器以及位移动画和颜色动画,代码如下所示.

AnimationController _animationController;
Animation _animation;
AnimationController _colorAnimationController;