lottie-web实现AE导出的json动画实现

简介

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'); });