search check home clock-o tag tags chevron-left chevron-right chevron-up chevron-down twitter facebook github rss comment comments terminal code

Rotat9r – wtyczka jQuery do tworzenia pokazu slajdów

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.

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

Testy, 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.

Kompatybilność 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.

  • Comandeer

    TideSDK – to to jest jeszcze używane? 😉 szczerze zapomniałem o tym po odkryciu node-webkit, które korzysta z w miarę aktualnego chromium (czyli w sumie powinni zmienić nazwę ;))
    co do animacji CSS3 – owszem, natywnie jQ operuje na czystym JS, ale wiem, że została napisana alternatywna wersja modułu Animations, korzystająca z CSS3 – może to być dość ciekawą opcją
    co do CPU na chrome: to by oznaczało, że wciąż nie ma akceleracji sprzętowej dla efektów nie 3D. jak się sprawa ma przy wykorzystaniu choćby transform: translateZ(0)? dalej tak żre?

  • To już są pytania do autora wtyczki 🙂

  • TideSDK niestety stanęło – ku mojemu zdziwieniu, bo całkiem fajnie to wygląda…

    Sztuczka z 3D nic nie daje niestety – zaznaczam, że pod Linuxem 🙂

    Chodziło mi nie tyle o samo jQuery co podejście do animacji – ciągłe liczenie czegoś w DOMie nie jest dobrym pomysłem, a jest nagminnie stosowane…

  • Mały offtop. Często jak najedzie się na logo na stronie głównej bloga to potem gdzie nie klikniesz to przenosi na główną („zacina” się link z logo).

  • Ciekawe spostrzeżenie, ale nie jestem w stanie go odtworzyć. Z jakiej przeglądarki korzystasz?