lottie 导出html,Lottie Web动效基本原理
前段时间在《Lottie Web动效在React中的构建》一文中和大家聊了如何通过lottie-web将AE导出来的JSON文件自动生成动效。在该文中，聊的主要是设计软件Figma、Sketch和AE软件之间如何通过相关的插件完成设计资源的互通，并从AE导出动效相关的JSON文件。这些都是最基本的操作链路，但在使用lottie-web还有相应的API可用来控制Lottie动效。今天这篇文章我们主要来聊聊Lottie Web动效的基本原理。
回忆Lottie Web动效的实现
其实在《Lottie Web动效在React中的构建》中详细介绍了如何使用Lottie Web实现AE导出来的动效。这里简单地回顾一下。
import bodymovin from "https://cdn.skypack.dev/lottie-web";
var animation = bodymovin.loadAnimation({
// 动效加载到的DOM元素
container: document.getElementById("lottie"), // 必须项
// 包含动效的JSON文件的相对路径，也可以是绝对路径
path:
"https://www.w3cplus.com/sites/default/files/blogs/2021/2102/lottie-web.json",
// 必须项，描述动效的JSON文件，一般由AE软件中导出的JSON文件
// 动效渲染出来的格式，可以是svg、canvas和html
renderer: "svg",
// 必须项，除了svg选择之外还可以是canvas和html
// 用于指定动效是否循环播放，true是循环播放，false不是循环播放
loop: true, // 可选项
// 指定动效是不是加载后就立即播放，true是立即播放，false不是立即播放
autoplay: true, // 可选项
// 指定动效的名称
name: "mic animation" // 可选项
// animationData与path互斥，是一个包含导出的动画数据的对象
// animationData: { // ... }
});
效果如下：
Lottie Web相关API
尝试着使用console.log()输出loadAnimation()对应的API。基于上面的示例，像下面来输出：
console.log(animation);
在Chrome浏览器开发者工具中，可以看到输出的相关参数：
其中.loadAnimation()有几个重要的参数：
container ：用来放置Lottie动效的容器，即渲染容器，一般可以使用一个带有id的div元素，也要以是其他的有效HTML容器元素
renderer ：渲染器，即渲染的动画是什么格式，目前主要支持svg、canvas和html三种格式，其中svg的兼容性最佳。上面的示例就是以svg的格式渲染的
name ：动画名称，主要用于reference，名称建议尽要能的命名成具有语义化的
loop ：用来定义渲染出来的Lottie Web播放次数，是一个布尔值，如果取值为true，表示无限次的播放，反之则只播放一次
autoplay ：定义动效是不是自动播放，也是一个布尔值，如果取值为true，则表示加载之后就立即播放，反之则不是立即播放
path ：用来指定Lottie Web动效的JSON文件路径
animationData ：可以用来替代path引入的JSON数据，简单地说，可以将path引入的JSON数据放置到animationData中，但不建议这样做，更建议使用path来引入动效对应的JSON数据，因为animaionData会将数据打包进来，使得JS的Bundle过大
另外还提供了一些控制动效的API。比如：
stop ：用来停止动画
play ：用来播放动画
pause ：停止动画播放
setSpeed(speed) ： 数据类型是Number，设置动效播放速度，1表示1倍速度，0.5表示0.5倍速度
setDirection(direction) ： 数据类型是Number，设置播放方向，1表示正向播放，-1表示反向播放
goToAndStop(value, isFrame) ：跳到某一帧或某一秒停止，第二个参数iFrame为是否基于帧模式还是时间，默认为false
goToAndPlay(value, isFrame) ：跳到某一帧或某一秒开始，第二个参数iFrame为是否基于帧模式还是时间，默认为false
playSegments(segments, forceFlag) ： 播放片段，参数1为数组，两个元素为开始帧和结束帧；参数2指的是否立即播放片段，还是等之前的动画播放完成
destroy ： 动效销毁
setSubframe(useSubFrames) ：如果useSubFrames值为false，它将使用AE原始帧数；如果为true，它将在每个requestAnimationFrame上用中间值更新。默认为true
getDuration(inFrames) ： inFrames为true，则以帧为单位返回持续时间；如果为false，则以秒为单位返回持续时间
另外有几个全局的lottie方法会影响所有的动画：
lottie.play() ：使用可选的name参数，用于指定一个特定的动画播放
lottie.stop() ：使用可选的name参数，用于指定一个特定的动画停止
lottie.goToAndStop(value, isFrame, name) ：将指定名称播放的动画移动到定义的时间。如果name被省略，将移动所有的动画实例
lottie.setSpeed() ： 第一个参数speed (1表示正常事度)，另外有一个name为可选参数，用来指定动画名称
lottie.setDirection() ： 第一个参数direction(