dokładny czas z RequestAnimationFrame

Question

nie znalazłem wiele dokumentacji na ten temat do tej pory. Ogólne wrażenie, jakie dostaję podczas implementacji animacji dla przeglądarki, lepiej jest korzystać z funkcji RequestAnimationFrame w stosunku do standardowych zegarów JavaScript typu bog. Rozumiem, że zegary są niewiarygodne, a ich rozdzielczość może się różnić w zależności od przeglądarki.

Szukałem w tym GIST: https://gist.github.com/1114293#file_anim_loop_x.js

Ale to nie jest dla mnie jasne, w jaki sposób można zapewnić, że animacja transpiruje na określony czas. Na przykład mogę chcieć animować coś od lewej do prawej w ciągu 2 sekund. Czy to jest możliwe przy użyciu RequestAnimationFrame, czy też pokonuje cel?

Answer 1

Tak się składa, miałem podobny problem nie dawno i podszedł z podejściem, które łączy RAF z performance.now(), która działa bardzo skutecznie.

Im teraz w stanie dokonać zegarów z dokładnością do ok 12 miejsc po przecinku:

window.performance = window.performance || {}; 
    window.performance.now = (function() { 
     return performance.now  || 
      window.performance.mozNow || 
      window.performance.msNow  || 
      window.performance.oNow  || 
      window.performance.webkitNow || 
       function() { 
        return new Date().getTime(); 
       }; 
     })(); 

http://jsfiddle.net/CGWGreen/9pg9L/

Answer 2

RequestAnimationFrame jest lepszy w następnej rzeczy: można rysować po sould być najbardziej skuteczne. To znaczy. RequestAnimationFrame może dać lepszą liczbę klatek na sekundę niż tylko zegary, ale dokładny czas może być jeszcze mniej niezawodny. Powinieneś uzyskać aktualny czas, porównać go z wartością z poprzedniej klatki i obliczyć animacje zgodnie z czasem upływającym od ostatniej klatki.

Answer 3

byłoby zaimplementować czasu animacji oparty. W każdej iteracji rAF można zmierzyć upływ czasu w stosunku do poprzedniej iteracji. Znając ten czas delta i "odległość" w pikselach, możesz obliczyć potrzebną prędkość, aby uzyskać 2 sekundy.

W tym artykule z Mozilla Hacks traktuje różne aspekty przy animacji przy stałej szybkości (pikseli/s). Oto fragment, który wyjaśnia podstawowe pojęcia:

animLoop(function(deltaT) { 
    elem.style.left = (left += 10 * deltaT/16) + "px"; 
    if (left > 400) { 
    return false; 
    } 
});