Vue 中播放帧动画（抽离方法）

主要是利用背景图片的更换，达到播放的效果

因为在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 中播放帧动画（抽离方法）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。