[英]simple sprite sheet animation on canvas (or javascript)
到目前为止,我有这个:
一张w 5507px
X H 2100px
的精灵表,场景为550 x 700
,png命名为animation png或其他名称
图像位于div
的背景上,并且到达坐标的背景位置,但是到目前为止,动画进行了循环,我需要停止它,我一直在尝试一些解决方案,但是什么也没有...我会感谢任何想法,请检查代码
<style>
#anim{
width:550px;
height:700px;
background-image:url(anim3.png);
}
</style>
<title>Untitled Document</title>
</head>
<body onload="init()">
<script>
var imageWidth=5500,
imageHeight=2100,
xpos=0,
ypos=0,
index=0,
numFrames= 30,
frameSize=550,
frameHeight=700,
div;
function init(){
div = document.getElementById('anim');
loop();
setInterval(loop, 1000 / 10);
}
function loop() {
//multiplying by -1 because we want to move the image to the left and up to reveal the area we want to see.
div.style.backgroundPosition = (-xpos)+"px "+(-ypos)+"px";
//each time around we add the frame size to our xpos, moving along the source image.
xpos += frameSize;
ypos +=frameHeight;
//increase the index so we know which frame of our animation we are currently on.
index += 1;
//if our index is higher than our total number of frames, we're at the end and better start over.
if (index == 30) {
div.style.backgroundPosition =(imageWidth)+"px"+(imageHeight)+"px";
//if we've gotten to the limit of our source image's width, we need to move down one row of frames.
} else if (xpos +frameSize > imageWidth){
xpos =0;
ypos += 700;
}
}
</script>
试试这个,使用clearInterval()停止循环:
var result;
function init(){
div = document.getElementById('anim');
loop();
result = setInterval(loop, 1000 / 10);
}
function loop() {
//multiplying by -1 because we want to move the image to the left and up to reveal the area we want to see.
div.style.backgroundPosition = (-xpos)+"px "+(-ypos)+"px";
//each time around we add the frame size to our xpos, moving along the source image.
xpos += frameSize;
ypos +=frameHeight;
//increase the index so we know which frame of our animation we are currently on.
index += 1;
//if our index is higher than our total number of frames, we're at the end and better start over.
if (index == 30) {
div.style.backgroundPosition =(imageWidth)+"px"+(imageHeight)+"px";
//if we've gotten to the limit of our source image's width, we need to move down one row of frames.
clearInterval(result) ;
} else if (xpos +frameSize > imageWidth){
xpos =0;
ypos += 700;
}
}
尝试这个:
var div,
imageWidth = 427,
imageHeight = 140,
frameWidth = 61,
frameHeight = 70,
curFrame = { x: 0, y: 0 };
function init(){
div = document.getElementById('anim');
loop();
setInterval(loop, 1000 / 10);
}
function loop()
{
var xOffset = frameWidth * curFrame.x,
yOffset = frameHeight * curFrame.y;
div.style.backgroundPosition = -(xOffset) + "px " + -(yOffset) + "px";
// if we can, iterate to the next column
if ((xOffset + frameWidth) < imageWidth) {
curFrame.x += 1;
// else if we can, drop down a row
} else if ((yOffset + frameHeight) < imageHeight) {
curFrame.x = 0;
curFrame.y += 1;
// reset
} else {
curFrame.x = 0;
curFrame.y = 0;
}
}
init();
通过对象跟踪当前帧的x / y偏移量。 每次迭代,我们要执行以下操作之一:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.