Question

我正在尝试使用方法＆＃39; requestAnimationFrame＆＃39;借助我可以在互联网上找到的帮助。我可以移动一个元素，但是当我想用精灵做的时候，我迷失了。

例如，下面的代码与＆＃39; setInterval＆＃39;正常工作，但我无法使其与'requestAnimationFrame＆＃39;

一起使用。

<!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>

我正在寻找关于这个问题的帮助，一部分代码会很棒但是一种工作方式或寻找方向也会很好。如何使用方法＆＃39; requestAnimationFrame＆＃39;？

来操作精灵

最终，我的目标是在一个方向移动精灵，在另一个方向移动背景。我可以单独使用setTimeout / setInterval方法在一个方向上移动精灵，或者我可以使用＆＃39; requestAnimationFrame＆＃39;在另一个方向移动背景，但也可以单独移动。

我希望你理解我的问题。谢谢，

JLuc01

Answer 1

要使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)。它不会强制显示器上的帧然后像超时一样（给出性能问题和闪烁）但是当它有新的画面时，让它等待第一个适当的实例。但是根本不使用超时是一种更好的方法。

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

1 个答案: