Bodymovin是一款可以从AE中导出Web动画的脚本,这款脚本导出的web动画格式为.json格式文件,bodymovin生成的json体积非常小,只有几百kb左右,读取速度要比图片快的多。
V5.5.3 更新内容:
– 新功能:为高斯模糊效果添加SVG支持
– 新功能:添加TypeScript类型定义
– 修复:在通过文本格式创建时删除文本警告
– 修复:修复字体中合并的字符
– 新功能:为扩展添加了多个设置功能
– 新功能:在表达式中添加了对遮罩不透明度的支持
– 修复:修复#1552 html渲染器错误的字体测量
– 修复:在JSON文档中修复maskProperties键名称
如果电脑上没有AE的话,需要安装AE CC2014或更高版本。以AE CC2017为例:
(AE CC2017 欢迎界面)
AE安装完成后,安装Bodymovin插件。
2.1到GitHub的首页下载Bodymovin插件包(地址:https://github.com/bodymovin/bodymovin),下载或者克隆插件包到本地。
2.2在项目目录的“/build/extension”目录下找到“bodymovin.zxp”文件,然后双击安装此插件。(安装过程中关闭AE软件)如果没有如下图片,先不用管,先进行下一步2.3操作。
2.3下载ZXP Installer(地址:[http://aescripts.com/learn/zxp-installer/),然后双击打开软件,点击“File”>“Open”菜单项载入上述bodymovin.zxp插件包,ZXP Installer会自动开始安装。安装完成后的软件主页面如下图所示,表示插件已成功安装。
1、打开一个 Adobe After Effect 项目,点击 Window / Extensions / Bodymovin,出现如图1所示对话框,点击 Selected 选中要导出的 Composition,选择导出文件的路径(Destination Folder),点击 RENDER 即可导出。
1、选定一个合成
2、选择导出文件的路径,点击渲染动画即可。
2、进入预览拖拽播放进度条可预览生成js文件的动画效果。