制作动画的素材和资源

通过Lottie将 AE 动画转换成web原生动画

1、如果电脑没有AE就安装AE，AE的版本需要是AE CC2014或以上。（以AE CC2018 为例）

2、安装Bodymovin插件。

• 将lottie-web的项目克隆或下载ZIP并解压到本地(地址:https://github.com/airbnb/lottie-web);
• 下载安装ZXP Installer https://aescripts.com/learn/zxp-installer/
• 打开ZXPinstaller ，点击file->open，载入lottie-web项目中'buildextension'目录下的bodymovin.zxp，ZXPinstaller就会自动安装。

3、导出JSON

• 打开AE ，点击 '编辑'->'首选项'->勾选 '允许脚本写入文件和访问网络',点确认。
• 打开下载好的AE源文件。
• 点击'窗口'->'拓展'->Bodymovin，在Bodymovin的窗口中选中要导出的动画并选择导出的位置点击render.

4、在web上展示出来。

• 将导出的JSON和ottie-web的项目中'buildplayer'目录下的lottie.js复制到你的网页的根目录中
• 新建个HTML文件代码如下：

• 打开网页就能看到动画动起来了。
  尽管是完成了，但是本人遇到个BUG无法解决：在AE中打开动画的源文件有些地方原本是彩色的，但导出后那个地方却是黑白的。
  望知道解决办法的大佬说明一下如何解决这个BUG。

canvas的很多例子，在这个网站可以直接拿去使用

https://codepen.io/charlespina/pen/XXrPMB