主要是利用背景图片的更换,达到播放的效果
因为在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.length
let 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,应用到元素上