Airbnb动画库Lottie可以和一个名叫Bodymovin的AE插件结合起来，把在AE上做好的动画导出为json文件以动画的形式在设备上渲染播放
Bodymovin这个AE插件可以把AE上做好的合成（Composition，类似于Pr里的剪辑序列）导出成带有矢量动画信息的json文件，并可以在以下平台播放：
Web页面，以svg/canvas/html+js的形式。Bodymovin自己提供了作为Player的js库——bodymovin.js；Android原生，通过Airbnb的开源项目“lottie-android”实现；iOS原生，通过Airbnb的开源项目“lottie-ios”实现；React Native，通过Airbnb的开源项目“lottie-react-native”实现。
下面就分步骤总结下Bodymovin的安装和使用，以及导出的动画如何在Web页面上播放：
1、如果电脑上没有AE的话，需要安装AE CC2014或更高版本。以AE CC2022为例，如有小伙伴有需要也可在链接中自取然后破解即可：
破解教程：
https://pan.baidu.com/s/1ZA52PskOYR_MPx05L2QwXg?pwd=q40c 提取码: q40c
AE软件资源：
https://pan.baidu.com/s/1ZA52PskOYR_MPx05L2QwXg?pwd=q40c 提取码: q40c
2.2 在项目目录的“/build/extension”目录下找到“bodymovin.zxp”文件，这个就是插件包了。
3、打开AE，点击“编辑”>“首选项”>“常规”菜单项，选中“允许脚本写入文件和访问网络”，点击确定。
4、点击“窗口”>“扩展”>“Bodymovin”菜单项，就可以打开Bodymovin的界面使用插件了。
5、我们在空的AE项目里，新建一个名为“合成1”的合成（注意在AE里图层都尽量使用英文命名）否则可能会导致导出JSON文件错误。
6、打开Bodymovin插件窗口，可以发现“合成1”出现在了下面的列表中。选中“合成1”，设置好json文件输出位置，点击“Render”。
7、Bodymovin还为生成出的json文件提供了预览功能，点击插件界面上的“Preview”按钮，点击“Browse”载入刚刚生成的json文件，就会看到，动画被原汁原味地导出了：
8、接下来我们新建一个网页来播放这段动画。把Bodymovin的GitHub项目目录下的“\build\player\bodymovin.js”和刚刚生成的json文件复制到网页根目录，新建一个html文件，代码如下：
9、打开这个页面，就会发现动画成功跑起来了，如果想让json版动画跑在Android/iOS设备上，在GitHub上搜索“lottie”或者下载lottie客户端，复制json链接进去即可打开查看了。
后面我在做好的动效导出发现了问题，注意的是，在Bodymovin导出文件出现错误导致里面某些图片无法播放时，AE里的文件*最好使用英文命名*这很重要，并且可在以下设置中尝试勾选，
在附带一些网友出现的其他问题的解答方案：
1、Bodymovin导出Json文件避坑指南：https://www.jianshu.com/p/18a7e7c25464
2、UI设计写的关于AE转json动画开发避坑指南：https://zhuanlan.zhihu.com/p/267141696
http://airbnb.io/lottie/#/
https://airbnb.design/lottie/
https://airbnb.design/introducing-lottie/
http://www.cnblogs.com/zamhown/p/6688369.html
http://aes cripts.com/learn/zxp-installer/
http://www.cocoachina.com/ios/20170503/19168.html?utm_source=tuicool&utm_medium=referral https://www.lottiefiles.com
