近期热门:做了一夜动画,就为让大家更好的理解Vue3的Composition Api (获得700+点赞)
Flutter = 胡辣汤
众所周知,一个用户体验很好的应用,一定有大量的精美的动画。但是大家要注意,动画不要滥用。动画对于用户体验的提升一般作用在以下几点
1. A到B,明确告知信息的关联性,直观的感受从哪儿来到哪儿去。
![48aa02b49733334a64c43ed0068ecc57.gif](https://i-blog.csdnimg.cn/blog_migrate/cd7cfe734d570011ce251ce619232255.gif)
2. 提醒关注,需要用户注意到一些关键信息的时候。比如用跳跃的按钮来吸引点击。
![36a2c9ff9a44d10047df1bebd89301aa.png](https://i-blog.csdnimg.cn/blog_migrate/40eca8888791258bc040bd41a58c4865.png)
3. 愉悦感,这个不用多说,loading动画啦,精美点赞动画等等。
![b340a8b92bb2f814d0a4f427043b3e8d.gif](https://i-blog.csdnimg.cn/blog_migrate/8ead8f4838961f6126c155981c505e85.gif)
动画的原理
由于视觉有残留的特性,大脑会对前后的视觉信号自动关联上。小时候有没有在字典(页数比较多)的页脚上画过小人呢?字典上的每一页就是F(Frame),你的手指拨动翻页的频率决定了视觉残留的连贯性。比如每秒翻动10页,你动画的FPS就是10。FPS越高,动画的流畅感越强。
![a4aa1a06a08ee58550b0513324692e15.gif](https://i-blog.csdnimg.cn/blog_migrate/191e213587da585e4630c3a2b3fcef46.gif)
- 过去电影一般是24FPS,现在也出现了高帧率的电影
![e5038d312fc184c242ff5d40d5ca4176.png](https://i-blog.csdnimg.cn/blog_migrate/3a0e41550a7af1a30364b7476b8adf88.png)
Flutter除了高性能以外,也附带了全面而强大的动画系统
Flutter里的两种动画类型
1. 补间动画Tween
什么叫补间动画呢?就是你提供”起点“和”终点“的属性,动画持续的时间,属性在时间行程上的中间值由补间动画来自动计算。
2. 物理模拟动画
模拟真实世界的行为,比如重力对物体的影响等等。
- 这篇文章我们主要讲讲补间动画
Flutter动画控制器
在Flutter里做动画,一般都需要用到以下几个相关的类 AnimationController 动画控制器,管理动画相关状态和事件 Animation 动画的实例,用于获得动画进程中的差值等 * Tween 补间对象,用来做补间计算的
创建动画,首先要创建一个动画控制器
controller
Flutter补间动画
IntTween
整数补间,差值使用round取整
Animation
![4d58b67301b2b7feaf2f9fc8eac13110.png](https://i-blog.csdnimg.cn/blog_migrate/c16fd94257bc342191d0f28fd03f6063.png)
StepTween
基于IntTween的整数补间,差值使用floor取整
Animation
ColorTween
颜色值补间,用于漂亮的颜色变化
Animation
![fd0cf4eb350cf8de9833f3a9302b3f6e.png](https://i-blog.csdnimg.cn/blog_migrate/b5b25d09aaef0f9fc04e6138a33ff872.png)
ReverseTween
反向补间,不管什么补间类型,给你反着弄
Animation
SizeTween
尺寸补间,改变大小的补间
Animation
![3ea9833af099634fc17141a19d84e070.png](https://i-blog.csdnimg.cn/blog_migrate/348c2d92685e6f155bb7113be52e1c31.png)
RectTween
位置及大小补间,可同时改变大小和尺寸的补间
Animation
![47f279149f62a6e71078294c3293d197.png](https://i-blog.csdnimg.cn/blog_migrate/b38d3124dfa658a0fecf7d36ceecc278.png)
ConstantTween
一个常量补间,持续给出一个固定值
Animation
Flutter中的补间动画封装得比较细,这么多种,用习惯了tweenlite,tweenmax的前端工程师会觉得不舒服吧。
点不到的爱心
还记得上一篇教程里提到的“技术肥宅”的浪漫——点不到的爱心吗?结合本节教程后实现出来就是这样的。
![e9536f661f028e346ff4094bc9262fa2.png](https://i-blog.csdnimg.cn/blog_migrate/a88b6487667fc81ee1107b2d7e7ff6e7.png)