前段时间听部门老大说,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的插件中心下载插件(地址:https://creative.adobe.com/addons/products/12557,一般不是最新版),也可以到Bodymovin的GitHub首页下载最新版的插件并安装。我推荐第二种方法,这个方法步骤如下:

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

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

    2.3 下载安装ZXP Installer(地址:http://aescripts.com/learn/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的前身就是Flash,它生成出来的H5动画是用js写的(使用CreateJS库),后期修改和维护会更复杂。确实如此,用过Bodymovin之后,不难看出它的灵活性的确很高,而且json形式的动画也远比js写出来的动画更适合跨平台。实在叹服,为Bodymovin点10086个赞。

大杀器Bodymovin和Lottie:把AE动画转换成HTML5/Android/iOS原生动画的更多相关文章

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

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

  2. 看逐浪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的插 ...

  3. bodymovin实现将AE动画转换成HTML5动画

    做一个简单的记录,直接贴代码吧,主要还是设计师提供的那个json <!DOCTYPE html> <html> <head> <style> body ...

  4. 【爬虫】大杀器——phantomJS+selenium

    [爬虫]大杀器——phantomJS+selenium 视频地址 江湖上有一个传说,得倚天屠龙者可称霸武林.爬虫中也有两个大杀器,他们结合在一起时,无往不利,不管你静态网站还是动态网站,通吃. pha ...

  5. 使用docker-compose 大杀器来部署服务 上

    使用docker-compose 大杀器来部署服务 上 我们都听过或者用过 docker,然而使用方式却是仅仅用手动的方式,这样去操作 docker 还是很原始. 好吧,可能在小白的眼中噼里啪啦的对着 ...

  6. 使用docker-compose 大杀器来部署服务 上(转)

    使用docker-compose 大杀器来部署服务 上 我们都听过或者用过 docker,然而使用方式却是仅仅用手动的方式,这样去操作 docker 还是很原始. 好吧,可能在小白的眼中噼里啪啦的对着 ...

  7. Postgresql-模糊匹配大杀器

    # Postgresql-模糊匹配大杀器 ## 问题背景 随着pg越来越强大,abase目前已经升级到5.0(postgresql10.4),目前abase5.0继承了全文检索插件(zhparser) ...

  8. [NewLife.XCode]反向工程(自动建表建库大杀器)

    NewLife.XCode是一个有10多年历史的开源数据中间件,支持nfx/netstandard,由新生命团队(2002~2019)开发完成并维护至今,以下简称XCode. 整个系列教程会大量结合示 ...

  9. 一文读懂机器学习大杀器XGBoost原理

    http://blog.itpub.net/31542119/viewspace-2199549/ XGBoost是boosting算法的其中一种.Boosting算法的思想是将许多弱分类器集成在一起 ...

随机推荐

  1. [VS]VS2010如何使用Visual Studio Online在线服务管理团队资源(在线TFS)

    前言 Visual Studio Online,也就是以前的Team Foundation Service,从名字可以看出这是一个团队资源管理服务.在微软的云基础架构中运行,无需安装或配置任何服务器, ...

  2. Office Online Server2016安装手册

    Office Online Server2016安装手册 1.加入域 加入域,机器名为:OOS.Contoso.com 2.安装前提条件 运行powershell检查先决条件 Add-WindowsF ...

  3. tomcat如何配置context的docBase

    docbase是web应用和本地路径,path是tomcat访问这个应用的URL路径.Tomcat的项目部署方式有以下三种:1.直接把项目复制到Tomcat安装目录的webapps目录中,这是最简单的 ...

  4. 编程(Linux、windows)常见命令

    1.history | grep  start 可以查看该linux上输入过的包含start的所有命令 2. for /r %i in (*.lastUpdated) do del %i 在windo ...

  5. mysql 数据库简介

    1. 什么是数据库 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库, 每个数据库都有一个或多个不同的API用于创建,访问,管理,搜索和复制所保存的数据. 我们也可以将数据存储在文 ...

  6. zabbix触发器表达式详解

    Zabbix触发器的语法如下: {<server>:<key>.<function>(<parameter>)}<operator>< ...

  7. 51nod 1183 - 编辑距离 - [简单DP][编辑距离问题][Levenshtein距离问题]

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1183 编辑距离,又称Levenshtein距离(也叫做Edi ...

  8. 源码 mongod.lock shutdown

    https://github.com/mongodb/mongo/blob/master/src/mongo/db/db.cpp 1. 退出原理 /proc/" << pid 判 ...

  9. 01 - nginx - 安装、配置文件、默认网站、虚拟主机

    一.运维: . 介绍服务器. 服务器逻辑: 服务器选择 操作系统 部署逻辑 业务环境部署逻辑 业务部署图 软件部署文档 日常维护文档 测试 开发上传代码到源码系统 上线 - 测服务器,内测 预发布测试 ...

  10. CH0102 64位整数乘法 数论

    正解:数论/一个神仙想法 解题报告: 先放传送门qwq 两种方法,都还挺妙的就都写了qwq 第一种是快速幂 把b用二进制表示成,ck*2k+ck-1*2k-1+...+c0*20 然后就可以表示成,a ...