requestAnimationFrame在Safari/Opera中无效。我很苦恼。

Question

我有一个问题，需要额外的帮助来解决。具体情况如下：

在Chrome和FF浏览器中，我的小动画很正常（当用户将鼠标悬停在div上时，4个圆同时绘制）。

但是...对于Safari和Opera而言，它们就是不想显示我的动画。我已经查看了错误控制台，得到的消息是：

类型错误：'undefined不是函数（评估'requestAnimationFrame（function {

animate（curPerc / 100）

}）')

我不确定这里发生了什么，但我认为'animate'函数正在循环运行，只适用于“hover”函数，并且完成第一次循环后，该函数正在寻找另一个输入，未收到任何输入，从而导致“undefined”错误？？虽然我可能完全错了！此外...这并不能解释为什么它在Chrome和FF中有效，而在Safari或Opera中无效。

以下是其中一个圆圈动画的代码，以供参考：

HTML：

<canvas id="myCanvasVD" width="200" height="200"></canvas>

Javascript：

(function() {
 var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                          window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
 window.requestAnimationFrame = requestAnimationFrame;
})();

$(document).ready(function() {
$("#aboutPageDiv").hover(function() {
            var myCanvas = document.getElementById('myCanvasVD');
            var ctx = myCanvas.getContext("2d");
            var x = myCanvas.width / 2;
            var y = myCanvas.height / 2;
            var radius = 75;
            var endPercentVD = 87;
            var curPerc = 0;
            var counterClockwise = false;
            var circ = Math.PI * 2;
            var quart = Math.PI / 2;

            ctx.lineWidth = 32;
            ctx.strokeStyle = '#34c3e5';
            ctx.lineCap = "round";

function animate(current) {
 ctx.clearRect(0, 0, ctx.width, ctx.height);
 ctx.beginPath();
 ctx.arc(x, y, radius, -(quart), ((circ) * current) - quart, false);
 ctx.stroke();

 curPerc++;
 if (curPerc < endPercentVD) {
     requestAnimationFrame(function () {
         animate(curPerc / 100)

     });
   } 
 }

 animate();
 }

 );
 });

如果有人知道如何在Safari和Opera上使其运行，那真的会很感激，并且一张圣诞卡片将通过邮件送到你手中...

哦，对了，我已经安装了最新版本的Safari和Opera！

非常感谢，

蒂姆

- Tim Johnstone

---

一个更完整的 polyfill：requestAnimationFrame for Smart Animating。 - Andreas

谢谢Andreas，我会研究一下的。不幸的是，我的问题仍然存在。 - Tim Johnstone

Answer 1

一些Safari版本不支持window.requestAnimationFrame函数。

解决方法：在调用window.requestAnimationFrame之前添加这个修补程序来定义它。

// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel

// MIT license

(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] 
                                   || window[vendors[x]+'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };

    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());

- Joshua Plicque