Flutter —— 三:在Flutter加入flare动画

话不多说 先上效果
Flutter —— 三:在Flutter加入flare动画_第1张图片
        上图的开关动画就是通过flare实现的,代码上没有什么难度,只需引入动画文件即可快速实现。所以能不能实现需求可能更依赖于设计师的能力。
        当然,如果不是特殊定制的动画,也可以在flare动画上寻找适合自己的动画,也可以自己在上面制作,不过需要注意的是,如果不想分享自己制作的动画,需要付费,不然只能开源分享。

接下来快速实现图上的动画效果:

1.首先获取动画文件
开关动画
Flutter —— 三:在Flutter加入flare动画_第2张图片通过上图方式即可下载动画文件

2.代码中引入flare_flutter: ^2.0.5
在这里插入图片描述
3.引入资源文件
建一个与lib同级的目录flrs,并在里面放入下载的以flr后缀的文件
Flutter —— 三:在Flutter加入flare动画_第3张图片
同时在pubspec.yaml中引入,只需目录即可
Flutter —— 三:在Flutter加入flare动画_第4张图片
4.代码实现

FlareActor("flrs/switch_day_night.flr", alignment:Alignment.center, fit:BoxFit.fill, animation:"day_idle"),

        在自己的代码中加入上述代码即可实现,其中需要注意的参数是animation。该参数设置的值为下图中红框对应的命名,不同的状态有不同的动画名,根据设计师具体的设计。
Flutter —— 三:在Flutter加入flare动画_第5张图片
所以设置成day_idle时就为图上的样式。如果想通过点击改变,只需切换不同的animation值即可。

5.其他
该篇只是快速入门的文章,笔者没有做过多的研究,应该还有其他各种复杂的实现方式需要大家去慢慢攻略。微信公众号同步更新文章,关注及时查看新内容。

你可能感兴趣的:(笔记,flutter)