Question

所以我已经阅读了数百个主题。我放弃了GIF，因为它们是如何通过浏览器支持得不好（默认的最小fps是4-10，具体取决于浏览器，并且在加载时没有重置gif或播放）。因此，我决定使用javascript对动画装备有一些乐趣。我注意到Safari在我之前做过的一件事上吸了fps，但是从来没有想过太多因为我认为我做错了...

所以我使用setIntervals创建了这个站点，最小化了总数，使用它们设置的var清除它们，甚至尝试不将它们声明为全局变量...即

<script>
     var bob =setInterval("fps();",100);
     var going=0;

      fps(){
          if(going<10){
               ++going;
               document.getElementById('id').style.top=(1+going)+'px';
               document.getElementById("id").src="./elements/pic"+going+".png"; 
          } 

        else{
             clearInterval(bob);
        } 
</script>

在IE上完美运行，但safari决定100 = 1秒？我检查了很多网站，有人抱怨它没有回应，或者有人说Safari和Chrome有更好的fps。所以我重新整理了所有东西，首先减少了活动的setIntervals的总数，然后将其转换为......

 requestAnimFrame

然后......

requestAnimationFrame

但毕竟它仍然几乎没有在Safari上移动。我喜欢它在IE上运行的方式，我认为下一步是制作一个浏览器因变量，它只会增加所有东西，只是它是在野生动物园...但我有一种感觉可能无法工作，因为它可能只是一个记忆问题很糟糕，因为据我所知，setInterval的运行频率低于requestAnimationFrame，因此它似乎是一个更好的选择。

我可以把我的代码放在这里，但它有点多，我认为具体的代码可能不那么重要，但页面是craibwoud.com。我正在调整代码时在setInterval版本上使用它，但所谓的safari友好版本是Craibwoud.com/safari。

哦，我从来没有得到

cancelAnimationFrame/cancelRequestAnimationFrame

工作，所以我不得不

if(value){function();}

如果我需要结束它们，请使用val = false。

很抱歉，如果我的编码有点基础，但我有点新。

编辑：以下是其中一个代码的示例：

function bgfx(){
counter+=.1;

var trans=Math.round(counter); 

if (counter > 7){
    counter= 1;


}

document.getElementById("fx").src='./elements/bdfl'+trans+".png";

if(fxy_v){window.requestAnimationFrame(bgfx);}

else{document.getElementById('fx').src='./elements/bdoff.png';}

}

使用...

进行调用

fxy_v=true;
fxy = bgfx();

Answer 1

Safari最初将其实现为webkitRequestAnimationFrame。查看此polyfill：https://gist.github.com/paulirish/1579671

另外，请确保它适用于您的Safari版本：http://caniuse.com/requestanimationframe

setInterval ... requestAnimFrame ... requestAnimationFrame..n在Safari ARGH上无效

1 个答案: