Dlaczego powolne animacje jQuery są niestabilne?

Question

Mam problem z googlowaniem, ponieważ większość rzeczy, które mogę znaleźć, to animacje, które powinny działać szybko, ale działają powoli. Moje pytanie dotyczy animacji, która ma trwać długo, ale nadal jest gładka.

Utworzyłem ten jsfiddle do wykazania problem: http://jsfiddle.net/93Bqx/

próbuję uczynić elementem powoli przejść do innej pozycji w czasie. Ale animacja jest bardzo niepewna.

Zasadniczo sprowadza się do mniej więcej tak:

$elem.animate({ 
     left: x, 
     top: y 
}, someLargeNumber); 

Zastanawiam się, czy problem jest to, że animacja jest tak powolny, że każdy krok jest mniejszy niż jeden piksel, a więc jest ich zaokrąglania albo 0 albo 1 sprawiając, że wydaje się, że upuszcza klatki, a następnie przesuwa się wszystkie naraz. Ale nie wiem, jak to sprawdzić lub naprawić.

Czy jest lepszy sposób na robienie powolnych animacji, aby były płynne? Miałem podobną, stworzoną z CSS3 i tłumaczącą (x, y), która była gładka, ale niestety potrzebuję więcej elastyczności, niż sądzę, że mogę uzyskać z CSS.

Answer 1

To nie jest dużo gładsza nawet przy użyciu przejścia CSS.

Dodałem Transit jQuery plugin, aby przetestować przejście CSS, i wygląda prawie tak samo.

Kod z drobnych poprawek: http://jsfiddle.net/thirtydot/93Bqx/5/

samego kodu, ale z tranzytem dodania: http://jsfiddle.net/thirtydot/93Bqx/6/.

Myślę, że jest to ograniczenie faktu, że (większość?) Przeglądarek nie wykonuje renderowania subpikselowych. Jak wspomniałeś, element x i y jest zaokrąglany po każdym kroku animacji, a to zaokrąglenie powoduje brzydki efekt "poruszenia".

Wersja przejściowa CSS wygląda wyraźnie lepiej w przypadku mniej patologicznych przypadków testowych. Przeczytaj to, aby uzyskać więcej informacji: http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

Answer 2

Domyślam się, że jest to nieunikniona okazja przy programowej animacji. Może spróbuj ramy specjalizuje się w animacji jak:

http://www.greensock.com/gsap-js/

ale dostosowanie animacji CSS byłoby najlepsze.

Answer 3

Myślę, że ma to coś wspólnego z tym, jak często przesuwasz element. Na przykład, jeśli przesuniesz obiekt raz na sekundę, będzie wydawał się niepewny. Spróbuj zmniejszyć czas między kolejnymi ruchami, a także zmniejszyć odległość między poszczególnymi ruchami. Zobacz przykład http://jsfiddle.net/2K9xP/.

Więc mamy ...

var duration = Math.round(10 * distance); 

zamiast ...

var duration = Math.round(1000 * distance);