在vue中使用lottie-web实现动画（移动端）

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

　　最近有一个需求里有个动效是这样的，一张图片从右边往左边无限循环滚动，然后图片上还有一个人骑着车放风筝，这样的一个场景。。我用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时

以上是 在vue中使用lottie-web实现动画（移动端） 的全部内容， 来源链接： utcz.com/z/376886.html

回到顶部