动画:确定画面变化规律;根据这个规律,设定动画周期,启动动画;定期获取当前动画的值,不断地调整,重绘画面。
一、Animation
提供动画数据例如动画是否开始,停止,前进,或者后退,以及动画当前的值。不负责的话的渲染。
二、AnimationController
管理Animation,可以用来设置动画的时长,启动动画,暂停动画,反转动画等。
三、Listener
Animation回调函数,监听动画进度的变化,在回调函数中,根据当前值重新渲染组件,实现动画的渲染。
AnimationController 设置vsync属性
001 vsync防止出现不可见动画,
002 vsync对象会把动画绑定到一个widget,widget显视动画暂停,widget再次显示,动画恢复,这样可以避免动画组件 在组件不在当前屏幕时消耗资源。
在build方法中将当前动画状态的值读出来,才能最终实现动画效果。
简化动画数据和动画渲染
001 AnimatedWidget
接收Animation对象作为其初始化参数
002 AnimatedBuilder
自动监听Animation对象的变化,并根据需要将该控件标记为dirty以自动刷新UI,源码中AnimatedBuilder也是继承AnimatedWidget
003 hero动画
在两个页面的共享元素之间做出流畅页面切换效果。
参考:
https://time.geekbang.org/column/article/119148
Flutter 动画详解:从基础到高级
本文深入介绍了Flutter中的动画机制,包括Animation、AnimationController和Listener的角色。Animation提供动画数据,AnimationController管理动画的播放控制,而Listener则用于监听动画进度并更新UI。通过设置vsync,可以确保在组件不可见时停止动画以节省资源。 AnimatedWidget和AnimatedBuilder简化了动画数据和渲染过程,特别是对于hero动画,它们实现了页面间元素平滑过渡的效果。文章还提供了实战示例,帮助开发者更好地理解和应用Flutter动画。
117





