lottie动画在vue的使用

地址链接

https://github.com/CCharlie-xiu/lottie-tag

安装

安装lottie-web

npm install lottie-web

lottie-web的基本用法

const animation = lottie.loadAnimation({
 container: document.getElementById('domId'), 
 renderer: 'svg', 
 loop: true,
 autoplay: true, // 是否自动播放, 默认true
 animationData: // AE动画使用bodymovie导出为json数据 
})

animation.play(); // 播放，从当前帧开始播放

animation.stop(); // 停止，并回到第0帧

animation.pause(); // 暂停，并保持当前帧

animation.goToAndStop(value, isFrame); // 跳到某时刻/帧并停止isFrame(默认false)指示value表示帧还是时间(毫秒)

animation.goToAndPlay(value, isFrame); // 跳到某个时刻/帧并进行播放

animation.goToAndStop(30, true); // 跳转到第30帧并停止

animation.goToAndPlay(300); // 跳转到第300毫秒并播放

animation.playSegments(arr, forceFlag); // arr可以包含两个数字或者两个数字组成的数组，forceFlag表示是否立即强制播放该片段

animation.playSegments([10,20], false); // 播放完之前的片段，播放10-20帧

animation.playSegments([[0,5],[10,18]], true); // 直接播放0-5帧和10-18帧

animation.setSpeed(speed); // 设置播放速度，speed为1表示正常速度

animation.setDirection(direction); // 设置播放方向，1表示正向播放，-1表示反向播放

animation.destroy(); // 删除该动画，移除相应的元素标签等。

Lottie 网站

https://lottiefiles.com/