javascript canvas animation_问答_开发者_运维开发者技术经验分享

I'm trying to work with a texture atlas and the canvas tag to do some animation. I don't get any errors but all I am seeing is the last frame. Is there something I should be doing so I see all the "frames"?

I have tested this with hard coding the x/y coordinates on the texture atlas so I know I can cruise around it.

Here's my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html lang="en">
<head>
<meta charset="utf-8">
<title>Canvas Animation</title>
<!-- meta tags -->
<meta name="keywords" content="">
<meta name="description" content="">

<!-- javascript -->

<script language="javascript">

var textureAtlas = new Image();
var moeImg = new Image();

function i开发者_Go百科nit() { 

    animateProps = new Array;

    textureAtlas.src = "images/textureatlast1.png";
    moeImg.src = "images/moe.jpg";
    var textureAtlasCoords = new Array("0,0", "100,0", "200,0", "300,0", "400,0", "500,0", "600,0");

        for(var c=0; c<textureAtlasCoords.length; c++) {

            animateObj = new Object();

            var thisCoord = textureAtlasCoords[c];
            var thisCoordSplit = thisCoord.split(",");
            var thisX = thisCoordSplit[0];
            var thisY = thisCoordSplit[1]; 

            //var a = setTimeout(Function(){animate(ctx, textureAtlas, thisX, thisY)},1000);
            animateObj['canvasId'] = "princessAnimation"; 
            animateObj['imgsrc'] = textureAtlas;
            animateObj['x'] = thisX;
            animateObj['y'] = thisY;

            animateProps.push(animateObj);

            var a = setInterval(function(){animate(animateProps);},1000);

        }

        clearInterval(a);

}


function imgDraw(ctx, thisImg) { 

    console.log(thisImg);
    //(image, x(
    ctx.drawImage(thisImg,0,0, 1024, 451, 0, 0, 1024, 451);

}

function animate() { 

        //get animation properties
        for(thisProp in animateProps) {
            var canvasId = animateProps[thisProp]['canvasId']; 
            var thisImg = animateProps[thisProp]['imgsrc'];
            var thisX = animateProps[thisProp]['x'];
            var thisY = animateProps[thisProp]['y'];

        }

        var canvas = document.getElementById(canvasId);
    if (canvas.getContext){

        var ctx = canvas.getContext('2d');
        ctx.clearRect(0,0,1024,451);
        ctx.drawImage(thisImg,thisX,thisY, 1024, 451, 0, 0, 1024, 451);
    }

}
</script>

<!-- stylesheets -->

<!--conditional comments -->

</head>

<body onload="init();">


<div id="animationWrapper">
    <canvas width="100" height="150" id="princessAnimation"></canvas>
</div>

</body>
</html>

Here's the image I am working with (Note: I know my coordinates are off per the file, right now I am just trying to get the transition to work, I'll then fine tune the x/y coordinates (of course unless you want to do that for me. : D )

javascript canvas animation

It's the interval. You're setting them all before animate is ever fired, overwriting the previous interval. So you just keep printing out the 0,600 coordinate. It's not the only thing wrong from what I can see, but it's the reason you're only getting the last image.

Push each coordinate, then use the interval to loop through the animations. Don't set the interval until all of them are pushed, then use a global to count the steps, increment on animation (upon redrawing to the canvas).

For example (simplified, and this may need some work to get working the way you want):

var textureAtlas = new Image(),
    steps = 0, maxsteps = 0;
//var moeImg = new Image();
var a;


function init() { 

  animateProps = new Array;

  textureAtlas.src = "textureatlas1.png";
  //moeImg.src = "images/moe.jpg";
  var textureAtlasCoords = new Array("0,0", "100,0", "200,0", "300,0", "400,0", "500,0", "600,0");
  maxsteps = textureAtlasCoords.length;
    for(var c=0; c<textureAtlasCoords.length; c++) {

      animateObj = new Object();

      var thisCoord = textureAtlasCoords[c];
      var thisCoordSplit = thisCoord.split(",");
      var thisX = thisCoordSplit[0];
      var thisY = thisCoordSplit[1]; 

      //var a = setTimeout(Function(){animate(ctx, textureAtlas, thisX, thisY)},1000);
      animateObj['canvasId'] = "princessAnimation"; 
      animateObj['imgsrc'] = textureAtlas;
      animateObj['x'] = thisX;
      animateObj['y'] = thisY;

      animateProps.push(animateObj);
    }
    a = setInterval(function(){animate(animateProps);},1000);
}
function animate() { 
    if(steps>=maxsteps) steps =0;
    //get animation properties

      var canvasId = animateProps[steps]['canvasId']; 
      var thisImg = animateProps[setps]['imgsrc'];
      var thisX = animateProps[steps]['x'];
      var thisY = animateProps[steps]['y'];

    var canvas = document.getElementById(canvasId);
  if (canvas.getContext){

    var ctx = canvas.getContext('2d');
    ctx.clearRect(0,0,1024,451);
    console.log(thisX+" "+thisY);
    ctx.drawImage(thisImg,thisX,thisY, 1024, 451, 0, 0, 1024, 451);
  }
  steps++;
}

I'm also not so sure on ctx.drawImage(thisImg,thisX,thisY, 1024, 451, 0, 0, 1024, 451);... I feel like you're not binding the image to the right parameters. Remember that ctx.drawImage is img, sx, sy, sw, sh, dx, dy, dw, dh for the args. img - the image. sx, sy, sw, sh - clip to the rectangle defined by this. dw, dh - scale to these dimensions dx, dy - position here.

Hope that helps some.