我正在尝试在Internet上找到的帮助下使用方法'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
最佳答案
为了使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
编辑-一些评论升级为更新：
requestAnimationFrame调用实际上只是一个基本循环，可以代替超时。就像使用
requestAnimationFrame(drawMove)代替clearInterval(intA); intA = setInterval(drawMove, 100)一样简单。这样，它大概可以在8/60秒内完成整个操作（我看到有8帧，而60是常见的显示刷新率）-因此将需要一个计时器。这将优化并确定运行：
setInterval(requestAnimationFrame(drawMove), 100)。它将不会像超时那样在显示器上强制显示帧（导致性能问题和闪烁），但是会在屏幕上出现新的绘画时使其等待第一个合适的实例。但是根本不使用超时是一种更好的方法。关于javascript - 使用Sprite从setInterval方法移动到requestAnimationFrame，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29480204/