电脑又罢工了,没法写示例,先给大家安利一个高大上的动画插件。
前言
我们介绍动画相关的篇章也不少了,如何快速搞定高大上的动画效果?本篇来介绍Flutter官方提供的动画插件animations。animations目前在Github上收获了超过1500个star,pub上也有3289个like,99%的流行度。作为官方插件,评分必须是满分130分。
animations能做什么
animations提供的是motion transition的动效,其实是Material Design的动效的一部分,关于动效规范的说明可以参考官方的文档:Material motion system spec。animations提供了如下动效:
- Container Transform:这种动效适用于一个元素在另一个容器中时的转场情况,将两个页面的元素联系使得转场更为平滑,有点类似Hero动画。下面是实现的一些效果的动图。
- Shared Axis:翻译过来是共享轴,适用于UI元素之间有空间或引导联系的场景,通过在x,y或z轴的转换,实现界面之间的联系来进行动画过渡。下面是实现的一些效果动图。
- Fade Through:通过快速渐现和消失来实现没有关联UI界面的切换,这样让界面变化比较大的时候不至于那么突兀。
- Fade:当在当前屏幕界面上实现弹窗动效时,使用Fade会更舒适。
总结
可以看到animations的动画效果非常简洁,但是能够提供很好的过渡效果,能够给用户带来更好的体验——尤其是在转换场景有关联的时候,有兴趣的可以到pub上看一下示例代码,了解一下具体的应用。
🚩🚩🚩年度打榜进行中,看了文章觉得有收获的,各位可以点这里给岛上码农投票哦!
我是岛上码农,微信公众号同名,这是Flutter 入门与实战的专栏文章,提供体系化的 Flutter 学习文章。对应源码请看这里:Flutter 入门与实战专栏源码。如有问题可以加本人微信交流,微信号:
island-coder
。👍🏻:觉得有收获请点个赞鼓励一下!
🌟:收藏文章,方便回看哦!
💬:评论交流,互相进步!