flutter 动画_在Flutter加入flare动画

话不多说 先上效果

    上图的开关动画就是通过flare实现的，代码上没有什么难度，只需引入动画文件即可快速实现。所以能不能实现需求可能更依赖于设计师的能力。

  当然，如果不是特殊定制的动画，也可以在(https://www.2dimensions.com/)上寻找适合自己的动画，也可以自己在上面制作，不过需要注意的是，如果不想分享自己制作的动画，需要付费，不然只能开源分享。

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

1.首先获取动画文件

开关动画：

(https://rive.app/a/criusker/files/flare/swich-day-night)

通过上图方式即可下载动画文件

2.代码中引入[flare_flutter: ^2.0.5]

(https://pub.dev/packages/flare_flutter#-installing-tab-)

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.其他

该篇只是快速入门的文章，笔者没有做过多的研究，应该还有其他各种复杂的实现方式需要大家去慢慢攻略。