Lottie || bodymovin 初体验
bodymovin AE
这是windows版本的经验。
1.安装AE，我用的是2015版本，使用amtlib泼姐。
2.从QQ群("annie2x官方交流群") -- 文件 -- 辅助软件及工具 -- bodymovin.zxp 下载zxp扩展.
3.同样在QQ群文件搜索"zxpinstaller"，可以找到zxpinstaller插件安装器.exe。
4.安装zxpinstaller，然后运行bodymovin.zxp，出现插件安装成功的弹窗。
5.打开AE，点击“编辑”>“首选项”>“常规”菜单项，选中“允许脚本写入文件和访问网络”，点击确定。
6.在AE里面，点击“合成” -- 新建合成 -- 合成名称("合成一"),我这里合成名称是“合成一”。
然后随意做一点动画。
7.点击“窗口”>“扩展”>“Bodymovin”菜单项，打开Bodymovin的界面。
a. "Selected"下面选中"合成一"
b. "..."下面点击“合成一”这一行，出现保存“data.json”的弹窗，选择一个文件目录，保存“data.json”。
我这里新建了一个文件夹"paper1",将data.json保存到paper1目录。
8.点击"render"按钮，导出data.json和images文件夹。
然后也可以点击"preview"进行预览动画。
9.打开项目文件夹"paper1",新建index.html文件.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bodymovin Demo</title>
<script src="js/lottie.js"></script>
</head>
<body>
<div id="animation"></div>
<script>
bodymovin.loadAnimation({
path:'data.json', //json文件路径
loop:true,
autoplay:true,
renderer:'canvas', //渲染方式，有"html"、"canvas"和"svg"三种
container:document.getElementById('animation')
});
//bodymovin.js的完整api文档见GitHub项目首页(https://github.com/bodymovin/bodymovin)
</script>
</body>
</html>
10.预览，我这里用的是群里的netbox.exe，因为本地预览json会有跨域的错误。
- 发表于 2018-10-29 14:40
- 阅读 ( 1006 )
- 分类：Annie2x经验交流
