感谢支持ayqy我的订阅号，每周义务推送1篇（only unique one）原创精品博文，话题包括但不限于前端、Node、Android、数学（WebGL）、语文（课外书读后感）、英语（文档翻译）
若是以为弱水三千，一瓢太少，能够去 http://blog.ayqy.net 看个痛快 html
一.困境
作动画不免会有相似的经历：前端
Digging through frameworks for reference, guessing durations, manually creating Bézier curves, and re-making animations with nothing more than a GIF for referenceweb
照着GIF图/效果视频去模仿，猜想动画时长，手动建立贝塞尔曲线……反复调整参数，一遍遍目测效果，最后发现：express
存在不少细节差别json
效果不够细腻canvas
因为兼容性等约束，有些效果无法实现微信
好不容易实现了，还原度却达不到要求。一般要么设计师妥协，要么坐一块儿再调个半天，改到对方满意为止，结果调整细节耗费的时间比预想的多好几倍，效果仍是差强人意前端工程师
有经验的设计师会从AE（Adobe After Effects）中粘出一些有用的信息，好比贝塞尔曲线参数、动画时长……甚至可以提供一些实现思路，但不管怎样，照着视频实现动画就像临摹，效果差别几乎是不可避免的。仔细想一想这个过程，动画对设计师来讲有不小的工做量，但工程师这边彷佛有更大的工做量，每一个目标平台都有一份工做量，而且这些工做是一次性的，几乎没法复用而且难以维护（从几百行的并行、串行动画序列中找出某个参数，给加个0.1）app
那么，为何一幅画完成以后还要临摹几遍呢？可否把1 + N的工做量缩减到1 + 0.n，同时还保证效果高度还原呢？svg
二.探索
既然这幅画已经完成了，就不必从零开始手工临摹，能够利用工具从画中提取出必要的信息，再拿到目标平台用这份信息重建动画：
Now engineers can use exactly what the designer intended, exactly how it was made.
从而：
保证高还原度（直接从设计原稿取出的动画参数，必定可靠）
缩减多端的
N份工做量（让基础动画代码可高度复用，具体效果配置化）
就像以前有经验的设计师会把动画参数粘出来同样，从设计稿中导出足够多的必要信息就能确保还原度（exactly how it was made）
有了完备的动画参数就能够进一步配置化，在目标平台解析这份配置数据，完成轨迹回放（重建动画）。各平台实现业务无关的动画基础库，业务层只须要要把配置数据输入基础库，接下来由配置数据控制动画效果、时序及其组合，这样就能把N的业务层工做量缩减到0.n
三.目标定位
Lottie就是这样的一种方案，想要缩减多端实现动画的业务工做量（easily），同时保证动画效果高度还原（high-quality）：
Easily add high-quality animation to any native app.
具体地：
Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.
适用于多端（iOS, Android, React Native和Web），可以轻松愉快地实现AE动画效果
Lottie allows engineers to build richer animations without the painstaking overhead of re-writing them.
跨平台的优点在于减小多端重复工做，毕竟动画效果的定义和实现是一件复杂且耗时的事情：
How difficult and time consuming it can be to re-create animations from scratch.
实际上也有相似的其它方案，好比facebookincubator/Keyframes：
A library for converting Adobe AE shape based animations to a data format and playing it back on Android and iOS devices.
Keyframes的局限性在于仅支持部分（交互响应方面的）AE特性，而Lottie的目标是支持大多数AE特性：
Our goal is to support as many After Effects features as we possibly can, to allow for a lot more than simple icon animations.
支持的AE特性越多，对设计师的约束越少，这也是Lottie方案更受欢迎的缘由之一
四.实现思路
JSON Bodymovin ----------> Lottie Player 图片资源
设计师用AE作好动画后，经过Bodymovin（AE插件）导出JSON格式的Lottie动画定义及相关图片资源，输出给Android、iOS、ReactNative、Web前端工程师，工程师调用对应平台的Lottie Player加载动画资源，并控制动画播放/暂停等
AE插件部分负责把AE的动画定义转换成Lottie动画定义，并输出JSON文件，难点在于支持转换更多的AE特性，以避免设计师用起来束手束脚
播放器部分负责解析Lottie动画定义，加载相关资源并利用平台支持的技术实现动画效果，好比Web环境下默认经过SVG动画来实现，可选Canvas绘制和CSS动画实现
关键在于：
通用的动画定义
各平台下支持该动画定义的播放器
相似于Java的跨平台思路：平台无关的class文件 + 平台相关的JVM实现
五.lottie-web
airbnb/lottie-web是Web环境的Lottie Player，简单的几行代码就能实现复杂的动画效果，例如：
<div id="bm"> </div>
var animation = bodymovin.loadAnimation({
container: document.getElementById('bm'),
renderer: 'svg',
loop: true,
autoplay: true,
path: 'data.json'
})
P.S.具体效果见Simple Bodymovin Demo
默认经过SVG实现（renderer: 'svg'），另外还支持canvas和html，区别在于：
svg：动画元素（形状等）用SVG实现，动画效果经过SVG动画来作canvas：经过元素用Canvas绘制，动画效果经过rAF定时刷新重绘来实现html：动画元素用SVG实现，动画效果经过CSS动画来作
实际使用中发现，SVG模式兼容性最好，HTML模式下遮罩动画存在圆角放大变方的问题
P.S.关于SVG及其动画，请查看SVG基础知识
P.S.更多详细API见Usage
引入lottie-web有两种方式，要么引CDN资源，要么下载最新release：
$ ls lottie-web-5.3.0/build/player/ lottie.js lottie.min.js lottie_light.js lottie_light.min.js
其中，lottie_light.js（轻量版）仅支持SVG模式，且不支持expressions
六.总结
Rax的跨容器运行、Lottie的跨端动画……前端技术方案已经再也不局限于前端领域，而是往上下游扩展，拉着设计师、客户端兄弟、服务哥哥一块儿玩，好比：
Ant Design：前端 + 设计师
React Native：前端 + 客户端兄弟
Backends For Frontends：前端 + 服务哥哥
经过上下游的横向碰撞，沉淀产出可以提升总体效率的方案，彷佛成了一种必然趋势
参考资料
Introducing Lottie
Lottie
观点｜蚂蚁金服玉伯：咱们是如何从前端技术进化到体验科技的？
本文分享自微信公众号 - 前端向后（backward-fe）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。