关于前端:lottieweb实现AE导出的json动画实现

52次阅读

共计 1213 个字符,预计需要花费 4 分钟才能阅读完成。

简介

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

正文完
 0