主要是利用背景圖片的更換，達(dá)到播放的效果

因?yàn)樵趈s中修改@key-frame比較困難，所有這里利用了動態(tài)寫style文件的方式，動態(tài)的將我們所需要的@keyframes寫入在這個style文件中，然后再在需要用到動畫的地方直接寫動畫名稱就行

1，在輸出的index.html文件中創(chuàng)建一個style

生成動畫的方法 （兩個參數(shù)，一個是圖片的路徑列表，一個是動畫的名稱）

圖片的路徑可以用絕對路徑也可以用相對路徑，用相對路徑時需要注意，是相對index.html文件的路徑

// 生成幀動畫 // 用背景圖片的方式播放所以，1:要有寬高，2:元素內(nèi)最好沒有有東西，否則會遮住背景 export const createAnimation = (imglist, name) => {const dt = document.getElementById('dt')const X = 100 / imglist.lengthlet str = ''for (let i = 0; i < imglist.length; i++) {const img = imglist[i]str += (X * i) + '%{background: url(' + img + ') no-repeat center top;}'}// 為了不覆蓋之前的，我們用追加的方式寫動畫dt.innerHTML += '@keyframes ' + name + '{' + str + '}' }

2，在組件中使用方法，創(chuàng)建出動畫

3，應(yīng)用到元素上

總結(jié)

以上是生活随笔為你收集整理的Vue 中播放帧动画（抽离方法）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。