lottie 动画设计（一）
Lottie 动效教程，简介和安装~~后期会补上使用方法和各种参考资料
大量动图~流量党预警！！！[]~(￣▽￣)~*
去年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 这两个工具，以上炫酷的动画就可以直接运用在你的产品中了，程序的动画工作也会大大降低~
2
软件安装
图三
首先你需要安装AE和bodymovin插件，AE的安装方法看百度~
这边主要讲下bodymovin的安装方法:
MAC
图四
方法一：
mac 修改注册表 安装法：
1、关闭AE
2、将解压后的文件夹直接复制到 MAC机器路是/Library/Application\Support/Adobe/CEP/extensions/bodymovin
3、修改注册表.对于MAC,打开文件~/Library/Preferences/com.adobe.CSXS.6.plist并在末尾添加一行,键为PlayerDebugMode,值为1.
Win
win：
1、先关闭AE;
2、用WinRAR或类似软件打开bodymovin.zxp文件,并将解压后的文件夹直接复制到
C:\Program Files (x86)\Common Files\Adobe\CEP\extensions
或者是C<username>\AppData\Roaming\Adobe\CEP\extensions下
3、修改注册表.对于Windows,打开注册表修改器,找到HKEY_CURRENT_USER/Software/Adobe/CSXS.6,并在此路径下添加一个名为PlayerDebugMode的KEY,
并赋值为1
4、设置AE 无论以何种方式安装bodymovin插件,都需要在AE的编辑->首选项->常规中勾选允许脚本写入文件和访问网络(默认不开启)
5、设置AE 无论以何种方式安装bodymovin插件,都需要在AE的编辑->首选项->常规中勾选允许脚本写入文件和访问网络(默认不开启)
软件界面
安装方法二
方法二 ：使用插件安装：
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、检查json 动画输出是否正常
4、交付给开发使用
注意事项
注意事项是，制作的过程中，每一个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 官方文档的翻译稿和一些自己总结的制作注意点~
谢谢看到结尾处~~~随手点赞~~~福生无量~~
[]~(￣▽￣)~*
