🤔 Lottie 动画 [ 开发笔记 ]

Lottie是 airbnb 开源的可应用于Web, Android, iOS,Windows动画库。它提供了一套从 AE 到各个终端的工具流，设计师通过 AE 将做好的动画导出成json，再通过 Lottie 各端的库就可以实现动画效果，动画还原度 100%。

（有这东西还手写啥动画~）

1. 使用方法

lottie-web 生成的svg/canvas/html动画，内存占用与 Gif 动画差不多。👆上面这只猫就是一个svg（12kb）

import lottie from 'lottie-web';
import animationJsonData from 'xxx-demo.json';  // json 文件

const lot = lottie.loadAnimation({
   container: document.getElementById('lottie'), 
   renderer: 'svg',
   loop: true,
   autoplay: false,
   animationData: animationJsonData,
 });

// 开始播放动画
lot.play();

控制动画播放的方法：

名称	描述
animation.play	播放该动画，从目前停止的帧开始播放
stop	停止播放该动画，回到第 0 帧pause暂停该动画，在当前帧停止并保持
goToAndStop	跳到某个时刻/帧并停止
goToAndPlay	跳到某个时刻/帧并进行播放
goToAndStop(30, true)	跳转到第 30 帧并停止
playSegments	播放片段，如直接播放 0-5 帧和 10-18 帧
setSpeed	设置播放速度
setDirection	设置播放方向,正向逆向
destroy	删除该动画，移除相应的元素标签等。在 unmount 的时候，需要调用该方法

监听事件：

名称	描述
data_ready	加载完 json 动画
complete	播放完成（循环播放下不会触发）
loopComplete	当前循环下播放（循环播放/非循环播放）结束时触发
enterFrame	每进入一帧就会触发，播放时每一帧都会触发一次，stop 方法也会触发
segmentStart	每进入一帧就会触发，播放时每一帧都会触发一次，stop 方法也会触发
DOM Loaded	动画相关的 dom 已经被添加到 html 后触发
destroy	将在动画删除时触发

1. 使用方法

参考资料