名词解解释

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插件即可。

 

 

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

  1. 逐浪CMS+百度小程序开源包发布-对接海量资源助力推广

    接入百度小程序海量流量就在使用Zoomla!逐浪CMS开发栈 这里有最强的CMS内核依托于国家高新企业Zoomla!逐浪之上 这里有最海量的用户流量依托于百度小程序 这里有最开放的技术栈 这里有最卓越 ...

  2. Bodymovin：Bodymovin和Lottie：把AE动画转换成HTML5/Android/iOS原生动画

    转自:https://www.cnblogs.com/zamhown/p/6688369.html 大杀器Bodymovin和Lottie:把AE动画转换成HTML5/Android/iOS原生动画 ...

  3. 大杀器Bodymovin和Lottie：把AE动画转换成HTML5/Android/iOS原生动画

    前段时间听部门老大说,Airbnb出了个移动端的动画库Lottie,可以和一个名叫Bodymovin的AE插件结合起来,把在AE上做好的动画导出为json文件,然后以Android/iOS原生动画的形 ...

  4. 玩转 .NET Core 3.0:逐浪CMS新版发布，建站更简单、网站更安全

    2019年11月11日,在大家都忙于网上体会“双11 ”的热闹气氛的时候,逐浪CMS开发者团队正在做着新版本发布的最后工作.此次更新是基本于 .NET Core 3.0开发,也是全国首个基于 .NET ...

  5. 尖端之作看逐浪-Zoomla!逐浪CMS python版发布

    免费下载:https://www.z01.com/down/3723.shtml Python是跻身于当代IT世界最流行和代码最高效的编程语言之一. 带着对技术的卓越追求.对客户的承诺.对品质的极致追 ...

  6. 要web开发精品教程吗？免费无广告一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放

    要web开发精品教程吗?免费无广告一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放 大师主讲 经验难得 由逐浪CMS首席架构师发哥老师,亲自主理讲解. 历时一年精心打造, 汇聚了互联网诞生 ...

  7. 多管齐下显神威-2017逐浪CMS开启全新建站与WEB技术革命

    培训班里说百遍,不如商业场景来检验. PS.AI.JS工具齐上阵,一统逐浪CMS全网中间件. 从逐浪软件创业团队成立.到逐浪CMS产品,以企业形式运营,历经十二载风雨,作为华文世界排名第一的dotNE ...

  8. 致远·面向人工智能-逐浪CMS v8.1.2全面发布[全球首个基于dotNET core3.0的中文CMS]

    原文:https://www.z01.com/down/3484.shtml 再远, 我都不会停息, 因为技术而生, 因为技术而强, 这是逐浪软件的命与根! 全新打造, 三百多项超级功能, 助你十分钟 ...

  9. windows 上搭建 sftp 服务器 -freesshd全过程（ 在linux上部署逐浪CMS的必读教程）

    文章标题: windows 上搭建 sftp 服务器 - freesshd全过程 关键字 : freesshd 文章分类: 教程 创建时间: 2020年3月23日 缘由 动手 第一步:添加用户 第二步 ...

随机推荐

  1. Linux_新建用户

    目录 1.新增用户 2.增加密码 新增用户:cn 进入root 输入新建命令 cn就是我们的新的用户名,也可以换成其他的 sudo useradd cn 接下来发现没有反应,是正常的,如图 查看是否新 ...

  2. python语法基础-基础-控制语句

    ###############    if条件控制语句    ############### # 以下实例 x 为 0-99 取一个数,y 为 0-199 取一个数,如果 x>y 则输出 x,如 ...

  3. 使用框架结构之frameset

    首先,我希望在你的目录下,有4个网页,各自显示不同的内容. 如图所示: 1.html显示"火影忍者" 2.html显示"英雄联盟" 3.html显示" ...

  4. GUI-猜字游戏

    # 设计思想先定义输入,输入,然后设计逻辑 # GUI from tkinter # 逻辑层 # 设计GUI(用户界面) from tkinter import * import tkinter.si ...

  5. 提升项目一:花卉管理系统(Servlet+JSP完成)

    这个是写的第一个项目:使用Servlet+JSP完成,加上对底层构架的理解,才可以对后面要接触使用的ssh框架的深刻理解 2017-02-11: 完成对进货业务的操作, 下一步完成对销货业务的操作

  6. npm安装依赖太慢问题

    执行 npm install 会发现很慢,可以在安装时手动指定从哪个镜像服务器获取资源,我使用的是阿里巴巴在国内的镜像服务器. 命令如下: npm install --registry=https:/ ...

  7. js如何深度克隆

    var json = {a:6,b:4,c:[1,2,3]}; var json2 = clone(json); function clone(obj){ var oNew = new obj.con ...

  8. tomcat6版本虚拟目录详细配置

    在tomcat6版本中: 一. 1.[官方文档]本人不推荐. 在tomcat\conf下server.xml中找到 <Host name="localhost"  appBa ...

  9. connect() failed (111: Connection refused) while connecting to upstream报错处理

    新lnmp环境调试项目时,nginx报错如下: 解决: 发现php-fpm.conf是以套接字方式通信,而nginx是以端口方式通信,见下图: 将nginx.conf修改为如下,重新reload即可

  10. Image图片

    # View more python tutorials on my Youtube and Youku channel!!! # Youtube video tutorial: https://ww ...