animations - 快速搞定高大上动画的Flutter插件

电脑又罢工了，没法写示例，先给大家安利一个高大上的动画插件。

前言

我们介绍动画相关的篇章也不少了，如何快速搞定高大上的动画效果？本篇来介绍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上看一下示例代码，了解一下具体的应用。