从setInterval方法移动到带有sprite的requestAnimationFrame

Moving from setInterval method to requestAnimationFrame with sprite

本文关键字：sprite requestAnimationFrame setInterval 方法 移动      更新时间：2023-09-26

我正试图在互联网上找到的帮助下使用方法"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"方法操作sprite？

最终，我的目标是将精灵移向一个方向，将背景移向另一个方向。我可以单独使用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)。它不会像超时那样在显示器上强制显示一个帧（出现性能问题和闪烁），而是在屏幕出现新油漆时等待第一个合适的实例。但完全不使用超时是一种更好的方法。

相关文章：