版权声明：本文为博主原创文章，若转载请注明出处且不得删改。（如有错误请提出指正，部分文章会参考其他文章，已经表明参考出处，如有侵权请联系删除） https://blog.csdn.net/qq_34902437/article/details/80869438
今天在完成百度前端技术学院的时候有一个题目是，用 js 操作 css 的雪碧图实现
帧动画。我们知道实现帧动画的方式有 gif，css 动画和 js 操纵的方式。
在网上看了很多的教程，都写得特别的复杂，而在下一直是秉承大道至简的原则，写
那么多代码自然是难以请愿的（主要是大神们写的太详细了）。话不多说，下面展示我
的实现方式。
核心思想
- 设置 background-image 来加载图像。
- 使用 background-position 来处理图像的位置。
- 使用 .style.backgroundPosition 来动态改变图像位置。
- 使用 setInterval（） 来设置执行 “ 改变图像位置方法 ” 的时间，不然1秒钟就跑完整个图像了
具体代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>帧动画</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
/* 设置承载背景图片的 div */
.ani{
border: 1px solid black;
width: 500px;
height: 480px;
max-width: 500px;
max-height: 480px;
margin: 10px auto;
/* 加载图像 */
background-image: url('images/ani.jpg');
/* 让它在 y 轴重复，这样可以实现连续的帧动画 */
background-repeat: repeat-y;
/* 设置初始位置 */
background-position: 0 0;
}
</style>
</head>
<body>
<div class="ani">
</div>
<script type="text/javascript">
var aniPosition = document.querySelector('.ani');
var i=0;
function changeImage(){
// 因为我的 div 的高设置为 480px，所有每次向下 480px切换到下一张图片
i += -480;
aniPosition.style.backgroundPosition = "0px " + i + "px";
}
function start(){
// 设置的时间间隔为 100s
setInterval('changeImage()', 100);
}
// 加载初始化方法
window.onload = function(){
start();
}
</script>
</body>
</html>效果展示
写在后面
当然这段代码只是核心思想的展示，我们在加载帧动画的时候还有其他的细微问题，比
如，检测背景图片是否加载完，加载完才能播放，以及设置播放和暂停的按钮。这些问
题相对简单，这里就不展示了。