JavaScript 实现帧动画的方式有三种
- 图片元素的 element.style.backgroundPosition = “x y”;
- 父容器的 overflow:hidden; 和图片src元素的 element.style.transform = “translate(x, y)”;
- 使用canvas动态绘制
JavaScript 实现帧动画较CSS实现的优点
- 方便切割动画帧。由于每帧大小都是固定的,因此可以写成函数,而不用像CSS那样把每帧的位置都写一遍
- 动画状态可控。可以在任意时刻暂停或者恢复动画,或者在动画完成时执行某些操作。
代码实战
<html>
<head>
<style>
.imageStyle {
width: 241px;
height: 180px;
border-radius: 20px;
border: 1px solid black;
box-shadow: 5px 5px 5px #888;
margin: 5px;
}
.imageBg {
background-image: url("frameAnim.png");
}
#translateAnimDiv {
overflow: hidden;
display: inline-block;
}
</style>
</head>
<body>
<img id="positionAnimImg" class="imageStyle imageBg">
<div id="translateAnimDiv" class="imageStyle">
<img id="translateAnimImg" src="frameAnim.png">
</div>
<canvas id="canvas" width="241px" height="180px" class="imageStyle">Your browser can not support canvas</canvas>
<script>
window.onload = function() {
var positionAnimImg = document.getElementById("positionAnimImg");
var index = 0;
setInterval(function() {
positionAnimImg.style.backgroundPosition = -index*241 + "px 0";
index++;
if(index >= 7) {
index = 0;
}
}, 300);
var translateAnimImg = document.getElementById("translateAnimImg");
var index = 0;
setInterval(function() {
translateAnimImg.style.transform = "translate(-" + index*14.3 + "%, 0)";
index++;
if(index >= 7) {
index = 0;
}
}, 300);
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var index = 0;
setInterval(function() {
ctx.drawImage(translateAnimImg, index*241, 0, 240, 180, 0, 0, 240, 180);
index++;
if(index >= 7) {
index = 0;
}
}, 300);
}
</script>
</body>
</html>
图片素材见鄙人上一篇博文《CSS3 帧动画》
http://blog.csdn.net/chy555chy/article/details/56489497