анимация холста javascript - PullRequest
Новая
       0

анимация холста javascript

1 голос
/ 09 августа 2011

Я пытаюсь работать с атласом текстуры и тэгом canvas для анимации.Я не получаю никаких ошибок, но вижу только последний кадр.Есть ли что-то, что я должен сделать, чтобы я видел все «кадры»?

Я проверил это с помощью жесткого кодирования координат x / y на атласе текстуры, так что я знаю, что могу путешествовать по нему.

Вот мой код: 

<!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 init() { 

    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>

Вот изображение, с которым я работаю (Примечание: я знаю, что мои координаты отключены для файла, сейчас я просто пытаюсь получить переход кработать, я тогда точно настрою координаты x / y (конечно, если вы не хотите сделать это для меня.: D)

enter image description here

1 Ответ

0 голосов
/ 09 августа 2011

Это интервал.Вы устанавливаете их все до запуска animate, перезаписывая предыдущий интервал.Таким образом, вы просто продолжаете печатать координату 0,600.Это не единственное неверное из того, что я вижу, но это причина, по которой вы получаете только последнее изображение.

Нажмите каждую координату, а затем используйте интервал для циклического просмотра анимации.Не устанавливайте интервал до тех пор, пока все они не будут выдвинуты, а затем используйте глобальное значение для подсчета шагов, приращения при анимации (при перерисовке на холст).

Например (упрощено, и это может потребовать некоторой работычтобы работать так, как вы хотите): 

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++;
}

Я тоже не уверен в ctx.drawImage(thisImg,thisX,thisY, 1024, 451, 0, 0, 1024, 451); ... Я чувствую, что вы не привязываете изображение к нужным параметрам.Помните, что ctx.drawImage для аргументов: img, sx, sy, sw, sh, dx, dy, dw, dh.img - изображение.sx, sy, sw, sh - обрезать прямоугольник, определенный этим.dw, dh - масштаб в этих измерениях dx, dy - положение здесь.

Надеюсь, что это поможет некоторым.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...