话不多说 先上效果

上图的开关动画就是通过flare实现的,代码上没有什么难度,只需引入动画文件即可快速实现。所以能不能实现需求可能更依赖于设计师的能力。
当然,如果不是特殊定制的动画,也可以在flare动画上寻找适合自己的动画,也可以自己在上面制作,不过需要注意的是,如果不想分享自己制作的动画,需要付费,不然只能开源分享。
接下来快速实现图上的动画效果:
1.首先获取动画文件
开关动画
通过上图方式即可下载动画文件
2.代码中引入flare_flutter: ^2.0.5

3.引入资源文件
建一个与lib同级的目录flrs,并在里面放入下载的以flr后缀的文件

同时在pubspec.yaml中引入,只需目录即可

4.代码实现
FlareActor("flrs/switch_day_night.flr", alignment:Alignment.center, fit:BoxFit.fill, animation:"day_idle"),
在自己的代码中加入上述代码即可实现,其中需要注意的参数是animation。该参数设置的值为下图中红框对应的命名,不同的状态有不同的动画名,根据设计师具体的设计。

所以设置成day_idle时就为图上的样式。如果想通过点击改变,只需切换不同的animation值即可。
5.其他
该篇只是快速入门的文章,笔者没有做过多的研究,应该还有其他各种复杂的实现方式需要大家去慢慢攻略。微信公众号同步更新文章,关注及时查看新内容。
本文介绍如何利用Flare动画库快速实现开关动画效果。通过下载动画文件并引入flare_flutter库,可在代码中轻松实现不同状态的动画切换,适合设计师和开发者共同创作高质量UI动画。

1253

被折叠的 条评论
为什么被折叠?



