Покадровая анимация в HTML5 с холстом - PullRequest
Новая
       20

Покадровая анимация в HTML5 с холстом

4 голосов
/ 24 января 2011

У меня есть флэш-анимация, которую я пытаюсь преобразовать в HTML5.Теперь я вынул все изображения.Например, в ручной анимации я сделал снимки всех изображений рук.Я сделал холст с базовым рисунком, но не знаю, как заменить эти изображения кадр за кадром. 

function draw(){
    var canvas = document.getElementById('canvas');
    if(canvas.getContext){
        // canvas animation code here:
        var ctx = canvas.getContext('2d');

        var lhs = new Image();

        lhs.src = "images/left_hnd_1.png";

        lhs.onload = function(){
            ctx.drawImage(lhs, 293, 137);
        }

    } else {
        // canvas unsupported code here:
        document.getElementById('girl').style.display = "block";
    }
}

Теперь у меня есть еще три кадра для этого изображения.left_hnd_2.png, left_hnd_3.png & left_hnd_4.png.Я бы использовал одно изображение, но разница в кадрах слишком велика, чтобы его можно было сделать с одним изображением.Как я могу оживить это с разницей во времени, которую я хочу.

Любые идеи будут с благодарностью.Спасибо!

Ответы [ 2 ]

6 голосов
/ 24 января 2011

Попробуйте: 

var imgNumber = 1;
var lastImgNumber = 4;

var ctx = canvas.getContext('2d');
var img = new Image;
img.onload = function(){
  ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height );
  ctx.drawImage( img, 0, 0 );
};
var timer = setInterval( function(){
  if (imgNumber>lastImgNumber){
    clearInterval( timer );
  }else{
    img.src = "images/left_hnd_"+( imgNumber++ )+".png";
  }
}, 1000/15 ); //Draw at 15 frames per second

В качестве альтернативы, если у вас есть только 4 изображения, можно создать одно огромное изображение со всеми четырьмя в «текстурном атласе», а затем использовать setTimeoutsetInterval для вызова drawImage() с различными параметрами для рисования различных подмножеств изображения на холсте.

0 голосов
/ 12 сентября 2011

Это сработало и для меня! По какой-то причине это не сработало, когда я использовал код открытия ОП: function draw(){

Однако, когда я использовал: window.onload = function draw() { анимация воспроизводится на холсте. Я также использую около 150 PNG-изображений с альфа-каналом, так что это отличный способ перенести «видео» или создать композиты на iPad / iPhone. Я подтверждаю, что он работает на iPad iOS 4.3.

...