简介
Lottie 一个实用于 Web，Android，iOS，React Native 和 Windows 的挪动库，它能够应用 Bodymovin 解析以 json 格局导出的 Adobe After Effects 动画，并在挪动设施上进行本地渲染！
装置
npm install lottie-web
根本用法
const animation = lottie.loadAnimation({container: document.getElementById('box'),
renderer: 'svg', // 渲染形式:svg：反对交互、不会失帧、canvas、html：反对 3D，反对交互
loop: true, // 循环播放，默认：true
autoplay: true, // 自动播放，默认 true
path: '' // json 门路
})罕用办法
| 办法 | 形容 |
|---|---|
| animation.play() | 播放，从以后帧开始播放 |
| animation.stop() | 进行，并回到第 0 帧 |
| animation.pause() | 暂停，并放弃以后帧 |
| animation.goToAndStop(value, isFrame) | 跳到某个时刻 / 帧并进行【isFrame（可省略，默认 false：毫秒；true：帧）指明 value 的单位是毫秒还是帧】 |
| animation.goToAndPlay(value, isFrame) | 跳到某个时刻 / 帧并播放 |
| animation.playSegments(arr, forceFlag) | 以帧为单位，播放指定片段【arr 能够蕴含两个数字或者两个数字组成的数组，forceFlag 示意是否立刻强制播放该片段】 |
| animation.setSpeed(speed) | 设置播放速度，speed 为 1 示意失常速度 |
| animation.setDirection(direction) | 设置播放方向，1 示意正向播放，- 1 示意反向播放 |
| animation.destroy() | 删除该动画，移除相应的元素标签等。【在 unmount 的时候，须要调用该办法】 |
animation.goToAndStop(30, true) // 跳转到第 30 帧并进行
animation.goToAndPlay(300) // 跳转到第 300 毫秒并播放 animation.playSegments([10,20], false) // 播放完之前的片段，播放 10-20 帧
animation.playSegments([[0,5],[10,18]], true) // 间接播放 0 - 5 帧和 10-18 帧 罕用钩子
| 钩子 | 形容 |
|---|---|
| data_ready | 动画数据加载结束 |
| config_ready | 实现初始配置后 |
| data_failed | 当无奈加载动画的一部分时 |
| loaded_images | 当所有图像加载胜利或谬误时 |
| DOMLoaded | 将元素增加到 DOM 时 |
animation.addEventListener('data_ready', () => {console.log('hahahhahaahha'); });