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,点击“编辑”>“首选项”>“常规”菜单项,选中“允许脚本写入文件和访问网络”,点击确定。
attachments-2018-10-p03oWmX55bd6a8e9401eb.png
6.在AE里面,点击“合成” -- 新建合成 -- 合成名称("合成一"),我这里合成名称是“合成一”。
   然后随意做一点动画。attachments-2018-10-tMgQphFe5bd6a8f7b7578.png

7.点击“窗口”>“扩展”>“Bodymovin”菜单项,打开Bodymovin的界面。attachments-2018-10-itGIvl935bd6a905d56e5.png
   a. "Selected"下面选中"合成一"
   b. "..."下面点击“合成一”这一行,出现保存“data.json”的弹窗,选择一个文件目录,保存“data.json”。
        我这里新建了一个文件夹"paper1",将data.json保存到paper1目录。attachments-2018-10-BoXlqe2f5bd6a9111a8fc.png

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>
attachments-2018-10-2mk6TXPF5bd6aa61a92ce.png

10.预览,我这里用的是群里的netbox.exe,因为本地预览json会有跨域的错误。


你可能感兴趣的文章

相关问题

2 条评论

请先 登录 后评论
不写代码的码农
大北兔

15 篇文章

作家榜 »

  1. 大北兔 15 文章
  2. 皮卡丘先生 13 文章
  3. hero 10 文章
  4. vien007 7 文章
  5. ningbnii 4 文章
  6. Even 4 文章
  7. 炸天 4 文章
  8. anlun214 4 文章