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(