看逐浪CMS技术小哥做SVG动画（附使用Bodymovin和Lottie将Adobe After Effects(AE)程式转为 HTML5/Android/iOS原生的动画全过程-即AE转svg\canvas\html5动画）

 

名词解解释

adobe After Effects

AE：adobe After Effects，adobe公司的专业视频制作软件。

Bodymovin插件预览

Bodymovin：是一个AE的插件，它可以把动画直接输出成代码，直接给程序员使用放在各个终端上使用,是airbnb团队开发的一个插件，其原理是将动画转成json文件格式，然后通过JS程序输出，转换成svg、canvas或html5动画。

Lottie官网界面

Lottie：是集成BodyMovin一系列服务的总称，其官网是https://airbnb.design/lottie/
你可以称这一系列技术为lottie库，其官网如此介绍：

Lottie is the native engine that Airbnb’s awesome team built. It uses Bodymovin as the animation exporter and is the ideal complement for getting animations to play natively everywhere.

它是一款由Airbnb团队开发出的，完美地依托Bodymovin作为动画输出、帮助我们在项目中更自然便捷呈现动画的原生引

技术背景

前段时间听部门老大说，Airbnb出了个移动端的动画库Lottie，可以和一个名叫Bodymovin的AE插件结合起来，把在AE上做好的动画导出为json文件，然后以Android/iOS原生动画的形式在移动设备上渲染播放。AE（Adobe After Effects）是视频后期特效和动画制作的行家，前段时间充斥视野的MG动画就是用它制作的。如果真的可以实现，就会大大方便前端动画的设计。

2017年4月8日，第二届中国前端开发者大会（FDCon2017），有日程提到了Lottie和Bodymovin。渚薰的主题是“H5互动的正确打开方式”，有作相关推荐。

下面是一个PPT截图，讲解了其中原理：

FDCon2017论坛PPT讲解原理

这个AE插件可以把AE上做好的合成（Composition，类似于Pr里的剪辑序列）导出成带有矢量动画信息的json文件，并可以在以下平台播放：

• Web页面，以svg/canvas/html+js的形式。Airbnb提供了作为Player的js库——lottie-web；
• Android原生，通过Airbnb的开源项目“lottie-android”实现；
• iOS原生，通过Airbnb的开源项目“lottie-ios”实现；
• React Native，通过Airbnb的开源项目“lottie-react-native”实现。

详细使用指引

下面就分步骤总结下Bodymovin的安装和使用，以及导出的动画如何在Web页面上播放：

1. 如果电脑上没有AE的话，需要安装AE CC2014或更高版本。以AE CC2019为例：

AE CC2019 欢迎界面

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

安装插件有几种方法，比如直接到Adobe的插件中心下载插件（链接：Adobe Add-ons，一般不是最新版），也可以到Bodymovin的GitHub首页下载最新版的插件并安装。我推荐第二种方法，这个方法步骤如下：

