vue 数据可视化大屏项目中，为了让页面看起来更加酷炫，会添加一些序列帧动画，这里使用的是css+雪碧图的方式来实现，我们也可以通过js加canvas的方式来实现序列帧。

将帧图片转为精灵图

将图片合成雪碧图并实现动画

html

<div class="shujucaiji" :style="style">
                                    <div v-if="!list[0].show" class="cardbodyimg1">
                                        <img :src="list[0].imgx" alt="">
                                    </div>
                                    <div v-if="list[0].show" class="cardbodyimg1" :style="list[0].style">
                                    </div>
                                </div>
    <el-image v-for="(item,index) in list" :key="index" @load="getindex(index)" style="display: none" v-if="loadall"
              :src="item.imglarge">
    </el-image>

js

data:{
//判断图片是否加载完成
loadall: false,
//要加载的图片
        list: [
            {
            //小图 先用小图占位
                imgx: "images/yuan1/yuan00.png",
                //大图，大图加载完成后替换为大图
                imglarge: 'images/yuan1.png',
                style: {
                    backgroundImage: 'url("images/yuan1.png")'
                },
                show: false,
            }, {
                imgx: "images/yuan2/yuan00.png",
                imglarge: 'images/yuan2.png',
                style: {
                    backgroundImage: 'url("images/yuan2.png")'
                },
                show: false,
            }, {
                imgx: "images/yuan3/yuan00.png",
                imglarge: 'images/yuan3.png',
                style: {
                    backgroundImage: 'url("images/yuan3.png")'
                },
                show: false,
            }, {
                imgx: "images/yuan4/yuan00.png",
                imglarge: 'images/yuan4.png',
                style: {
                    backgroundImage: 'url("images/yuan4.png")'
                },
                show: false,
            },]
            }
            
methods:{
getindex: function (index) {
            this.list[index].show = true
        },
}

使用canvas渲染

vue项目中，推荐使用canvas来渲染序列帧动画

vue 使用canvas实现序列帧动画效果