Перемещение с setInterval метод requestAnimationFrame со спрайтом

Я пытаюсь использовать метод requestAnimationFrame с помощью, которую я могу найти в Интернете. Я могу перемещать элемент, но когда я хочу делать это со спрайтами, я теряюсь.Перемещение с setInterval метод requestAnimationFrame со спрайтом

Например, приведенный ниже код работает нормально с 'setInterval', но мне не удается заставить его работать с 'requestAnimationFrame'.

<!DOCTYPE html> 

<html> 

<head> 

<title>Animating Sprites in HTML5 Canvas</title> 

<meta charset="UTF-8" /> 
<meta name="viewport" content="width=device-width, user-scalable=no"> 

<style> 
.demo {background: #aaaaaa;} 
#myCanvas{background: #cccccc} 
</style> 

</head> 

<body class="demo"> 

<canvas id="myCanvas" width="800" height="100"></canvas> 

<script> 

(function() { 

// Canvas 
var canvas = document.getElementById('myCanvas'); 
var ctx = canvas.getContext('2d'); 
// Set the fill style for the drawing context. 
ctx.fillStyle = '#3399ff'; 

    // VARIABLES 
    var width = 48;   // Width CANVAS 
    var height = 60;   // Height CANVAS 
    var xFrame = 0;   // Frame x coordinate 
    var yFrame = 0;   // Frame y coordinate 
    var dxFrame = 0;   // Frame dx position in canvas 
    var dyFrame = 0;   // Frame dy position in canvas 
    // SPRITE used 
    image = new Image() 
    image.src = 'myRunner2.png'; 
    // 
    var requestID; 

// shim layer with setTimeout fallback 
window.requestAnimFrame = (function(){ 
return window.requestAnimationFrame || 
     window.webkitRequestAnimationFrame || 
     window.mozRequestAnimationFrame || 
     window.oRequestAnimationFrame || 
     window.msRequestAnimationFrame || 
     function(/* function FrameRequestCallback */ callback, /* DOMElement   Element */ element){ 
      window.setTimeout(callback, 1000/60); 
     }; 
})(); 

    // FUNCTION DRAWING MOVE (xFrame = 0 & yFrame = 1)  
    var drawMove = function(){ 
     ctx.clearRect(0, 0, canvas.width, canvas.height); 
     ctx.drawImage(image, width * xFrame, height * yFrame, width, height, dxFrame, dyFrame, width, height); 
     if (xFrame == 7) { 
      xFrame = 0; 
     } else { 
      xFrame++ 
      dxFrame+=2; 
     } 
     //window.requestAnimFrame(eMove); 
     } 
    // ANIMATION in 3 moves: Idle + Move + Tired 
    var intA; 
    function eMove() { 
     // Runner in motion (8 frames) 
     yFrame = 1; 
     xFrame = 0; 
     clearInterval(intA); 
     intA = setInterval(drawMove, 100); 
    } 
    eMove(); 
}()); 

</script> 

</body> 

</html>

Я ищу помощь по этой проблеме, часть кода будет большим, но способ работы или направление искать будет хорошо, как хорошо. Как манипулировать спрайтом с помощью метода requestAnimationFrame?

В конечном счете, моя цель - переместить спрайт в одном направлении и фон в другом направлении. Я могу перемещать спрайт в одном направлении с помощью методов setTimeout/setInterval, или я могу перемещать в другом направлении фон с помощью requestAnimationFrame, но также и отдельно.

Надеюсь, вы понимаете мою проблему. Спасибо,

JLuc01

источник

2015-04-06 JLuc01

Это величайшая вещь в JavaScript, поскольку jQuery, делает для супер гладкой анимации и удивительно легко понять. Так что для использования его «setTimeout» - уродливый утенок. – Shikkediel

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

var initial = update = new Date().getTime(), progress = 0, duration = 2000; 
requestAnimationFrame(frameSequence); 

function frameSequence() { 

update = new Date().getTime(); 
var elapsed = update-initial; 
progress = Math.max(elapsed/duration, 1); 

someFunction(); // do calculations and implement them based on progress 

if (progress < 1) requestAnimationFrame(frameSequence); 
}

И живой пример (соответствующий код в нижней части)

http://codepen.io/Shikkediel/pen/vEzqoX?editors=001

Edit - некоторые комментарии продвигаемые обновить:

Вызов requestAnimationFrame является просто базовый цикл, чтобы заменить таймаут. Это может быть так же просто, как использовать requestAnimationFrame(drawMove) вместо clearInterval(intA); intA = setInterval(drawMove, 100). Вероятно, все это будет делать за 8/60 секунды, хотя (я вижу, что 8 кадров и 60 - общая частота обновления дисплея), поэтому необходим таймер.

Это будет оптимизировать и сработать наверняка: setInterval(requestAnimationFrame(drawMove), 100). Он не будет заставлять кадр отображаться на экране, как это делает тайм-аут (дающий проблемы с производительностью и мерцание), но заставляя его ждать первого соответствующего экземпляра, когда появляется новая краска экрана. Но не использовать тайм-ауты - это гораздо лучший подход.

источник

2015-04-06 22:31:31 Shikkediel

Я могу понять ваш ответ об использовании таймера и обновлении прогресса, но использовать его правильно, это не так просто. Ваш код не говорит со мной очень хорошо. В любом случае, спасибо за вашу помощь, но я думаю, что нашел интересную ссылку для решения части моей проблемы: http://www.williammalone.com/articles/create-html5-canvas-javascript-sprite-animation/ – JLuc01

Это о создании спрайтов в основном ... часть о requestAnimationFrame близка к размеру моего ответа. Но это логично, потому что концепция проста. Сделал некоторые изменения выше об этом. – Shikkediel

Спасибо. Со ссылкой выше и вашими комментариями я добился большого прогресса. – JLuc01

Перемещение с setInterval метод requestAnimationFrame со спрайтом

ответ

Смежные вопросы