画布上的简单Sprite工作表动画（或javascript）
[英]simple sprite sheet animation on canvas (or javascript)
问题描述
So far I have this: 
到目前为止，我有这个：
a sprite sheet of w 5507px X H 2100px the scenes are 550 x 700 and the png is named animation png or something 一张w 5507px X H 2100px的精灵表，场景为550 x 700 ，png命名为animation png或其他名称
the image is on the background of the div , and it goes to the coordinates background position, but so far, the animation goes for a loop and I need it to stop, I've been trying some solutions but nothing...I will appreciate any idea, please check the code 图像位于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>
2 个解决方案
解决方案1
1 2012-10-18 02:02:45
try this one, using clearInterval() to stop loop: 试试这个，使用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;
}
}
解决方案2
0 2012-10-18 02:30:25
Try this: 尝试这个：
http://jsfiddle.net/BgSnL/3/ http://jsfiddle.net/BgSnL/3/
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();
The current frame x/y offset is tracked via an object. 通过对象跟踪当前帧的x / y偏移量。 Each iteration we want to do one of: 每次迭代，我们要执行以下操作之一：
- Move over to the next column 移至下一栏
- Reach the end of the row, drop down a row 到达行尾，下拉一行
- Reach the end of the animation, restart 到达动画的结尾，重新启动
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.