大量动图~流量党预警！！！[]~(￣▽￣)~*

去年2月的时候在技术论坛【掘金】https://juejin.im 上偶然看见了这个动画的开源库，作为一个从入行就热衷于《程序员追着砍系列》动画的设计师（大雾划掉），终于找到了一个可以完美复现设计动画，且开发轻松上手的工具了~此时向Airbnb 的开发小组献上鲜花与掌声。

由于去年上线的时候，这个开源库还有不少的BUG ,自己也还在摸索，断断续续的，一直到今年才把这个教程整理出来，这两天会陆续发出来~撒花~~~

简介与安装

简介

Lottie是Airbnb开源的一个面向 iOS、Android、React Native 的动画库。

Web:以svg/canvas/html+js的形式。Bodymovin自己提供了作为Player的js库——bodymovin.js； Android原生，通过Airbnb的开源项目“lottie-android”实现； iOS原生，通过Airbnb的开源项目“lottie-ios”实现； React Native，通过Airbnb的开源项目“lottie-react-native”实现。

从文档给出的案例，我们可以看到，这个插件支持，形状变化，位移，修剪路径，缩放。

很显然这些效果如果找你们的程序小哥来写，基本属于《程序员追着砍系列动画》了~╮(╯_╰)╭

可是作为一个喜欢作死的视觉UI 设计师，这个插件真的是帮了大忙了。

只要你掌握AE和 lottie 这两个工具，以上炫酷的动画就可以直接运用在你的产品中了，程序的动画工作也会大大降低~

首先你需要安装AE和bodymovin插件，AE的安装方法看百度~

这边主要讲下bodymovin的安装方法

方法一：修改注册表 安装法

Mac

1·关闭AE

2·将解压后的文件夹直接复制到 MAC机器路径是/Library/Application\Support/Adobe/CEP/extensions/bodymovin

3、修改注册表.对于MAC,打开文件~/Library/Preferences/com.adobe.CSXS.6.plist并在末尾添加一行,键为PlayerDebugMode,值为1.

Win

先关闭AE; 用WinRAR或类似软件打开bodymovin.zxp文件,并将解压后的文件夹直接复制到C:\Program Files (x86)\Common Files\Adobe\CEP\extensions

或者是C:\AppData\Roaming\Adobe\CEP\extensions下

修改注册表.对于Windows,打开注册表修改器,找到HKEY_CURRENT_USER/Software/Adobe/CSXS.6,并在此路径下添加一个名为PlayerDebugMode的KEY,

并赋值为1

设置AE 无论以何种方式安装bodymovin插件,都需要在AE的编辑->首选项->常规中勾选允许脚本写入文件和访问网络(默认不开启) 

MAC

WIN

方法二 ：使用插件安装

1、关闭AE软件

2、在以下网址下载ZXP ，并安装,也可以在公众号回复 【AE】打包下载 

http://aescripts.com/learn/zxp-installer/

3、下载最新的bodymovin文件  也可以在公众号回复 【AE】打包下载 ,版本为：5.2.0 

下载地址https://github.com/airbnb/lottie-web/tree/master/build/extension

4、打开zxp ,将下载好的插件拖拽至窗口中

5、如果上文的bodymovin插件安装成功的话,在AE中的窗口->拓展中是能够找到它的

Tips:在导出json文件时，可以点击设置图标，选择其他几种不同的方案

1、Split : 为动画分解成多个文件

2、Glyphs: 将字体转换成图形形状(建议勾选这个选项)

3、Hidden: 隐藏，检查导出时需要隐藏的图层

4、Guides: 向导，检查导出时需要导出的向导层

5、Extra Comps: 额外补间，检查表达式是否指向所有补间动画

6、Assets: 资源，输出项目图片格式

工作流程： 

简单讲就是： 

1、使用AE  

2、使用Bodymovin 导出Json 数据， 程序可直接使用~~ 

3、交付给开发使用 

可实现效果：位移、变形、缩放、透明度变化等（后面会发详细的官方说明的翻译稿~） 

不支持：粒子系统、3D图层 

因为是支持源生动画这个属性，所以动画可以搭配交互，自适应这点还是非常厉害的。 

软件安装：

注意事项是，制作的过程中，每一个AE图层必须是形状图层，不可以是固态层。

使用固态层设计，导出的json文件就是会丢失。

非常推荐想要认真学习这个框架的同学好好研究下官方的源文件，可以学到不少有趣的东西~~~

后面的教程会专门讲各种我踩过的神坑~~~

下面的动画都是官方放出的~

可以在https://github.com/airbnb/lottie-ios 这个地址下载到

以上参考：

GitHub : https://github.com/airbnb/lottie-ios 

简书：https://www.jianshu.com/p/9a2136ecbc7b

Airbnb:  https://airbnb.design/introducing-lottie/

上文提到的所有插件和源文件都可以在公众号：锦字回时，回复【AE】下载~~

下篇会放出lottie AE 官方文档的翻译稿和一些自己总结的制作注意点~

谢谢看到结尾处~~~欢迎来公众号：【锦字回时】找我玩~