Rotat9r – wtyczka jQuery do tworzenia pokazu slajdów

Animacje przy pomocy JS nie należą do najszybszych - nie są sprzętowo wspierane zwłaszcza przez urządzenia mobilne. Każdy efekt tworzony jest przez zmianę w pętli np. wymiarów, późniejsze renderowanie elementu DOM, a następnie odmalowywanie. Taki sposób tworzenia animacji nie tylko przeszkadza w tworzeniu wydajnego, ale też prostego do rozwijania kodu.

Najpopularniejsza wtyczka do tworzenia animowanych pokazów slajdów: jQuery Cycle Plugin ma wreszcie nowoczesną alternatywę. Wtyczka rotat9r działa w oparciu o animacje CSS3 co daje znacznie lepsze wydajnościowo wyniki od pierwowzoru. Niezależnie od przeglądarki animacje są płynne i szybkie.

Sekcja 1Kolejny plugin jQuery do pokazu slajdów?

W dużym uproszczeniu pluginy do jQuery albo służą rozbudowie logiki Front-end albo dodawaniu efektów specjalnych. Niestety wiele rozwiązań z tej drugiej grupy zostało stworzonych przed publikacją specyfikacji CSS3, a co za tym idzie nie mogło wykorzystywać efektów, które on daje. Samo jQuery w celu zapewnienia kompatybilności wstecznej stosuje niewydajne animacje JS. Wtyczka rotat9r jest napisana z myślą o maksymalnym ograniczeniu animacji JS i zwiększeniu wydajności wyświetlania na urządzeniach mobilnych.

Szczególnie istotny jest fakt pełnej funkcjonalności na urządzeniach mobilnych niezależnie od systemu. Wszystkie popularne systemy (Android, iOS, Blackberry, Windows Phone) wspierają efekty, których dostarcza rotat9r. Na obecnym etapie na platformie Android mogą występować pewne problemy z działaniem wielu instancji pluginu w ramach jednej podstrony.

Istotnym faktem jest to, że składnia użycia wtyczki rotat9r jest IDENTYCZNA jak w przypadku wtyczki Cycle co daje możliwość podmiany biblioteki w naszym kodzie bez żadnych dodatkowych modyfikacji. Wtyczka rotat9r obsługuje większość opcji pierwowzoru, a poza tym wyposażona jest w kilka nowych efektów przejść, których ciągle przybywa. Efekty są tworzone bez użycia przeliczania wartości animowanych parametrów w JavaScript. W przypadku efektów typu complex użycie JS ogranicza się do uruchamiania w odpowiednim czasie różnych efektów przejść z wykorzystaniem CSS3.

Sekcja 2Testy, testy, testy

Dzięki narzędziom takim jak audit panel w przeglądarce Google Chrome można obserwować zużycie pamięci, ilość klatek na sekundę czy obciążenie procesora przez aplikacje webowe. Każdy więc może przetestować wydajność wtyczki. Autorzy porównując animacje CSS3 z animacjami dostarczanymi przez wtyczkę cycle odnotowali ponad dwukrotnie większą ilość klatek na sekundę i 30% mniejsze zużycie pamięci. Ciekawostką jest zużycie procesora, które na przeglądarce Google Chrome sięga chwilami 100%, natomiast w Firefoxie jest minimalne.

Autorzy na stronie projektu w jednym z przykładów pokazują porównanie wtyczek cycle i rotat9r na tym samym efekcie animacji - różnice są zauważalne zarówno na wolniejszych komputerach jak i urządzeniach mobilnych.

Sekcja 3Kompatybilność wsteczna

Wtyczka była rozwijana z myślą o nowoczesnych przeglądarkach internetowych, dlatego próżno szukać kompatybilności z Internet Explorerem czy starymi wersjami Webkita - autorzy jednak zamierzają wprowadzić wsparcie tego drugiego ze względu na częste stosowanie starego silnika Webkita choćby w TideSDK.

Plugin można pobrać ze strony autora wtyczki: strona wtyczki

Autor bloga nie odpowiada za treść powyższego tekstu. Jest to informacja prasowa dostarczona przez twórcę oprogramowania.