2.1 到Bodymovin的GitHub首页（链接：[airbnb/lottie-web](https://github.com/airbnb/lottie-web）克隆项目到本地，或者下载.zip包。

lottie-web仓库

小技巧：有朋友反馈从github下载过慢，你可以注册一个gitee码云的帐号，将github的仓库克隆到gitee再下载，速度会有很大的改善。

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

2.3 获取到了插件，你可能是无法打开的，这时需要安装一个ZXP install插件工具。

点击http://aescripts.com/learn/zxp-installer/ 根据网站界面，选择你的操作系统版本（windows或mac）下载ZXP install插件工具。

zxp-installer下载界面

下载完成，打开它，点击“File”>“Open”菜单项载入上述.zxp插件包，ZXP Installer会自动开始安装。安装完成后的软件主页面如下图所示，表示插件已成功安装。

安装ZXP install插件

维护ZXP install插件

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

ae 2019中的设置

如果是旧版，则可能是在：“编辑”>“首选项”>“脚本和表达式”菜单项，选中“允许脚本写入文件和访问网络”中，如下图

ae 2017等旧版设置

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

在ae中调用插件

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

 

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

 

7. Bodymovin还为生成出的json文件提供了预览功能，点击插件界面上的“Preview”按钮，点击“Browse”载入刚刚生成的json文件，就会看到，动画被原汁原味地导出了：

 

可以从上图看到，预览中还提示该动画有多少帧。

8. 接下来我们新建一个网页来播放这段动画

你需要进入刚刚从Github下载的lottie-web项目目录下“\build\player\lottie.min.js”和刚刚生成的json文件复制到网页根目录，新建一个html文件。

下面的代码则提供了CDN的lottie.min.js地址：代码如下：

	<!DOCTYPE html>
	<html lang="zh_CN">
	<head>
	<meta charset="UTF-8">
	<title>Bodymovin Demo</title>
	<meta name="Generator" content="Zoomla!逐浪®CMS">
	<meta name="Author" content="去上云73ic.com">
	<meta name="Others" content="字体呈现基于逐浪字库f.ziti163.com">
	<script src="http://code.z01.com/lottie.min.js"></script>
	</head>
	<body>
	<div id="animation"></div>
	<script>
	lottie.loadAnimation({
	path:'data.json', //json文件路径
	loop:true,
	autoplay:true,
	renderer:'canvas', //渲染方式，有"html"、"canvas"和"svg"三种
	container:document.getElementById('animation')
	});
	//lottie-web的完整api文档见GitHub项目首页(https://github.com/airbnb/lottie-web)
	</script>
	</body>
	</html>

9 用http方式打开这个页面，就会发现动画成功跑起来了，是不是很黑科技？

在http中运行的效果

记得，这时你要用http或https的方式将你的这个静态Html页面跑起来，才能看到动画，如果直接点击这个html用file模式是无法看到动画的。

为何推荐

记得在FDCon2017大会上，演讲完毕后，有个人提出了我一直想问的问题：

Adobe已经推出HTML5动画设计软件An（Adobe Animate CC），为什么不用An而要用这种方式？

主讲人答道，An的前身就是Flash，它生成出来的H5动画是用js写的（使用CreateJS库），后期修改和维护会更复杂。

确实如此，用过Lottie之后，不难看出它的灵活性的确很高，而且json形式的动画也远比js写出来的动画更适合跨平台。实在叹服，为Lottie点10086个赞。

学习总结

缺点：

1，Bodymovin渲染的动画，如果是在AE里面创建的矢量元素，则直接生产json代码。如果动画里有导入位图，则会导出编号后的图片文件到image文件夹里。

2，AE里里制作动画注意不要有太多的合成嵌套，原生环境下有些会出现渲染不出的情况。

3，用AE的朋友可能留意到上面的WD动画使用了修剪路径的效果，这里要提醒使用该效果时，不宜同时修改start和End等多个参数，渲染出来的效果会有些许偏差。然后路径动画的stroke值越大，误差可能会越大，需要人为调整。

4，原生环境下运行json动画时，出现了起步延迟的状况。所以也不太适合对动画时间有精密要求的项目里使用。

5，安卓Android 5.0以下的机型会不支持SVG动画，所以对接安卓的时候需要做好两手准备。

优点：

所谓凯撒的还给凯撒，上帝的还给上帝。Bodymovin让设计开发各自专注在自己的领域而不用去在意动画实现过程中的一些繁缛细节。而且只要保存好AE源文件我们可以随时导出替换json文件，方便动画调试。懂一些基础前端代码的小伙伴们，甚至可以自己发挥脑洞，自己调试出一些有趣的原型动画出来。一套json文件，就能同时满足web 原生 reactNative不同环境的动画制作需求。

相信Bodymoivn还会不断的迭代升级，开放更多的定制化参数。有兴趣下载试玩起来。

制作要领

由于lottie是用来适配移动库的，如果你只是PC上使用要好些，如果要在多个安卓版本中使用，则需要选择正确的版本。

下面这一节如果你不是做移动开发可以忽略半部份，但后面的制图要领建议要看

开始的开始，使用前需要确认的事情

• 请确认好你们使用的bodymovin版和两个客户端不同的版本

并不是最新版就一定适用，这个是个误区。因为是多端协同工作的，可能bodymovin这里有5.5.6的最新版本，但并不代表安卓端可以调配并使用到最新版本的json文件，所以使用之前，一定要先确认好设计师和客户端可以使用的版本。下面贴上我自己最后找到的版本确认作为例子给大家参考。那么在哪里可以找到并测试适合自己的版本呢？接下来也会和大家说明。

 

• 如何找到适合的bodymovin插件版本？

AE使用的bodymovin的各个版本可以在github上面找到。具体各个版本的下载，只需要下载对应的压缩包，然后解压后找到你要的对应的bodymovin插件即可。