简介
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'); });
发表回复