在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時