前段时间，Airbnb出了个移动端的动画库Lottie，可以和一个名叫Bodymovin的AE插件结合起来，把在AE上做好的动画导出为json文件，然后以Android/iOS原生动画的形式在移动设备上渲染播放。AE（Adobe After Effects）可是视频后期特效和动画制作的行家，现在把安装和使用方法分享给大家。

下面就分步骤总结下Bodymovin的安装和使用

1.   如果电脑上没有AE的话，需要安装AE CC2014或更高版本。以AE CC2017为例：
    （AE CC2017 欢迎界面）


2.   AE安装完成后，安装Bodymovin插件。

2.1 到Bodymovin的GitHub首页（地址：[https://github.com/bodymovin/bodymovin](https://github.com/bodymovin/bodymovin)）克隆项目到本地，或者下载.zip包。

2.2 在项目目录的“/build/extension”目录下找到“bodymovin.zxp”文件，这个就是插件包了。

2.3 下载安装ZXP Installer（地址：[http://aescripts.com/learn/zxp-installer/]，打开软件，点击“File”>“Open”菜单项载入上述bodymovin.zxp插件包，ZXP Installer会自动开始安装。安装完成后的软件主页面如下图所示，表示插件已成功安装。
如果没有上面的图片，只是这个个空白的，也是可以的，有的电脑加载不出来，反正我的是，没有显示上面的图片也安装成功了，我也不懂具体原因。

3. 打开AE，点击“编辑”>“首选项”>“常规”菜单项，选中“允许脚本写入文件和访问网络”，点击确定。

4.点击“窗口”>“扩展”>“Bodymovin”菜单项，就可以打开Bodymovin的界面使用插件了。

5.  我们在空的AE项目里，新建一个名为“视频”的合成，并制作一段简单的动画：

6.  打开Bodymovin插件窗口，可以发现“视频”出现在了下面的列表中。选中“视频”，设置好json文件输出位置，点击“Render”。

7. Bodymovin还为生成出的json文件提供了预览功能，点击插件界面上的“Preview”按钮，点击“Browse”载入刚刚生成的json文件，就会看到，动画被原汁原味地导出了：
大功告成了，导出来的文件可以交给程序员哥哥了，接下来的事情让他们自己去弄吧，我们美工能帮的就这些了。嘿嘿！

炫酷神器，AE插件Bodymovin.zxp的安装与使用相关推荐

1. html5下拉幻灯片插件,基于WebGL的炫酷2D幻灯片插件

   GLSlideshow.js是一款基于WebGL的炫酷2D幻灯片插件.该幻灯片支持多种过渡效果:波浪效果,立方体效果,风吹效果等.在旧的IE浏览器中它会自动回退为2D Canvas来显示幻灯片. 使用 ...

2. 学习jQuery之旅--使用炫酷的jQuery插件

   前两篇文章中,介绍了jQuery中强大的Selectors (选择器)以及开发中比较常用的方法的使用.今天和大家一起体验一下jQuery另一个吸引人的地方--强大炫酷实用的jQuery插件. 做网站的 ...

3. jQuery/CSS3炫酷动画效果插件 animate

   jQuery是一款很强大的JavaScript框架,本文介绍的9个应用插件很多都是基于jQuery的,另外,CSS3的应用让这些插件增添了不少光彩,特别是第一个动画插件Animate.css非常实用, ...

4. html炫酷在线,程序猿必备的10款超炫酷HTML5 Canvas插件

   1.超炫酷HTML5 Canvas 3D旋转地球动画 这是一款基于HTML5 Canvas的3D地球模拟动画,动画以太空作为背景,地球在太空中旋转,同时我们也可以拖拽鼠标来从不同的角度观察地球.另外我 ...

5. windows7安装android软件,装酷神器怎么用 安卓手机上安装体验电脑Win7系统方法

   装酷神器怎么用?怎么样才可以在手机上安装体验win7系统?估计有不少人想过能不能在手机上装上我们电脑用的系统这个问题?很可惜,因为系统架构等等原因,一般的手机都不支持电脑系统的移植,本文小编就为大家介 ...

6. IntelliJ IDEA插件系列：四大炫酷神器你值得拥有

   拥有了这四款插件,你就比别人领先一步,你的界面独一无二 1.Mario Progress Bar 这是基于 IJ 的 IDE 的 Mario 进度条,基于 Dmitry Batkovitch 的 Ny ...

7. 前端实现炫酷动效_20个网页动效设计的炫酷神器

   如今很多 UI 设计师不是正在做动效,就正在学着做动效. 动效现在已经无处不在了.有的动效可能是一个微妙的悬停效果,使用 Bttn.css 或者是 Hover Buttons 的帮助下,添加到按钮上, ...

8. 前端实现炫酷进度条插件

   最近做到一个下载和导入的进度条效果,所以做了一个小插件,自己记录一下,然后分享一下 1.先看实现的效果 2.看实现的代码,样式的话我是根据UI出的图搞得,可以自行更改 <template> ...

9. 日常总结：Vue写一个炫酷的时钟插件

   效果图 代码奉上: <template><div class="clock"><div class="flip"><d ...

10. AE 以及 Bodymovin的安装

    AE制作一个简单的动画,并用Bodymovin导出教程: http://blog.csdn.net/sinat_24196195/article/details/74933005 AE安装(mac) ...

最新文章

1. java学mybatis还用学jdbc吗,mybatis系统学习（二）——使用基础mybatis代替原始jdbc
2. 维基链锚定行业缺口，定位发展一体化DeFi，持续开发出各类产品应用，包括去中心化抵押借贷系统Wayki-CDP（含稳定币WUSD）、去中心化交易所Wayki-DEX、去中心化合成资产协议Wayki-X
3. zenoss core
4. Android Gatekeeper流程深度解剖
5. 使用JQUERY实现局部页面定时刷新
6. Code Chef December Challenge 2018题解
7. flask mvc模式开发_Flask中文文档-转载
8. Python MySQLdb 学习总结
9. 获取滑动条高度_HexMap学习笔记(三)——海拔高度与阶梯连接
10. python 获取当前路径_Python获取当前路径实现代码
11. java中数组操作常见的三个错误
12. python3视频教程哪个好_2020年5个经典python编程入门视频教程推荐学习
13. 096: 复习习题 求导题型 Case4：变积分限函数导数；Case5：高阶导数；Case6：分段函数求导
14. sqlserver查看历史死锁信息
15. mac蓝牙键盘工具分享——通过mac键盘给iPhone、iPad打字
16. 交大博士血泪自述：不是读博的料，别上博士这条船
17. Android天气预报项目
18. 小甲鱼python游戏代码_【小甲鱼】零基础学习python pygame 飞机大战可执行源代码...
19. 给我两小时，我能写很长长长长长长的APP测试用例！
20. 【报告分享】服装零售行业洞察报告-有赞伯俊（附下载）

热门文章

1. android iso系统下载 百度云,Windows 7 SP1官方原版ISO系统镜像所有版本下载集合
2. 集成maven和Spring boot的profile 专题
3. SuperCard与GBA
4. wap网站制作教程，Github标星5.3K
5. 软件测试 | 测试计划包含什么内容
6. 安卓psp模拟器联机教程_让ＰＳＰ带你回童年ＦＣ模拟器联机教程.doc
7. Ubuntu18.04安装可视化软件Pyviz
8. 用Python实现基于Tkinter和sqlite3的加密日记本程序
9. 【疫情防控毕业设计源码】精品微信小程序社区疫情防控+后台管理系统|前后分离VUE[包运行成功]
10. 微信抢红包插件 English Version