《Flutter 动画系列》组合动画
程序员文章站
2022-09-03 23:46:36
老孟导读:在前面的文章中介绍了 《Flutter 动画系列》25种动画组件超全总结 "http://laomengit.com/flutter/module/animated_1/" 《Flutter 动画系列》Google工程师带你选择Flutter动画控件: "http://laomengit. ......
老孟导读:在前面的文章中介绍了
《flutter 动画系列》25种动画组件超全总结
《flutter 动画系列》google工程师带你选择flutter动画控件:
在项目中动画效果很多时候是几种动画的组合,比如颜色、大小、位移等属性同时变化或者顺序变化,这篇文章讲解如何实现组合动画
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(); } }
效果如下:
我们也可以设置同时动画,只需将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的权重。
最终效果如下:
交流
如果你对flutter还有疑问或者技术方面的疑惑,欢迎加入flutter交流群(微信:laomengit)。
同时也欢迎关注我的flutter公众号【老孟程序员】,公众号首发flutter的相关内容。
flutter地址: 里面包含160多个组件的详细用法。
上一篇: SQL Server 2012自动标识列值跳转问题
下一篇: PLSQL的快捷键以及使用技巧