javascript - 从 setInterval 方法转移到带有 sprite 的 requestAnimationFrame

我正在尝试在互联网上找到的帮助下使用“requestAnimationFrame”方法。我可以移动一个元素，但是当我想用 Sprite 来移动元素时，我就迷失了。

例如，下面的代码可以正常使用“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 ？

最终，我的目标是将 Sprite 向一个方向移动，将背景向另一个方向移动。我可以单独使用 setTimeout/setInterval 方法向一个方向移动 Sprite ，也可以使用“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);
}

编辑 - 一些评论升级为:

requestAnimationFrame 调用只是一个基本循环，实际上是为了替换超时。它可以像使用 requestAnimationFrame(drawMove) 一样简单而不是clearInterval(intA); intA = setInterval(drawMove, 100) 。不过，它可能会在 8/60 秒内完成整个事情(我看到有 8 帧，60 是常见的显示刷新率) - 因此需要一个计时器。

这肯定会优化并工作:setInterval(requestAnimationFrame(drawMove), 100) 。它不会像超时那样在显示器上强制显示一帧(导致性能问题和闪烁)，而是在屏幕出现新油漆时等待第一个适当的实例。但根本不使用超时是一个更好的方法。

关于javascript - 从 setInterval 方法转移到带有 sprite 的 requestAnimationFrame，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29480204/

javascript - 从 setInterval 方法转移到带有 sprite 的 requestAnimationFrame

上一篇：如果弹出窗口关闭，Javascript 停止/重置计时器

下一篇：javascript - jquery自定义事件困惑