实现思路
将多张图片并排放到一个盒子（上图红色区域），黑色区域为红色区域的父盒子(可视区域),黑色盒子超出部分隐藏，通过定时器，定时调整红色区域的top属性移动红色区域
具体代码（vue）
1. data()中定义全局变量存放图片地址
aniImgs: []
2.将所有帧动画图片添加到定义好的数组里面
for (let i = 0; i < 151; i++) {this.aniImgs.push(`animalImgs/文字_00${119 + i}.png`);}
3.定义dom标签
通过遍历img标签直接在src中写相对路径可能图片显示不出来
<div class="ani-box-par"><div class="ani-box"><imgv-for="(item, inx) in aniImgs":key="inx":src="require('../../assets/' + item)"alt=""></div></div>
4. css样式
.ani-box-par {position: fixed;top: 45%;right: .8333rem;transform: translateY(-50%);width: 3.6458rem;height: 3.6458rem;overflow: hidden;.ani-box {position: absolute;top: 0px;right: 0;width: 3.6458rem;img {display:block;width: 100%;}}}
5. js代码控制 （定时器的触发次数是图片的个数）
const im = document.querySelector(".ani-box");for (let i = 0; i < 151; i++) {setTimeout(() => {im.style.top = `-${i * 3.6458}rem`;}, (1000 * i) / 30);}
如果觉得《前端通过序列帧实现动画》对你有帮助，请点赞、收藏，并留下你的观点哦！
