javascript - requestAnimationFrame 在 Safari/Opera 中不工作。扯掉我的头发

Question

我有一个我无法回答的问题，需要额外的一双眼睛来了解情况，所以这里是:

在 Chrome 和 FF 中，我的小动画效果很好(当用户将鼠标悬停在他们所在的 div 上时，同时绘制了 4 个圆圈)。

但是...就 Safari 和 Opera 而言，它们只是不想显示我的动画。我一直在错误控制台上，我收到的消息是:

类型错误:'undefined is not a function (evaluating 'requestAnimationFrame (function {

动画(curPerc/100)

})')

我不确定这里发生了什么，但我认为“动画”函数正在循环，仅在“悬停”函数上工作，当它完成第一个循环时，该函数正在寻找另一个输入，没有收到，然后导致“未定义”错误？不过，我可能会出路! 另外..这并不能解释为什么它可以在 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!

非常感谢，

蒂姆

Answer 1

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

要修复它:在调用它之前，加入这个 shim 来定义 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);
        };
}());