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

因為在js中修改@key-frame比較困難，所有這里利用了動態寫style文件的方式，動態的將我們所需要的@keyframes寫入在這個style文件中，然后再在需要用到動畫的地方直接寫動畫名稱就行

1，在輸出的index.html文件中創建一個style

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

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

// 生成幀動畫 // 用背景圖片的方式播放所以，1:要有寬高，2:元素內最好沒有有東西，否則會遮住背景 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，在組件中使用方法，創建出動畫

3，應用到元素上

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。