Lottie是一个适用于Android、iOS、Web 和 Windows 的库，它通过使用Bodymovin解析并导出为json的Adobe After Effects 动画，并在移动终端(Android和IOS)和Web端上呈现！
今天我介绍的是Lottie-web，有airbnb的支持、体积小和丰富的交互函数，能非常简单地显示Adobe After Effects 动画。
安装
# with npm
npm install lottie-web
# with yarn
yarn add lottie-web
使用
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div class="btn" id="start">
<span>Start</span>
<div class="count" id="countIcon"></div>
</div>
<script src="src/index.js"></script>
</body>
</html>
我们需要创建一个id为"countIcon"的容器，用于装载动画
import "./styles.css";
import Lottie from "lottie-web";
import json from "./loader-count.json"; // 动画数据
const countIcon = document.getElementById("count-icon");
const start = document.getElementById("start");
const countAnimation = Lottie.loadAnimation({
container: countIcon, // 存放动画的容器
renderer: "svg", // 支持svg、canvas和html三种，这里我们用svg
loop: false, // 是否循环
autoplay: false, // 是否自动播放
animationData: json
});
我们从UI妹子❤️ 那里拿来一个通过使用Bodymovin解析并导出为json的Adobe After Effects 动画"loader-count.json"文件。我们使用loadAnimation方法，传入对应参数。其中要注意的是renderer渲染器，我们可以使用svg、canvas和html三种方式。
countAnimation.addEventListener("complete", (result) => {
console.log("complete!!!");
});
countAnimation.setSegment(3, countAnimation.totalFrames);
start.addEventListener("click", () => {
// console.log(countAnimation.isPaused);
countAnimation.togglePause();
});
这里我对动画的complete事件进行监听了，且设置从动画的3帧开始，到动画的最后一帧totalFrames。我们在配置参数autoplay设置为true。所以我们需要通过togglePause方法触发动画。
最后，我们点击按钮，动画流畅的运行起来了😄
完整代码: 在线运行
总结
这样我们就能通过UI妹子❤️ 提供的Adobe After Effects 动画，完成一些复杂的动画。如直播中，粉丝给主播送礼物等。