天天看点

《Flutter 动画系列》组合动画

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

Flutter中组合动画使用Interval,Interval继承自Curve,用法如下:

表示_sizeAnimation动画从0.5(一半)开始到结束,如果动画时长为6秒,_sizeAnimation则从第3秒开始。

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

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

效果如下:

《Flutter 动画系列》组合动画

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

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

weight表示每一个Tween的权重。

最终效果如下:

《Flutter 动画系列》组合动画
下一篇: 异步编程Demo