在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时
作者:江峰★
出处:http://www.cnblogs.com/jf-67/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利