【动效探索】试一下Lottie+Figma一键生成动画-五八三

前言

预警：很多动图，注意流量。

最近收到一个邮件，Lottie在Figma中做了一个插件，可以直接通过多个图片自动K关键帧生成动画了。并给出以下动图教程，生动形象，免去了AE中K关键帧的烦恼。

Lottie AE的话版本可以看我之前的文章：用一个开屏动画看动效/开发工作流，K关键帧真的很累。

关于该插件更多介绍建议大家去LottieFiles官网看看，图文并茂。

如何制作动画

安装LottieFiles插件

打开Figma，进入社区，搜索LottieFiles，并安装插件。

拷贝官方示例

然后拷贝一份LottieFiles官方示例到Figma本地的草稿中。

打开官方示例

在官方示例中，有比较明确的步骤可以使用该插件，要是不知道怎么使用可以查看官方视频教程。

单插图动画

单插图动画目前一般是用于突出某个动画效果或是动画进入的效果，后续可能会更新更多效果，打开LottieFiles后，点击某个Frame，使用方式如图所示。

按F滑一个600左右大小的Frame，选中之后点击Insert as GIF。于是我们生成了一个GIF：

点击右上角的Present，即可看到效果

生成的GIF效果好像有点差，而实际在项目中一般不用GIF格式，没有这个问题。

多插图动画

在官方示例中，点击带有Prototype flow的起始图或者下拉选择即可。

点击Export to Lottie即可看到预览啦。

小鹅事务所开屏动画

制作动画

关注我的小伙伴可能有印象我做了两个小鹅事务所的开屏动画，分别为帧动画版本和AVD动画版本。前者为多张图片组合而成，后者为After Effect中制作而成。

而这次，我尝试使用Figma制作一下，首先找到四只会动的小鹅：

点击右上角的Prototype，像前文第一张动图那样，给他们连上线。

于是生成了一个Flow，打开LottieFiles，此时能够看到效果了，不得不说的是，挺神奇的。但是效果并不符合预期，有可能是我没有按照规范制作动画关键帧。

并且想要找到那个锚点有问题或者为什么描边不符合预期其实是有些困难的，超出我的能力之外了，因此作罢。再次声明一下：不是插件有问题，应该是我制作的这个动画不符合规范。

而社区中拥有非常多、且优秀的动画，若大家对使用Figma制作动画感兴趣可以参考了解一下。

扯远了，我们先导出文件到代码中使用吧！

导出动画文件

点击Save to workspace，然后到workspace中找到该动画，选择导出一个比较小的dotLottie文件。

渲染该动画文件

我此处使用compose进行渲染，参考Lottie Compose。

首先打开项目添加maven仓库地址：

maven(url = "https://oss.sonatype.org/content/repositories/snapshots/")

再添加lottie依赖

implementation "com.airbnb.android:lottie-compose:$lottieVersion"

将刚刚导出的Lottie文件放到res目录的raw文件夹中，在Compose中渲染该文件。

Text(text = "Figma X LottieFiles")
val gooseAnim by rememberLottieComposition(
    spec = LottieCompositionSpec.RawRes(R.raw.anim_little_goose)
)
val progress by animateLottieCompositionAsState(
    composition = gooseAnim,
    iterations = LottieConstants.IterateForever
)
LottieAnimation(composition = gooseAnim, progress = { progress })