在vue中使用lottie-web实现动画(移动端)

  最近有一个需求里有个动效是这样的,一张图片从右边往左边无限循环滚动,然后图片上还有一个人骑着车放风筝,这样的一个场景。。我用css3实现出来有,每次动画执行完后循环的那一瞬间总是会有种切换,给人抖动的感觉。于是在跟ui商量之后,让她导出动画的json文件,然后我这边通过lottie-web这个直接使用她的配置文件,这样一个动画就实现了。

  1)、安装lottie-web这个库, npm install lottie-web --save 

  2)、在需要用到该库的文件里引入这个库, import lottie from 'lottie-web' 

  3)、接下来就是拿到ui给的配置文件,放到项目根目录下的static文件夹下,这样可以防止打包时图片啥的也被打包而引发的错误。

  4)、在需要用到的该动画的文件下进行初始化,这里我是在created这个生命周期里执行的,经测试发现是可以的。

lottie.loadAnimation({
    container: document.getElementById('imgWrapper'),   // 包含动画的那个容器
    renderer: 'svg',   // 可选值svg或canvas
    loop: true,           // 是否循环执行
    path: '',              // json文件的路径,可以是相对路径或绝对路径
})

  到了这里,基本就已经成功了。也可能显示图片缺失,这时候需要修改配置文件里的图片路径,。配置文件可能是这样的。

  

 这时候需要修改里面的u这个值,里面的路径修改为你图片存放的路径。这里只能是相对路径,,如果使用绝对路径,仍然会找不到图片,如果想使用绝对路径,可以直接删掉u这个字段,然后将p字段的值设为图片的路径(绝对路径),这样做也是可以的。

  到了这里,一个动画效果就已经实现了,,然而事情到这里还没有结束,当在不同尺寸的移动设备下浏览该动画,发现大屏下两端会有留白,并不能填充满,于是想着能不能直接修改配置文件里的宽高属性来实现呢?我直接将配置文件里的那个w属性的值设置为100%,想着这样应该是可以的,保存后发现直接报错了,后面细想一下,需要先获取设备的宽度,然后再修改配置文件里的高度,,那么问题来了,我获取到了,怎么修改配置文件呢?于是想着既然是json文件,可不可以通过异步请求的方式来获取,然后再来修改里面的值呢?

  emmm,有了思路,说干就干,发送请求后获取到值,然后获取设备的宽度,修改里面的w属性,这时候就不能再通过路径的形式去读取配置文件了,上述初始化代码修改后为

let resp = res.data
resp.w = window.innerWidth
lottie.loadAnimation({
    container: document.getElementById('imgWrapper'),
    renderer: 'svg',
    loop: true,
    animationData: resp
})

  好了,到了这里动画效果就完美实现了。

   小结:

  1、基本用法:

const animation = lottie.loadAnimation({
     container: document.getElementById('box'),
     renderer: 'svg',// 渲染方式:svg、canvas
     loop: true,  //循环播放,默认:false
     autoplay: true, //自动播放 ,默认true
     path: ' '  // json 路径
})

 

  2、常用方法:

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(); // 删除该动画,移除相应的元素标签等。在unmount的时候,需要调用该方法

 

  3、常用事件:

animation.addEventListener('data_ready', () => { console.log('animation data has loaded'); });

config_ready:完成初始配置后
data_failed:当无法加载动画的一部分时
loaded_images:当所有图像加载成功或错误时
DOMLoaded:将元素添加到DOM时

 

  

posted @ 2021-03-25 18:54  江峰★  阅读(2902)  评论(0编辑  收藏  举报