Javascript setInterval…requestAnimationFrame…requestAnimationFrame..在Safari ARGH上没有任何功能

所以我读了数百条线索。我放弃使用gif是因为它们在跨浏览器中的支持很差（默认的最小fps为4-10，具体取决于浏览器，加载时没有重置gif或播放）。所以我决定用javascript制作一个动画装备，玩得开心点。我注意到Safari在我之前做的一件事上被fps吸引，但我从来没有想过，因为我觉得我做错了什么

因此，我使用setInterval创建了这个站点，最小化了总数，使用设置的变量对它们进行了ClearIntervale，甚至尝试不将它们声明为全局变量…即

<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>

然后去

requestAnimationFrame

但在所有这些之后，它仍然几乎不去旅行。我喜欢它在IE上的运行方式，我想下一步是制作一个浏览器相关变量，它只会在safari上乘以所有的值……但我有一种感觉，可能也不起作用，因为可能这只是一个内存问题，这很糟糕，因为据我所知，setInterval运行的频率比requestAnimationFrame要低，所以它似乎是一个更好的选择

我可以把我的代码放在这里，但它有点多，我认为具体的代码可能不那么重要，但页面是。我现在在调整代码的时候，在setInterval版本上有它，但是应该是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();

---

Safari最初将其实现为webkitRequestAnimationFrame。查看此polyfill：

---

另外，请确保它能在您的Safari版本上运行：

遗憾的是，我以前多次查看该链接。我认为他使用了window.requestAnimationFrame而不是其他人使用的requestAnimationFrame。我将尝试将其添加回，看看是否有帮助。但有一个问题是，所有谈论它的地方都在处理精灵或生成的动画与逐帧的动画，甚至只是简单地移动div。你的答案中没有任何帮助。我甚至在我之前没有用完的页面底部跟踪了链接的链接。刚刚在mac上安装了更新的操作系统，它似乎正在工作（setinterval版本），排除了一个小故障，该故障似乎与单击某个按钮时setTimeout的速度快于requestAnimationFrame有关。同样奇怪的是，requestAnimationFrame版本正在运行，但仍然没有达到应有的速度。有人能帮忙吗？我读过大多数关于requestanimationframe的文章，但没有任何帮助。我把我的setinterval页面放回主页，因为请求要糟糕得多。

fxy_v=true;
fxy = bgfx();