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

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

后来到4月8日,我参加了第二届中国前端开发者大会(FDCon2017),作为菜鸟瞻仰了下各位大牛。巧的是,来自阿里的大牛渚薰做主题演讲时,也提到了Lottie和Bodymovin。渚薰的主题是“H5互动的正确打开方式”,演讲十分精彩。还等什么,听完大会我便操练了起来。

(上图为FDCon2017上渚薰讲到Lottie时的PPT页面)

经过了一番试验后,我大概摸清了Bodymovin的使用方式。这个AE插件可以把AE上做好的合成(Composition,类似于Pr里的剪辑序列)导出成带有矢量动画信息的json文件,并可以在以下平台播放:

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

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

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

(AE CC2017 欢迎界面)

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

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

2.1 到Bodymovin的GitHub首页(链接:bodymovin/bodymovin)克隆项目到本地,或者下载.zip包。

2.2 在项目目录的“/build/extension”目录下找到“bodymovin.zxp”文件,这个就是插件包了。 2.3 下载安装ZXP Installer(链接:ZXP Installer),打开软件,点击“File”>“Open”菜单项载入上述.zxp插件包,ZXP Installer会自动开始安装。安装完成后的软件主页面如下图所示,表示插件已成功安装。

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

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

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

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

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

8. 接下来我们新建一个网页来播放这段动画。把Bodymovin的GitHub项目目录下的“\build\player\bodymovin.js”和刚刚生成的json文件复制到网页根目录,新建一个html文件,代码如下:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Bodymovin Demo</title>
    <script src="bodymovin.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>

9. 打开这个页面,就会发现动画成功跑起来了,是不是很黑科技?

10. 如果想让json版动画跑在Android/iOS设备上,在GitHub上搜索“lottie”,然后选择自己感兴趣的平台吧。

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

Adobe已经推出HTML5动画设计软件An(Adobe Animate CC),为什么不用An而要用这种方式?

渚薰答道,An的前身就是Flash,它生成出来的H5动画是用js写的(使用CreateJS库),后期修改和维护会更复杂。确实如此,用过Bodymovin之后,不难看出它的灵活性的确很高,而且json形式的动画也远比js写出来的动画更适合跨平台。实在叹服,为Bodymovin点10086个赞。

原文发布于微信公众号 - Android机动车(JsAndroidClub)

原文发表时间:2017-10-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏菩提树下的杨过

jQuery中排除指定元素,同时选择剩下的所有元素

场景:某页面用了js延时加载技术处理所有图片,以改善用户体验,但是有几个图片不想延时加载,要求把它们单独挑出来。 研究了一下jQuery的API文档,搞掂了,j...

2355
来自专栏糊一笑

微信小程序初探【类微信UI聊天简单实现】

微信小程序最近很火,火到什么程度,只要你一打开微信,就是它的身影,几乎你用的各个APP都可以在微信中找到它的复制版,另外官方自带的跳一跳更是将它推到了空前至高的...

5785
来自专栏ThoughtWorks

CSS-in-JS,向Web组件化再迈一大步 | 洞见

简介 CSS-in-JS是什么,看到这个词就能大概猜到是在JavaScript里写CSS,那为什么要在JavaScript里写CSS呢,像之前一样写在css文件...

2978
来自专栏ytkah

如何设置dedecms自定义表单必填项?

  用dedecms自定义表单可以制作一个简单的预约系统,有些相关信息需要设置为必填项,比如联系方式,没有留下真实的电话或其他信息,以后要怎么联系到你的客户。那...

3036
来自专栏ytkah

微信小程序开发教程第七章:微信小程序编辑名片页面开发

编辑名片有两条路径,分为新增名片流程与修改名片流程。 用户手填新增名片流程: ? ? ? 首先跳转到我们的新增名片页面 1 需要传递用户的当前 userId,w...

3267
来自专栏Python爬虫与算法进阶

当selenium被识别爬虫后

因为某站发版,在修一个以前的项目,用Selenium驱动Chrome来做的,然后在某页面需要点击,无论怎么做都失效,我尝试过如下方法:

1.6K3
来自专栏编程微刊

Font Awesome 一套绝佳的图标字体库和CSS框架

2003
来自专栏全栈数据化营销

不用代码,10分钟会采集微博、微信、知乎、58同城数据和信息

 学会信息和数据快速采集都是非常必要的,因为这能大大提高工作效率。在学会python和火车头之前,web scraper是我最常用的采集工具了,设置简单,非常高...

4939
来自专栏玄魂工作室

PPT导出时嵌入字体的方法

使用ppt的时候,很多时候会使用一些特殊字体,在其他计算机上无法正常显示。这个时候就需要导出PPT的时候进行字体嵌入。 1.1 常规方法 所谓常规方法,是指那些...

3464
来自专栏腾讯社交用户体验设计

What You See Is What You Get

1453

扫码关注云+社区

领取腾讯云代金券