lottie-web（2）

「这是我参与11月更文挑战的第9天，活动详情查看：2021最后一次更文挑战」

基础使用

import lottie from 'lottie-web';

this.animation = lottie.loadAnimation({
    container: this.animationRef.current,
    renderer: 'svg',
    loop: false,
    autoplay: false,
    animationData: dataJson,
    assetsPath: CDN_URL,
});

loadAnimation参数的配置项

下面是loadAnimation参数的配置项

animationData: an Object with the exported animation data：一个带有导出动画数据的对象。.
path: the relative path to the animation object. (animationData and path are mutually exclusive)：动画对象的相对路径。（animationData 和 path 是互斥的）
loop: true / false / number 是否循环播放，或者是可以循环多少次
autoplay: true / false it will start playing as soon as it is ready：它会在准备好后立即开始播放
name: animation name for future reference：动画名称以供将来参考
renderer: 'svg' / 'canvas' / 'html' to set the renderer：渲染器
container: the dom element on which to render the animation：容器

loadAnimation实例的方法

下面这些是实例一些主要方法

开始/暂停/停止/消除 -> play/pause/stop/destroy

this.animation.play()
this.animation.pause()
this.animation.stop()
this.animation.destroy()

setSpeed 设置速度，1是正常速度

this.animation.setSpeed(1)

setDirection 设置动画的方向

this.animation.setDirection(-1)

如果交互说进入的动画和离开的动画可以使用同一个，方向相反就好了，那么就可以使用这个方法，设置-1，然后再执行play方法

goToAndPlay 跳到某一帧动画，并播放这帧动画
goToAndStop 跳到某一帧动画，并停止

上面这些方法是做动画用的比较多的，下面还有一些方法，用得比较少，但也了解一下

playSegments(segments, forceFlag)

segments：数组。可以包含 2 个数值，用作动画的第一帧和最后一帧。或者可以包含一个数组序列，每个数组有 2 个数值。 forceFlag: 布尔值。如果设置为 false，它将等待当前段完成。如果为 true，它将立即更新值。

setSubframe(useSubFrames)

useSubFrames：如果为 false，它将尊重原始 AE fps。如果为 true，它将在每个 requestAnimationFrame 上使用中间值更新。默认为真。

getDuration(inFrames)

inFrames: If true, 以帧为单位返回持续时间, if false, 以秒为单位.

事件

lottie-web也暴露出了一下事件可以使用

DOMLoaded 比如这个DOMLoaded，当我们初始化好这个动画，同时动画插入到了dom上就会触发
complete 当这个动画执行完动画后，就会触发这个事件
loopComplete 当循环到动画，每完成一次动画后就会触发这个事件

上面这三个是用得比较多的

onEnterFrame 播放一帧动画的时候触发
onSegmentStart 开始播放一个动画片段的时候触发
config_ready （初始配置完成时）
data_ready （当动画的所有部分都已加载时）
data_failed （部分动画无法加载时）
Loaded_images （当所有图像加载成功或错误时）
破坏

下面这两个还不太熟悉，上面这些事件和方法基本上能完成交互和产品的需求。