系列文章点击

《lottie 动画设计（一）》

《lottie 动画设计（二）》

这篇主要是讲解如何使用AI / sketch 绘制图像，并导入到AE中制作和输出的问题。

工作流程

第一步:设计动画
软件：AI/sketch 。

我们的动画制作软件是AE ,但AE并不是一个很好的矢量图绘制软件，所以不必强求在AE中绘制需要的视觉元素。合理的搭配手中的软件，提高自己的工作效率才是我们的目的~


1、将需要制作的动画元素编组

2、选中编组导出 SVG

3、使用AI 打开导出的 .SVG文件 并另存为 .ai 文件

4、在AE中导入.ai文件

5、创建合成，设置需要参数
合成大小与你的动画元素尽量贴合，可以理解为切片大小。
动画帧率建议30/60

6、将文件转化为形状图层
图层→从矢量图层创建形状
选中需要转化的矢量图层→右键→从矢量图层创建形状

注意：不要使用PDF或者EPS格式导入AE,因为有时候会将画板路径也拷贝到文件中。在AI中设计的渐变效果在AE中无法识别，需要在AE中重新绘制。

7、制作动画
动画制作遵守上篇提到的各个平台的支持效果来制作
8、输出文件
选中需要导出的合成文件→设置导出路径→点击render按钮

9、测试你的动画
将你输出的json文件上传到
https://www.lottiefiles.com/preview 这个网站预览
（无法科学上网的同学可以看下之前发的《lottie 动画设计二》里面有其他网站可以在线查看）

10、下载lottie 预览app 

11、使用app 扫描网站的二维码，可以在手机上预览，你设计的动画

12、动画测试没有问题就可以把输出的json文件交付给开发使用了。
如果你想在自己的产品上使用这个框架，可以给你合作的开发推荐下面的几个网址，查看资料。
里面有具体代码的调用方法~
GitHub :https://github.com/airbnb/lottie-android
GitHub :https://github.com/airbnb/lottie-ios
再说一次【Lottie是Airbnb开源的一个面向 iOS、Android、React Native 的动画库。】

替补方案

1、手动地创建动画：设计师通过iOS、Android工程师来，手动创建动画是一个耗费巨额时间的任务，它通常很难，甚至不能保证花费那么多时间可以得到正确的动画效果。

2、Facebook Keyframes： Keyframes是一个来自Facebook团队，专门用来构建用户界面的很棒的库，然而，Keyframes并不支持一些Lottie所能支持的特性，比如： 遮罩，轨道蒙版，裁切路径，虚线样式等等。

3、Gifs：Gifs 资源是bodymovin JSON 文件的两倍还多，并且渲染的尺寸是固定的。同时不能放大来适应更大更高分辨率的屏幕。

4、Png序列桢动画： Png序列桢动画 甚至比gifs更糟糕，它们的文件大小通常是 bodymovin json文件大小的30-50倍，并且也不能被放大。

Alternatives 为避免翻译有误差，所以原文如下

1、Build animations by hand. Building animations by hand is a huge time commitment for design and engineering across Android and iOS. It's often hard or even impossible to justify spending so much time to get an animation right.

2、Facebook Keyframes. Keyframes is a wonderful new library from Facebook that they built for reactions. However, Keyframes doesn't support some of Lottie's features such as masks, mattes, trim paths, dash patterns, and more.

3、Gifs. Gifs are more than double the size of a bodymovin JSON and are rendered at a fixed size that can't be scaled up to match large and high density screens.

4、Png sequences. Png sequences are even worse than gifs in that their file sizes are often 30-50x the size of the bodymovin json and also can't be scaled up.

13、扩展阅读:

Why is it called Lottie?

Lottie is named after a German film director and the foremost pioneer of silhouette animation. Her best known films are The Adventures of Prince Achmed (1926) – the oldest surviving feature-length animated film, preceding Walt Disney's feature-length Snow White and the Seven Dwarfs (1937) by over ten years The art of Lotte Reineger

为什么叫Lottie？

Lottie以德国电影导演(剪影动画的最早的开拓者)命名。 她最着名的电影是“阿赫迈德王子历险记”(1926年) - 最古老的长篇动画电影。比华特迪士尼的长篇电影白雪公主和七个小矮人(1937)早十多年The art of Lotte Reineger

动画社区

官方动画主页：https://www.lottiefiles.com

国外动效设计网站推荐：

9 Squares: http://www.thisiscolossal.com/2015/04/9-squares-gif-collab/

Animography：https://animography.net/collections/typefaces

国外动画设计师推荐：  https://dribbble.com/animography

Motion corpse： https://www.behance.net/gallery/36796181/Motion-Corpse-5-Animation

最后：
Lottie这个工具的方法到这里就全部写完了，希望对你有所帮助(*^▽^*)


公众号回复【fox 】,可以下载 文末这只小狐狸的所有工程文件~
这只狐狸源文件用于学习目的的转发传播，不需要找我授权，记得署名沐锦就好~严禁商用

~随缘点赞 福生无量~
公众号【锦字回时】