前端动画lottie-web
lottie是一个跨平台的动画库，通过AE（After Effects）制作动画，再通过AE插件Bodymovin导出Json文件，最终各个终端解析这个Json文件，还原动画。本文中我只介绍前端用到的库lottie-web。
对比三种常规的制作动画方式
- Png序列帧
- 2.Gif图
- 前端Svg API
先对位图与矢量图有一个基本的概念。
矢量图就是使用直线和曲线来描述的图形，构成这些图形的元素是一些点、线、矩形、多边形、圆和弧线等，它们都是通过数学公式计算获得的，具有编辑后不失真的特点。
位图是由称作像素（图片元素）的单个点组成的，放大会失真。\
Png序列帧
用Png序列帧是也容易理解，用css keyframes操作每一帧需要展示的图片，缺点也很明显，每一帧都是一张图片，占比较大的体积。当然也可以将图片合并成精灵图（Sprites Map），可参考这个方案，使用 gka 一键生成帧动画。Png也是位图，放大会失真，不过可以通过增大图片尺寸，避免模糊。
Gif图
如果之前没有用过动画，用Gif图是最简单的，只需要引入一张图。但是Gif图是位图，不是矢量图，放大会虚。
前端Svg API
Svg API对于动画初学者不太友好，你要实现一个自定义的动画，需要了解Svg的所有的API，虽然它的属性与css的动画有一些相似。它是矢量图，不失真。
lottie
而lottie是一个不太占体积，还原度高，对于初学者友好的库。设计师制作好动画，并且利用Bodymovin插件导出Json文件。而前端直接引用lottie-web库即可，它默认的渲染方式是svg，原理就是用JS操作Svg API。但是前端完全不需要关心动画的过程，Json文件里有每一帧动画的信息，而库会帮我们执行每一帧。
前端安装lottie-web插件
npm install lottie-web
代码调用
import lottie from 'lottie-web';
this.animation = lottie.loadAnimation({
container: this.animationRef.current,
renderer: 'svg',
loop: false,
autoplay: false,
animationData: dataJson,
assetsPath: CDN_URL,
});
介绍一个每个属性的意思。
- container 当前需要渲染的DOM
- renderer，渲染方式，默认是Svg，还有Html和Canvas方案。
- loop 是否循环播放
- autoplay 是否自动播放
- animationData AE导出的Json，注意，这里不是路径
- assetsPath Json文件里资源的绝对路径，webpack项目需要配合这个参数。
动画的播放与暂停，如果动画需要用户触发与暂停，需要有一个切换操作（toggle）
this.animation.play();
this.animation.pause();
动画执行过程中的钩子，可以对动画有一定的控制权
- complete
- loopComplete
- enterFrame
- segmentStart
- config_ready(初始配置完成)
- data_ready（所有动画数据加载完成）
- DOMLoaded（元素已添加到DOM节点）
- destroy
// 动画播放完成触发
anm.addEventListener('complete', anmLoaded);
// 当前循环播放完成触发
anm.addEventListener('loopComplete', anmComplete);
// 播放一帧动画的时候触发
anm.addEventListener('enterFrame', enterFrame);
打包时图片资源路径
webpack工程需要注意Json文件如果有图片资源（Png或者Svg），需要将文件放在项目的根目录的static下。这样打包的时候，图片会被打包，并且后缀名不会被改变，当然需要配合assetsPath这个参数，设置图片的绝对路径。而CDN的路径可以通过process.env.CDN_URL从webpack传到前端代码中。
关于源码
关于lottie源码解析，这位老哥已经分析的挺到位了，Lottie原理与源码解析。尽管lottie也一直在迭代，但是顺着这篇解析应该也能理清源码。以及Svg动画的介绍，SVG 动画精髓
链接：https://juejin.cn/post/7001312313953222670
