Lottie-前端实现AE动效

Lottie是可应用于Android,iOS, Web和Windows的库，通过Bodymovin解析AE动画，并导出可在移动端和web端渲染动画的json文件。换言之，设计师用AE把动画效果做出来，再用Bodymovin导出相应地json文件给到前端，前端使用Lottie库就可以实现动画效果。

中文文档

前端使用lottie

npm install lottie-web

import lottie from "lottie-web";
import animationData from "./assets/data.json";

const animation = lottie.loadAnimation({
  container: document.getElementById("svgContainer"), // 要包含该动画的dom元素
  animationData: animationData, // 动画json文件路径
  loop: true, // 是否循环播放
  renderer: "svg", // 渲染方式，svg、canvas、html（轻量版仅svg渲染）
  autoplay: true, // 是否自动播放
});

loadAnimation参数

名称	描述
container	用于渲染动画的HTML元素，需确保在调用loadAnimation时该元素已存在
renderer	渲染器，可选值为’svg’（默认值）/‘canvas’/‘html’。svg支持的功能最多，但html的性能更好且支持3d图层。
loop	默认值为true。可传递需要循环的特定次数
autoplay	自动播放
path	JSON文件路径
animationData	JSON数据，与path互斥
name	传递该参数后，可在之后通过lottie引用该动画实例
rendererSettings	可传递给renderer实例的特定设置，具体可看

方法

名称	参数	描述
stop	无	停止动画
play	无	播放动画
pause	无	暂停
setSpeed	Number	设置播放速度，1 表示1倍速度，0.5 表示 0.5倍速度
setDirection	Number	正反向播放，1 表示 正向，-1 表示反向
goToAndStop	Number, [Boolean]	跳到某一帧或某一秒停止，第二个参数 iFrame 为是否基于帧模式还是时间，默认为 false
goToAndPlay	Number, [Boolean]	跳到某一帧或某一秒开始，第二个参数 iFrame 为是否基于帧模式还是时间，默认为 false
playSegments	Array, [Boolean]	播放片段，参数1为数组，两个元素为开始帧和结束帧；参数2为，是否立即播放片段，还是等之前的动画播放完成
destroy	无	销毁

Lottie动画监听

// 动画播放完成触发
animation.addEventListener("complete", () => {});

// 当前循环播放完成触发 
animation.addEventListener("loopComplete", () => {});
    
// 播放一帧动画的时候触发 
animation.addEventListener("enterFrame", () => {});

• complete
• loopComplete
• enterFrame
• segmentStart
• config_ready(初始配置完成)
• data_ready（所有动画数据加载完成）
• DOMLoaded（元素已添加到DOM节点）
• destroy