setInterval...requestAnimFrame...requestAnimationFrame..на Safari ARGH ничего не работает

Итак, я прочитал сотни тем. Я отказался от GIF-файлов из-за того, что они плохо поддерживаются в разных браузерах (по умолчанию минимальное число кадров в секунду составляет 4-10 в зависимости от браузера, и при загрузке не выполняется сброс gif или воспроизведения, что работает). Итак, я решил повеселиться с анимированной установкой с использованием JavaScript. Я заметил, что Safari засосал в fps одну вещь, которую я делал раньше, но никогда не задумывался о том, что с тех пор, как я решил, что сделал что-то не так...

Поэтому я создал этот сайт, используя setIntervals, минимизировал общее количество, clearIntervaled их, используя переменную, для которой они были установлены, и даже попытался не объявлять их как глобальные переменные... т.е.

<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, но сафари решил, что 100 = 1 сек?? Я проверил много сайтов, и люди жаловались на это без ответа, или люди говорили, что Safari и Chrome имеют лучшие fps. Итак, я переделал все это, сначала уменьшив общее количество активных setIntervals, а затем преобразовал его в...

 requestAnimFrame

А потом, чтобы...

requestAnimationFrame

но после всего этого он все еще почти не двигается на Safari. Мне нравится, как он работает в IE, и я полагаю, что следующий шаг - сделать зависимую от браузера переменную, которая умножает только все, что есть в сафари... но у меня есть ощущение, что это может не сработать, потому что, возможно, это просто память проблема, которая отстой, потому что, как я понимаю, setInterval запускается реже, чем requestAnimationFrame, так что это может показаться лучшим выбором.

Я могу поставить свой код здесь, но это немного много, и я подумал, что конкретный код может быть менее важным, но страница http://craibwoud.com/index. У меня есть это на версии setInterval прямо сейчас, в то время как я настраиваю коды, но предполагаемая версия для сафари - http://craibwoud.com/indexsaf.

Ох, и я так и не получил

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();
Источник

1 ответ

Safari изначально реализовал его как webkitRequestAnimationFrame. Проверьте это заполнение: https://gist.github.com/paulirish/1579671

Также убедитесь, что он работает в вашей версии Safari: http://caniuse.com/requestanimationframe

Источник
Другие вопросы по тегам