前言
预警：许多动图，注意流量。
最近收到一个邮件，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 })
大功告成！
本次烘托的为最下面的作用，再按次序加上前两次做的动画，将它们放在一起对比一下：
我自己比较喜爱第一个帧动画，动画张力很强！
总结
一句话概括：Figma X Lottle Files 现在只适合做比较简单的动效。注意是现在，由于Lottie是一个十分优异且创新的动画框架，后续或许会有更多新的功能。
为什么这么说呢？由于现在Figma有许多特性并不支撑导出Lottie动画。而且它由多个完整的动画关键帧组成，难以做到像After Effects中对其中某个形状的关键帧细调，而且动画曲线也无法深度定制，关于大型且杂乱的动画还需要在AE中完成。
但是！我想说的是，这个插件打破了UI规划和动效规划的技术壁垒，这下子UI规划可以简单上手动效规划了。
参阅
- Lottie-Compose文档：airbnb.io/lottie/#/an…
- Figma LottieFiles Plugin: lottiefiles.com/plugins/fig…
- Figma LottieFiles 官方演示视频：www.youtube.com/watch?v=bqi…
- Figma to LottieFiles supported features:lottiefiles.notion.site/Supported-f…
- dotLottie介绍：lottiefiles.notion.site/Getting-sta…
