新人专享好礼凡未购买过小册的用户，均可领取三张 5 折新人专享券，购买小册时自动使用专享券，最高可节省 45 元。小册新人 5 折券最高可省 15 元小册新人 5 折券最高可省 15 元小册新人 5 折券最高可省 15 元注：专享券的使用期限在领券的七天内。一键领取购买小册时自动使用专享券前往小册首页本活动仅适用于小册新用户知道了用视频软件AE + bodymovin制作网页动画我们知道，做动画有多种形式，可以用CSS的animation，也可以用Canvas，或者是用JS控制CSS的属性形成动画。我们经常使用CSS做一些比较简单的动画，像过度、加载的动画，对于一些比较复杂的，可能会做成gif，或者是用Canvas，使用Canvas的控制粒度可以很细，同时工作量相对也比较大。做动画还有其它的方式，那就是使用After Effect(AE)/ Flash/Premiere(Pr)/会声会影等视频软件，这种可视化的制作方式相对于直接写代码来说，会更容易简单自然。做动画本身应该使用工具进行制作，但是这种视频软件做出来的动画最后都是生成视频文件，并且通常体积还很大，没有办法直接移植到网页上去。然而好消息是，现在我们可以使用AE做动画，然后使用bodymovin插件导出成html文件进行播放。AE是Adobe推出的一个很出名的视频后期处理软件，有些电影就是用AE做的，如变形金刚，还有人把AE当成加强版PS使用。也就是说假如我们可以AE做出一些电影级别的效果，然后用html播放，那是一件多么酷炫的事情。bodymovin是一个AE的一个开源的第三方扩展，。上面可以。然后再安装一个来安装这个文件，然后重启AE就可以了，当然前提是你要安装一个AE。它支持AE CC版本：After EffectsCC 2017, CC 2015.3, CC 2015, CC 2014安装完之后，点击AE的菜单Window -& Extensions -& Bodymovin就会弹出一个窗口：我相信很多人都没有玩过AE，所以这里我简单地介绍一下。首先新建一个工程(project)，然后新建一个合成(composition)，选择1080p/29fps，时长为10s，它就会创建一个10s的合成。如下时间轴面板的显示：这个时间轴将会是频繁操作的地方。点击文字工具，在上方的预览窗口选中一个位置点击创建文字，然后把它拖到窗口外面，因为我们准备做一个文字从外面进来的动画，所以刚开始它是在外面的。把上图右边的蓝色竖线表示的时间线拖到0s的位置，然后在左边的文字图层的Position属性打一个关键帧，如下图所示：然后把时间线挪到3s的位置，改变文字的Position，把它挪到窗口的中间，这个时候AE会自动在时间线的位置打一个关键帧，如下图所示：然后按一下空格键进行预览，预览窗口就会播放起了我们刚刚设定的动画：你会发现，这个过程不是和CSS的keyframe动画一样的么？没错！动画的原理都是一样，通过设定关键帧制作动画。现在来比较一下用AE和用CSS/Canvas做这个动画的区别。现在用CSS做这个动画，如下代码所示：&
animation: move 3s
@keyframes move{
transform: translateX(-320px);
transform: translateX(100px);
class="container"&
class="text"&Hello, frontend&
&我们给animation添加一个动画，这个动画有两个关键帧，分别在0%和100%的位置，需要变化的是transform的属性。这段代码在浏览器运行，就会有刚刚用AE做的动画的效果了。如果用Canvas呢，应该怎么实现呢？如下代码所示： id="text-move" width="600" height="400"&&
!function(){
window.requestAnimationFrame(draw);
var canvas = document.querySelector("#text-move"),
ctx = canvas.getContext("2d");
function draw(){
var textPosition = getPosition();
drawText();
window.requestAnimationFrame(draw);
}();这个是canvas动画的基本框架，先注册requestAnimationFrame的draw函数，使得浏览器在重新绘制屏幕时会先调一下这个函数，理想情况下1s会绘制60幅图片，也就是说1s为60帧/60fps。上面代码最关键的地方是在于计算文字位置position，同样地，也是要先设定初始位置和终点位置还有动画时间，从而知道移动的速度v，即每1s多少距离，记录一个动画开始时间，然后在每次draw的时候用Date.now()获取当前时间减掉开始时间，就得到时间t，然后用v * t就可以得到位移。这就是用Cavans做动画的基本原理，我们看到，用Canvas需要自己实现一个关键帧系统。从抽象级别来看的话，AE & CSS && Canvas，使用AE我只需要拖一拖，然后打上几个关键帧，而使用CSS，我需要把我的操作写成代码，而使用Canvas我需要从0开始一点一点去控制，当然你可以使用一些动画和游戏的引擎提高效率。所以如果有一个可视化界面让你去完成一些复杂的操作，和让你一行一行去写代码的方式选择的话，我想大部分人应该会选择前者。当然这两者的区别不仅仅是操作上的简便性，使用AE借用插件还可以快速地制作出一些复杂的效果。刚刚已经用AE做了一个最简单的动画，现在用bodywin把它导出来。打开bodymovin，选中合层，选择输出路径，如下图所示：然后点击Render，完成它会输出一个json文件，打开这个导出的文件：{"v":"4.10.1","fr":29.1,"ip":0,"op":95.3,"w":1920,"h":1080,"nm":"Comp 1","ddd":0,"assets":[],"fonts":{"list":[{"origin":0,"fPath":"","fClass":"","fFamily":"Myriad Pro","fWeight":"","fStyle":"Regular","fName":"MyriadPro-Regular","ascent":70.5}]},"layers":[{"ddd":0,"ind":1,"ty":5,"nm":"hello, frontend","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":0,"s":[-],"e":[458,692,0],"to":[245.,0,0],"ti":[-245.,0,0]},{"t":90.1}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"t":{"d":{"k":[{"s":{"s":164,"f":"MyriadPro-Regular","t":"hello, frontend","j":0,"tr":0,"lh":196.8,"ls":0,"fc":[0,0.64,1]},"t":0}]},"p":{},"m":{"g":1,"a":{"a":0,"k":[0,0],"ix":2}},"a":[]},"ip":0,"op":300.,"st":0,"bm":0}]}这个文件记录了所有动画的过程，如上加粗字体是我们刚刚打的两个关键帧的位置。然后安装一下bodymovin的引擎，可在github上面下载bodymovin.js或者是npm install一下：npm install bodymovin然后就可以使用bodymovin了，如下html：&!DOCType html&
charset="utf-8"&
id="animation-container" style="width:100%"&&
src="node_modules/bodymovin/build/player/bodymovin.js"&&
src="index.js"&&
&index.js如下代码所示：var animation = bodymovin.loadAnimation({
container: document.getElementById('animation-container'),
renderer: 'canvas',
loop: true,
autoplay: true,
path: 'data.json'
})调用它的loadAnimation的API，传几个参数，它支持canvas/svg/html三种形式，也就是说它可以用canvas做动画，也可以用svg和html，其中canvas的性能最高，但是canvas有很多效果不支持。data.json的位置通过path告诉它。所有的动画就通过改变path指向的data.json文件区分，而其它的参数不用变。也就是说所有的动画内容和效果都是通过data.json控制的。现在在浏览器上面运行一下，你会发现报了一个错：后来发现这个错误是因为文字的原因，如果是用canvas的方式的时候要把文字导成svg的形式，而不是一个纯文本然后通过设置font-family，这个可以在bodymovin里面进行设置，如下图所示：还可以直接导出一个完整的demo，直接打开html就可以运行，这个比较方便。效果如下：并且我们发现，它的大小和位移都是相对于容器的，当你把窗口拉小，它也会跟着变小。当使用svg的时候，它是用JS控制svg path标签的transform：当使用html时，它是控制CSS的transform：我们一个hello, world的工程已经可以跑起来，bodymovin能支持多复杂的动画呢？用AE做动画的时候经常会用到AE的摄像机图层，所谓摄像机就是一个视角，默认情况下这台摄像机是从正前方中间拍过去的，我们可以改变这台摄像机的位置，如把摄像机往前推那么内容就会放大，把摄像机往左右移动，那么看到的内容就会发生倾斜，它有很多仿摄像机的参数可以控制：摄像机属性都可以通过打关键帧做动画，现在我们加上摄像机做3d的动画。做完后，如果还用canvas的话，它会提示你不能使用canvas，因为它目测不支持WebGL转换，如下图所示：提示说使用了一个3d camera，尝试使用html renderer，这里要改成html。最后的效果如下：通过检查，可以看到摄像机也是用transform的matrix控制的。完整的dmo可见。然后我们再继续做复杂的动画在所有特效里面，笔者最喜欢的是粒子效果，这种效果也是电影里面经常用到的特效，如冰雪女王的冰雪魔法：还有文字的粒子效果：但是这种效果我试了一下没有办法导出来，这种效果本身就比较复杂，渲染起来比较耗时，在html实时播放也不太现实。还有有时候会报一些奇怪的错误，最常报的一个错误是这个：bodymovin.js:9249 Uncaught TypeError: this.addTo3dContainer is not a function可能是使用了一些特定效果，触发了它的bug。但是不要沮丧，我们还是可以导出一些复杂的效果的，做动画这种关键还是在于idea。例如可以做一个装饰的小动画，如下所示：一个完整的demo。还可以做一个相册视频，效果如下：完整的demo。如果是做成一个1080p的视频，1.5分钟的mp4格式就算压得比较厉害也要100多MB，但是现在我只要加载一个90kb的json文件和一个240kB的库文件以及10Mb左右的图片就可以了。并且里面的文字和图形还是矢量的。现在来看一下CPU消耗，可以看到这个相册视频svg动画还是很耗CPU的，但是你开一个视频播放器也同样挺消耗CPU资源的。不管怎么样，bodymovin提供了另外一种做网页动画的全新方式，摆脱那种纯代码控制的黑暗，甚至你都不用学Canvas和WebGL，也可以做出很酷炫的动画。但是无疑这种方式存在一种弊端，那就是没办法添加参数控制，例如我做一个愤怒的小鸟，我得通过拉弓的方向和力度以及小鸟的重量去计算它的轨迹。但是用AE做的只能是纯动画。所以平时可以两者结合。bodymovin还支持转成IOS/Android代码，我感觉这个东西发展还在初级阶段，网上也没有很多关于这个的介绍。但是随着这个的认可度提升，发展越来越好，说不定以后能够支持更多的特效，甚至可以提供参数支持。加入掘金和开发者一起成长。发送简历到 hr@xitu.io，期待你的加入！分享Lottie开源动画库介绍与使用示例 - 简书
Lottie开源动画库介绍与使用示例
碉堡的Lottie
Airbnb最近开源了一个名叫Lottie的动画库,它能够同时支持iOS,Android与ReactNative的开发.此消息一出,还在苦于探索自定义控件各种炫酷特效的我,兴奋地就像发现的新大陆一般.可以说,Lottie的出现,将极大地解放Android/iOS工程师于无尽的编写原生自定义动画的工作中.
当我们的项目中用GIF实现一些复杂的视觉效果的时候,会遇到许多的问题.比如,GIF的文件过于庞大,并且对于不同分辨率设备的适配存在不便,并且Gif格式的色深问题是一个死穴.
比如下面这几个动画效果:
http://cdn.trojx.me/blog_pic/Example1.gif
http://cdn.trojx.me/blog_pic/Example2.gif
设计这些动画效果显然不是写代码的程序员应该负责的事情.那有没有什么办法,能让美工在AE软件上设计的动画直接用于移动端呢?
有的,那就是使用Lottie.
http://cdn.trojx.me/blog_pic/lottie_sum.png
如上图所示,通过安装在AE上的一款名叫bodymovin的插件,能够将AE中的动画工程文件转换成通用的json格式描述文件,bodymovin插件本身是用于在网页上呈现各种AE效果的一个开源库,lottie做的事情就是实现了一个能够在不同移动端平台上呈现AE动画的方式.从而达到动画文件的一次绘制、一次转换、随处可用的效果.
当然,就如Java一次编译,随处运行一样,lottie本身这个动画播放库并不是跨平台的.
说了那么多,下面来详细说说怎样使用这个碉堡的库.首先声明,以下涉及到的软件可能包含破解版,如果你资金充裕,请支持正版.
以下使用方式与软件在日都有效.
安装Adobe After Effects CC 2017
Adobe是个好公司,做了很多牛逼的软件,但是无一例外都被国人破解了.本例使用的是最新版的AE CC 2017.
http://cdn.trojx.me/blog_pic/AE_CC_2017.png
可用下载地址
感谢作者提供软件.注意此版本只适用于WIN 64位系统,笔者在 Win7 64 位
环境下能够正常安装并使用.安装过程中按照内置说明安装即可.
安装bodymovin插件
想了解此插件可以参看该插件的.
下载bodymovin.zxp插件包
此文件位于工程中的目录下,如果外网速度慢可以可以下载该插件的最新版本.
项目说明中给出了为AE安装插件的三种方式:
通过第三方软件ZXP Installer安装;
这三种笔者都试过,最后得出只有第二种(也是看起来最繁琐的)有效.这里详细说明一下第二种方法:
用WinRAR或类似软件打开bodymovin.zxp文件,并将解压后的文件夹直接复制到C:\Program Files (x86)\Common Files\Adobe\CEP\extensions
或者是C:&username&\AppData\Roaming\Adobe\CEP\extensions下,对于MAC机器路径是/Library/Application\ Support/Adobe/CEP/extensions/bodymovin
http://cdn.trojx.me/blog_pic/bodymovin_zxp_extracted.png
http://cdn.trojx.me/blog_pic/bodymovin_zxp_extracted_copy.png
修改注册表.对于Windows,打开注册表修改器,找到HKEY_CURRENT_USER/Software/Adobe/CSXS.6,并在此路径下添加一个名为PlayerDebugMode的KEY,
并赋值为1;对于MAC,打开文件~/Library/Preferences/com.adobe.CSXS.6.plist并在末尾添加一行,键为PlayerDebugMode,值为1.
设置AE 无论以何种方式安装bodymovin插件,都需要在AE的编辑-&首选项-&常规中勾选允许脚本写入文件和访问网络(默认不开启)
http://cdn.trojx.me/blog_pic/ae_setting.png
开始制作动画
由于笔者目前不会使用AE(废话,软件都是刚装的),这里我们打开一个现有的工程文件.
可以找到一些Lottie中演示过的动画的AE源文件,下载到本地后在AE中打开即可.这里我们选用EmptyState.aep这个实例工程,稍作修改:
http://cdn.trojx.me/blog_pic/empty_page_editting.png
导出json数据
如果上文的bodymovin插件安装成功的话,在AE中的窗口-&拓展中是能够找到它的.
http://cdn.trojx.me/blog_pic/ae_bodymovin_menu.png
在插件窗口中选择json数据文件导出的路径,点击Render按钮即可渲染工程并导出.
http://cdn.trojx.me/blog_pic/ae_bodymovin_render.png
原始工程动画效果:
http://cdn.trojx.me/blog_pic/empty_state_origin.gif
原始工程导出的json文件:
修改后工程动画效果:
http://cdn.trojx.me/blog_pic/empty_state_edit.gif
修改后工程导出的json文件:
使用Lottie库播放动画
终于说到主角了,然而关于它的使用方式却是相对简单的.Lottie的引入与使用就如其他库一样,这里以Android平台的使用为例.
在项目的build.gradle文件中加入:
dependencies {
compile 'com.airbnb.android:lottie:1.0.1'
Lottie支持Jellybean (API 16)及以上的系统,最简单的使用方式是直接在布局文件中添加:
&com.airbnb.lottie.LottieAnimationView
android:id="@+id/animation_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:lottie_fileName="hello-world.json"
app:lottie_loop="true"
app:lottie_autoPlay="true" /&
或者,你也可以通过代码的方式添加.比如从位于app/src/main/assets路径下的json文件中导入动画数据:
LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
animationView.setAnimation("hello-world.json");
animationView.loop(true);
这方法将在后台线程异步加载数据文件,并在加载完成后开始渲染显示动画.
如果你想复用加载的动画,例如下一个ListView中每一项都需要显示这个动画,那么你可以这么做:
LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
LottieComposition composition = LottieComposition.fromJson(getResources(), jsonObject, (composition) -& {
animationView.setComposition(composition);
animationView.playAnimation();
你还可以通过API控制动画,并且设置一些监听:
animationView.addAnimatorUpdateListener((animation) -& {
// Do something.
animationView.playAnimation();
if (animationView.isAnimating()) {
// Do something.
animationView.setProgress(0.5f);
// 自定义速度与时长
ValueAnimator animator = ValueAnimator.ofFloat(0f, 1f)
.setDuration(500);
animator.addUpdateListener(animation -& {
animationView.setProgress(animation.getAnimatedValue());
animator.start();
animationView.cancelAnimation();
在使用遮罩的情况下,LottieAnimationView 使用 LottieDrawable来渲染动画.如果需要的话,你可以直接使用drawable形式:
LottieDrawable drawable = new LottieDrawable();
LottieComposition.fromAssetFileName(getContext(), "hello-world.json", (composition) -& {
drawable.setComposition(composition);
如果你需要频发使用某一个动画,可以使用LottieAnimationView内置的一个缓存策略:
LottieAnimationView.setAnimation(String, CacheStrategy)
其中CacheStrategy的值可以是Strong,Weak或者None,它们用来决定LottieAnimationView对已经加载并转换好的动画持有怎样形式的引用(强引用/弱引用).
lottie在iOS中的使用介绍可以参看
分享一个能够在浏览器中
Lottie官方给的使用它能够查看示例动画,并能够载入并播放来自本地存储或网络的json动画数据.
好了,先写到这里,我去研究AE去了~后续应该会补上一个使用Lottie的Android Demo.
http://www.trojx.me
前沿 该文章主要介绍了 Lottie是什么，如何为 Lottie 制作动画，以及 Lottie的应用场景。适合设计师和开发者阅读以及结对实践。 Lottie 介绍 Lottie 是 Airbnb 开源的一个动画渲染库，同时支持 Android、iOS、React Nativ...
碉堡的Lottie Airbnb最近开源了一个名叫Lottie的动画库,它能够同时支持iOS,Android与ReactNative的开发.此消息一出,还在苦于探索自定义控件各种炫酷特效的我,兴奋地就像发现的新大陆一般.可以说,Lottie的出现,将极大地解放Android...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金相信有很多朋友...
Lottie 是一个面向 iOS、Android 和 React Native 的开源动画库，能给实时绘制 After Effects 动画并且让原生 App 像使用静态素材一样使用这些动画。 简单来说，就是可以直接利用 AE 导出的 JSON 动画文件，将其解析为原生代码...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金 相信有很多...
我的老家在一个四川闭塞贫穷的小县城，县城最好的一所中学也只是“省重点”，高中部的学生是通过中考从各个乡镇选拔来的“尖子生”，高一开学典礼上，校长给大家讲话：“你们现在应该感到无比自豪，因为你们现在所在的学校就是咱们全县人民的北大清华。”但就是这所全县人民眼中的北大清华，都是...
生活是一场繁华的戏。 早晨，阳光斜射在窗角。 低头的向日葵半醒着，我伸个懒腰，糊里糊涂的从床上爬起来。 草草的化了个淡妆，出门买了几只康乃馨，就踏进了这里。 这个地方我不想来，一辈子都不想。 今天是他的忌日，他去世大约两年了…… 沉重的陵园里，他的墓碑上，镶嵌着他曾经的照片...
两岁的儿子正在逐渐进入淘气高峰期，翻箱倒柜之类乐此不疲，踩水和泥之属更是不在话下。近日，不知得哪位3岁以上儿童大哥的真传，迷恋上了一门新手艺--踩蚂蚁。 昨天晚饭后，照例陪儿子出门探索“新世界”。一只蚂蚁的出现刹住了儿子疾驰的脚步，这是一只约么6.7毫米长的褐色蚂蚁，两只前...
今晚决定下周末去北京，让东京带爸妈一起过去
现在读书的时间很快，最感兴趣的是小说类，有情节的，看了‘好姑娘万丈光芒’的文章，看了‘异类’，不一样的成功启示录，看电子书没有纸质书感觉好，不能翻来翻去，但是很便携。 成功都不是一蹴而就的，机遇和传承。10000小时的标准，成功没有捷径，即使是被标榜为天才、怪胎的高智商人群...大杀器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的开源项目“”实现；iOS原生，通过Airbnb的开源项目“”实现；React Native，通过Airbnb的开源项目“”实现。下面就分步骤总结下Bodymovin的安装和使用，以及导出的动画如何在Web页面上播放：如果电脑上没有AE的话，需要安装AE CC2014或更高版本。以AE CC2017为例：（AE CC2017 欢迎界面）AE安装完成后，安装Bodymovin插件。安装插件有几种方法，比如直接到Adobe的插件中心下载插件（链接：，一般不是最新版），也可以到Bodymovin的GitHub首页下载最新版的插件并安装。我推荐第二种方法，这个方法步骤如下：2.1 到Bodymovin的GitHub首页（链接：）克隆项目到本地，或者下载.zip包。2.2 在项目目录的“/build/extension”目录下找到“bodymovin.zxp”文件，这个就是插件包了。2.3 下载安装ZXP Installer（链接：），打开软件，点击“File”&“Open”菜单项载入上述.zxp插件包，ZXP Installer会自动开始安装。安装完成后的软件主页面如下图所示，表示插件已成功安装。打开AE，点击“编辑”&“首选项”&“常规”菜单项，选中“允许脚本写入文件和访问网络”，点击确定。点击“窗口”&“扩展”&“Bodymovin”菜单项，就可以打开Bodymovin的界面使用插件了。我们在空的AE项目里，新建一个名为“合成1”的合成，并制作一段简单的动画：打开Bodymovin插件窗口，可以发现“合成1”出现在了下面的列表中。选中“合成1”，设置好json文件输出位置，点击“Render”。Bodymovin还为生成出的json文件提供了预览功能，点击插件界面上的“Preview”按钮，点击“Browse”载入刚刚生成的json文件，就会看到，动画被原汁原味地导出了：接下来我们新建一个网页来播放这段动画。把Bodymovin的GitHub项目目录下的“\build\player\bodymovin.js”和刚刚生成的json文件复制到网页根目录，新建一个html文件，代码如下：&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Bodymovin Demo&/title&
&script src="bodymovin.js"&&/script&
&div id="animation"&&/div&
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)
打开这个页面，就会发现动画成功跑起来了，是不是很黑科技？如果想让json版动画跑在Android/iOS设备上，在GitHub上搜索“lottie”，然后选择自己感兴趣的平台吧。记得在FDCon2017大会上，渚薰演讲完毕后，有个人提出了我一直想问的问题：Adobe已经推出HTML5动画设计软件An（Adobe Animate CC），为什么不用An而要用这种方式？渚薰答道，An的前身就是Flash，它生成出来的H5动画是用js写的（使用CreateJS库），后期修改和维护会更复杂。确实如此，用过Bodymovin之后，不难看出它的灵活性的确很高，而且json形式的动画也远比js写出来的动画更适合跨平台。实在叹服，为Bodymovin点10086个赞。40042 条评论分享收藏文章被以下专栏收录前端也许是设计与开发最好的结合点之一，该专栏同时包含这两方面的文章。优秀设计联盟-SDC-优设网-设计师交流学习平台-听讲座，聊设计，找素材，尽在优设网
下一篇 继续涨姿势
阅读本文需 7 分钟
编者按：Airbnb 开发的这个动效神器，可以帮你轻松让动效落地，今天来个教程让大家学一下。
在没有 Lottie 之前，一般都是通过给 PNG 序列图，或者是开发自己写，当然这些动画一般都是比较简单的，如果遇到复杂的动画，开发一般都会拒绝掉，理由一般都是这个没法实现，这个动画需要很多时间，版本迭代周期紧，这个版本没法实现了，要不以后有空给你看看吧。不过自从有了 Lottie，再也不用担心了，一般的动画开发都能高效快速的给你高保真还原。
什么叫 Lottie ？
由 Airbnb 开发的 Lottie 是一个将 After Effects 动画提供给任意一个 iOS，macOS，Android 还有 React Native 原生 APP 的文件库。这些动画通过一个叫 Bodymovin 的开源 After Effects 插件，以 JSON 文件的形式进行输出。Lottie 通过 JSON 格式下载动画数据并实时提供给开发者。
相关学习链接
Lottie官方：
bodymovin：
lottie-ios：
lottie-android：
动效为何如此重要？
1. 功能性（Functional）
优化用户对界面的感知，使其感到更轻快更全面。
引起用户的注意。
提供（用户操作后的）视觉（功能）反馈，并为下一步的跳转做准备。
2. 物理性（Material）
在一致的动画原则和物理的（符合物理定律的）UI模型基础上构建动画。
定义屏幕和UI元件之间的空间相对关系，他们的相对高度，权重以及速度。
3. 趣味性（Delightful）
在上面两个部分都满足的情况下，加入一些有趣的动画。
使它感觉独特，能在诸多动画中能让人眼前一亮。
娱乐用户，并让他们一想到动画就能想到该产品或者反之。
第一步：安装 bodymovin 插件
如果你还没安装 AE，那你先暂停一会，去安装一下AE 再继续。这里重点讲解一下如何安装 bodymovin 插件。
相关下载链接
ZXP Installer：
bodymovin：
打开安装器 ZXP Installer，拖动 bodymovin.zxp 到安装器上。
安装过程中会先看到 updating，耐心等待一分钟左右，看到 The extension was successfully installed! 则表示插件安装成功了，然后你可以在 ZXP installer 里面看到这个插件已经存在了，具体可以看下图。
Windows 用户：
第二步：如何导出 json 动画文件
打开AE，首选项—常规，将允许脚本写入文件和访问网络选项勾选上。
窗口—扩展—Bodymovin，选择好合成和保存路径后，点击 Render 导出 data.jason 文件，再把该文件交给 iOS 开发 （其他同理），具体如下图。
这里设置选择 Demo ，可以导出html文件，在浏览器查看动画效果。选择 Glyphs 将字体转换成图形形状。
第三步：交付加载动画
如果你上面的步骤全部都走通了，下面我们开始做一个简单的动画，来加深一下理解，如果讲的不太好，或者有不对的地方，希望留言指出~
实现的效果
AE新建画板
通过 iOS 开发那里得知，AE 画板的尺寸等于 iOS 开发的一倍图尺寸，所以我直接新建了 50x50px 的画板大小，这样的话，最终实现的效果跟自己做的尺寸大小会一模一样。不过你们可以先做动画，然后通过新建预合成缩放到新建的 50x50px 的画板即可。（如果你听不懂，说明你需要学习一下 AE 的基础知识了，参考：）
动画的效果是通过走线动画完成，最终给了20帧，我设置的动画是 25 帧/秒，换算成时间就是800ms。
记得一定要将合成修建至工作区域，否则开发那边的动画就会出现消失一段时间的情况，必须让你的动画能完整的来回，不要有多余的空白区域。
这里要先声明一点，我这里的动画是不需要交互的动画，其实 lottie 调用的 json 动画文件是可交互的。lottie 本身会提供一个 progress 的参数，相当于动画的进度条，这个数值是可以用代码来控制的，能和手势等各种操作绑定，做到直接控制动画的播放进度。比如下拉刷新动画就可以通过 lottie 实现。
调节 lottie 动画的速度，也就相当于调节动画完成的时间，所以你可以坐在开发旁边慢慢的调节动画直到你满意为止。
调节动画的大小：宽度和高度，同理你也可以让开发给你调节动画的大小，还是让你满意为止。
在线测试结果
可以直接上传json文件，可以提前知道动画是否有问题，然后再交付开发
不是所有的动效 lottie 都能实现，希望可以认识到这一点，如果不清楚是否可以实现，可以先熟读 lottie-ios 的官方文档。
有些可交互的动画可以通过分段来实现，可以给开发 2 个及以上的 json 文件，然后拼接在一起即可。
Lottie V 2.0.3 还不支持的动画有: 合并形状、表达式、3D图层、单独修剪多重形状
源文件动画下载链接
欢迎关注作者的微信公众号：「花厂设计招待所」
「动效设计三步走」
先学会分析：
动效设计方法：
提升用户体验：
【优设网 原创文章 投稿邮箱：】
================明星栏目推荐================
优优教程网：是优设旗下优质中文教程网站，分享了大量PS、AE、AI、C4D等中文教程，为零基础设计爱好者也准备了贴心的。开启免费自学新篇章，按照我们的专栏一步步学习，一定可以迅速上手并制作出酷炫的视觉效果。
设计导航：国内人气最高的设计网址导航，设计师必备：
实战经验！如何做好网页后台的表单和表格设计？
矢量人生（作者）：一个完整的后台，由菜单/导航、数据/图形展示、表格、表单、控件/组件以及弹窗等构成，下面跟大家分享后台中的表格和表单...
随着技术和硬件设备性能的提升，动效已经不再是视觉设计中的奢侈品。动效不仅仅是华丽的动态效果，它首先帮助设计师和用户解决了许多界面功能上的问题，让这用户更容易...令人愉悦的动效几乎已经成为如今网页设计的标准配置了，融入动效的交互细节让现代网页同以往的设计在根本上区别开来。动效不仅可以表现状态，引导用户的关注点，帮助用...我们日常所看到的绝大多数的网站，在基础配色方案上，都是以浅色为主的，背景大多是白色或者浅色。有意思的是，近两年，以黑色为主色调，或者大量运用深色背景的网站，...编者按：不为用户体验而做的动效都是炫技。经常有同学问小编有木有能运用到实战中的动效设计，来看今天这组网站就对了！第一个网站就是那个输密码时会捂眼睛的猫头鹰官...编者按：前两天Google 刚发布了新版Material Design 官方动效指南，今天@平行煎餅 就给大家带来了中文版！全文包括三个部分：为什么说动效很...编者按：读完@顾小犊 这篇文章，你可以知道动效的作用、设计原则、动效工具、制作方法、标注技巧等等，特别全面，强烈推荐收藏学习。 动效在用户体验设计中正变得越...编者按：今天这篇重磅推荐一下，全文近6000字，从网页动画的简史、种类到实现都有特别细致的讲述，附大量原生教程，帮你彻彻底底掌握这个点。特别感谢译者@十萬個...如今丰富细腻的 App 动效遍布移动端优秀应用界面中，为用户提供了良好的动态沉浸式体验，动效设计在产品研发过程中也越来越被认可和重视。 通过本文，你将轻松了...Heyu：在上一篇文章《动效设计基础（一）：缓动与运动曲线》中，我们讨论了动效的几种常见形式以及缓动的重要性。那么，我们为什么要用动效呢？除了酷炫好玩以外，...
我们的团队
大家在关注
一扫"掌"握！
把好文章收藏到微信
打开微信，扫码分享学设计 优设网 在这里