1、bodymovie插件下载地址:https://github.com/bigxixi/bodymovin_cn
安装方法:
1]. 推荐使用→https://aescripts.com/learn/zxp-installer/的zxp安装器(bodymovin需要这个安装器才能安装)
2]. Windows版下载: 快捷键ctrl + o,然后选择zxp文件进行安装。如果之前安装过bodymovin,会覆盖掉原来的版本。
3]. Mac版下载: 直接将zxp文件拖拽进安装器,或者按快捷键cmd + o然后,选择zxp文件进行安装。如果之前安装过bodymovin,会覆盖掉原来的版本。
2、使用方法:
bodymovin 导出 JSON → 打开一个 Adobe After Effect 项目,“编辑”>“首选项”>“常规”菜单项,选中“允许脚本写入文件和访问网络”,点击确定。 → 点击 Window - Extensions -Bodymovin(窗口-扩展-bodymovin) → AE中制作一个简单的动画 → 打开Bodymovin插件窗口,发现“视频”列表,在“视频”中设置好json文件输出位置,点击“Render”。
即:1、选定一个合成。2、选择导出文件的路径,点击渲染动画即可。3、进入预览拖拽播放进度条可预览生成js文件的动画效果。
3、Lottie预览网站:https://lottiefiles.com
4、技术实现:
传统的序列帧活着GIF图占用资源过大或者有到处失真等问题,让开发小哥哥自己既费时又无法保证100%还原效果图…… 基于以上这些问题,可采用Lottie动画。
Lottie是Airbnb开源的一个动画渲染库,同时支持Android、IOS等平台。其工作流程如下:
我们在AE中制作好动画,通过bodymovie插件导出json文件给开发者,各端开发通过Lottie渲染播放动画。