《Flutter 动画系列》组合动画

╰半橙微兮° 2023-07-22 10:26 13阅读 0赞

![20200405171508465.png][]

> 老孟导读：在前面的文章中介绍了
> 
> 《Flutter 动画系列》25种动画组件超全总结
> 
>  *  [http://laomengit.com/flutter/module/animated\_1/][http_laomengit.com_flutter_module_animated_1]
> 
> 《Flutter 动画系列》Google工程师带你选择Flutter动画控件：
> 
>  *  [http://laomengit.com/flutter/module/animated\_choose/][http_laomengit.com_flutter_module_animated_choose]
> 
> 在项目中动画效果很多时候是几种动画的组合，比如颜色、大小、位移等属性同时变化或者顺序变化，这篇文章讲解如何实现组合动画

Flutter中组合动画使用`Interval`，`Interval`继承自`Curve`，用法如下：

Animation _sizeAnimation = Tween(begin: 100.0, end: 300.0).animate(CurvedAnimation(
        parent: _animationController, curve: Interval(0.5, 1.0)));

表示`_sizeAnimation`动画从0.5（一半）开始到结束，如果动画时长为6秒，`_sizeAnimation`则从第3秒开始。

`Interval`中`begin` 和`end`参数值的范围是0.0到1.0。

下面实现一个先执行颜色变化，在执行大小变化，代码如下：

class AnimationDemo extends StatefulWidget {
      @override
      State<StatefulWidget> createState() => _AnimationDemo();
    }
    
    class _AnimationDemo extends State<AnimationDemo>
        with SingleTickerProviderStateMixin {
      AnimationController _animationController;
      Animation _colorAnimation;
      Animation _sizeAnimation;
    
      @override
      void initState() {
        _animationController =
            AnimationController(duration: Duration(seconds: 5), vsync: this)
        ..addListener((){setState(() {
          
        });});
    
        _colorAnimation = ColorTween(begin: Colors.red, end: Colors.blue).animate(
            CurvedAnimation(
                parent: _animationController, curve: Interval(0.0, 0.5)));
    
        _sizeAnimation = Tween(begin: 100.0, end: 300.0).animate(CurvedAnimation(
            parent: _animationController, curve: Interval(0.5, 1.0)));
    
        //开始动画
        _animationController.forward();
        super.initState();
      }
    
      @override
      Widget build(BuildContext context) {
        return Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Container(
                  height: _sizeAnimation.value,
                  width: _sizeAnimation.value,
                  color: _colorAnimation.value),
            ],
          ),
        );
      }
    
      @override
      void dispose() {
        _animationController.dispose();
        super.dispose();
      }
    }

效果如下：

![animation_combine_1.gif][]

我们也可以设置同时动画，只需将2个`Interval`的值都改为`Interval(0.0, 1.0)`。

想象下面的场景，一个红色的盒子，动画时长为6秒，前40%的时间大小从100->200，然后保持200不变20%的时间，最后40%的时间大小从200->300，这种效果通过TweenSequence实现，代码如下：

_animation = TweenSequence([
      TweenSequenceItem(
          tween: Tween(begin: 100.0, end: 200.0)
              .chain(CurveTween(curve: Curves.easeIn)),
          weight: 40),
      TweenSequenceItem(tween: ConstantTween<double>(200.0), weight: 20),
      TweenSequenceItem(tween: Tween(begin: 200.0, end: 300.0), weight: 40),
    ]).animate(_animationController);

`weight`表示每一个Tween的权重。

最终效果如下：

![animation_combine_2.gif][]

## 交流 ##

如果你对Flutter还有疑问或者技术方面的疑惑，欢迎加入Flutter交流群（微信：laomengit）。

同时也欢迎关注我的Flutter公众号【老孟程序员】，公众号首发Flutter的相关内容。

Flutter地址：[http://laomengit.com][http_laomengit.com] 里面包含160多个组件的详细用法。

[20200405171508465.png]: /images/20230528/4b5a0d865bdb4fb6b51abf3f9be07605.png
[http_laomengit.com_flutter_module_animated_1]: http://laomengit.com/flutter/module/animated_1/
[http_laomengit.com_flutter_module_animated_choose]: http://laomengit.com/flutter/module/animated_choose/
[animation_combine_1.gif]: http://img.laomengit.com/animation_combine_1.gif
[animation_combine_2.gif]: http://img.laomengit.com/animation_combine_2.gif
[http_laomengit.com]: http://laomengit.com