Question

我希望能够暂停动画并在需要时重新启动它。为此，我添加了“click”事件监听器。到目前为止，我可以暂停它，但当我尝试恢复它时，我得到了这个：

未捕获的ReferenceError：未定义动画

我的代码：

var canv = document.getElementById('canv'),
ctx = canv.getContext('2d');
var x = 10,
y = 10;
var dx = 1,
dy = 3;
var running = false;
var anim;

var fps = 60;
var delay = 1000 / 60;

function draw() {
    ctx.clearRect(0, 0, canv.width, canv.height);
    ctx.save();
    ctx.translate(x, y);
    ctx.beginPath();
    ctx.arc(0, 0, 5, 0, Math.PI * 2);
    ctx.fill();
    ctx.restore();
}

function move() {
    x += dx;
    y += dy;

if (x >= canv.width || x <= 0) {
    dx = -dx;
}
if (y <= 0 || y >= canv.height) {
    dy = -dy;
}
}
var start = 0;

(function animate() {
    running = true;
    var current = new Date().getTime(),
    delta = current - start;

if (delta >= delay) {
    move();
    draw();
    start = new Date().getTime();
}

anim = requestAnimationFrame(animate);
})();

window.addEventListener('click', function() {
    if (running == true) {
    cancelAnimationFrame(anim);
    running = false;
} else {
    anim = requestAnimationFrame(animate);
    running = true;
}
});

有什么不对？为什么我不能调用动画功能？据我所知，它已在全球范围内宣布，为什么它说它没有定义？我不明白。

小提琴：http://jsfiddle.net/X9qt7/2/

Answer 1

您实际上不在全局范围内定义animate()，但作为永远不会从父级可用的表达式。 rAF在循环内部工作，因为它位于表达式中的animate（）子范围内，并且可以引用它。

修复：

function animate() {
    running = true;
    var current = new Date().getTime(),
        delta = current - start;

    if (delta >= delay) {
        move();
        draw();
        start = new Date().getTime();
    }

    anim = requestAnimationFrame(animate);
}
animate();

现在animate()将在全球范围内定义。

Answer 2

Just go with：

function animate() {
    ...
    window.animation = requestAnimationFrame(animate);
};
animate();

为什么requestAnimationFrame没有重启？

2 个答案: