什么是lottie
Lottie是一个库，可以解析使用AE制作的动画（需要用bodymovin导出为json格式），支持web、ios、android和react native。在web侧，lottie-web库可以解析导出的动画json文件，并将其以svg或者canvas的方式将动画绘制到我们页面中。
优点
- 动画由设计使用专业的动画制作工具Adobe After Effects来实现，使动画实现更加方便，动画效果也更好；
- 前端可以方便的调用动画，并对动画进行控制，减少前端动画工作量；
- 设计制作动画，前端展现动画，专业人做专业事，分工合理；
- 卖家秀即买家秀，还原程度百分之百；
- 使用lottie方案，json文件大小会比gif文件小很多，性能也会更好。
不足
- lottie-web文件本身仍然比较大，lottie.js大小为513k，轻量版压缩后也有144k，经过gzip后，大小为39k。所以，需要注意lottie-web的加载。目前H5项目有离线包，PC项目也会上PWA，会对其进行缓存，保证加载速度。
- lottie动画其实可以理解为svg动画/canvas动画，不能给已存在的html添加动画效果；
- 动画json文件的导出，目前是将AE里面的参数一一导出成json内容，如果设计师建了很多的图层，可能仍然有json文件比较大（20kb）的问题。需要设计师遵循一定的规范。
- 有很少量的AE动画效果，lottie无法实现，有些是因为性能问题，有些是没有做。比如：描边动画等。
lottie-web使用方式
npm包
npm install lottie-web --save
import lottie from 'lottie-web'
import lottieJson from "@/static/lottie/lottieJson.json";
initLottie() {
const box = document.getElementById("lottie_box");
lottie.loadAnimation({
container: box,
renderer: "canvas",
loop: true,
autoplay: true,
animationData: lottieJson,
});
},
功能简介
lottie-web提供了很多操控动画的方法。下面是几种常用的方法，基本可以满足对动画进行控制的需求。
play: 播放动画
stop: 停止播放动画
pause: 暂停动画
goToAndStop: 跳到某一帧动画，并停止
setDirection: 设置播放方向
setSpeed: 设置播放速度
此外，lottie-web也提供了一系列的事件，例如：
onComplete: 动画播放完成触发
onLoopComplete: 当前循环播放完成触发
onEnterFrame: 播放一帧动画的时候触发
onSegmentStart: 开始播放一个动画片段的时候触发
原理简介
在Adobe After Effects中，动画是由一个一个的图层组成的，在相应的图层上面添加一些变换(例如：缩放、移动等)，这变成为了动画。下面是一个AE图层截图：
例如，“右眼 眨”便是一个图层，里面包含内容(图层形状等)和变换。将该动画通过bodymovin插件导出的json，会如以下格式：
{
"fr": 30,
"ip": 0,
"op": 20,
"w": 150,
"h": 130,
"assets": [],
"layers": [{
"ty": 0,
"refId": "comp_0",
"ks": {},
layer: [],
shapes: [],
"w": 1334,
"h": 750,
"bm": 0
}],
"masker": []
}
动画的json文件中，主要内容是layers，对应AE中的一个个图层。每个图层里面包含内容（shapes）、变换（ks）、子图层（layers），与AE中图层是一一对应的。
在lottie-web中，会根据上面的json，进行相应的渲染处理。例如:
shapes中会有各种形状，lottie-web会根据其参数，渲染出相应的svg标签；
ks中会有变换参数，lottie-web会将其转换成相应的trasform属性，添加到对应svg标签上；
ks的变换参数可能随时间变换，lottie-web会根据参数，调用window.requestAnimationFrame方法，对transform属性进行动态更新，实现动画。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
