Question

我有一个问题，我没有答案，需要额外的一双眼睛来了解情况，所以在这里：

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

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

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

动画（curPerc / 100）

}）'）

我不确定这里发生了什么，但我认为'animate'函数循环，只处理'hover'函数，当它完成第一个循环时，函数正在寻找另一个输入，没有收到一个，然后导致'未定义'错误？我可以在这方面做出决定！另外..这并不能解释为什么它适用于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功能。

要解决此问题：在调用它之前，请使用此垫片定义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);
        };
}());

requestAnimationFrame无法在Safari / Opera中运行。撕掉我的头发

1 个答案: