jQuery Quicksand — animuj sortowanie i filtrowanie

(20 komentarzy)

W kategoriach: JavaScript , jQuery , Techblog / 12 lutego 2010 [23:24:52]

Tagi technorati:

Operując na kolekcjach danych, często je przeszukujemy albo sortujemy. Zwykle efekt takiego działania widoczny jest natychmiast, z przeskokiem. A gdyby tak animować przesuwanie się przesortowanych elementów? I ładnie znikać elementy odfiltrowane i fajnie wjeżdzać elementami nowymi, tak jak w niektórych aplikacjach na Mac OS X? I najlepiej w jQuery? I za pomocą jednej linii kodu? I bez dodatkowego CSS-a?

Poznaj Quicksanda. Nowy plugin jQuery.

Co tu dużo mówić, wszystko widać na filmiku:

Na stronie projektu znajdziesz demonstracje na żywo, przykłady i dokumentację. Projekt dostępny jest też na Githubie.

Komentarze: Skocz na dół, na górę

  1. Wygląda świetnie, ale nie chciałbym tego oglądać na słabszych maszynach. A można by to zoptymalizować w naprawdę wielu miejscach, bo kod jest po prostu okropny.

  2. Jeśli można zoptymalizować, to świetnie. Github czeka ;).

    W kwestii optymalizacji, to zauważ, że całość wykonuje się w zasadzie przed startem animacji. Więc jedynie można zmniejszyć opóźnienie między klikiem a startem animacji — czyli coś, co już jest niezauważalne poza IE7 na wirtualizowanym Windowsie :P. Cała reszta to kwestia rysowania, skalowania i alphy, czyli do akcji wkracza przeglądarka i system.

  3. Niestety na moim PC (Athlon 3000+, 2.5 GB RAM, GeForce 6600), teraz akurat na Win7 działającym od dobrych kilku dni z kilkoma aplikacjami w tle - działa to nie za szybko. ;)

  4. U mnie w Safari, Chrome i Firefox (mam 2.4 GHz) działa bardzo płynnie.

    Mała płynność to już kwestia Windowsa. Na Mac OS X przeglądarki w większości wykorzystują CoreGraphics, a więc używają mocy karty graficznej do renderowania. Pod Windowsem używa się standardowo GDI+, bardzo prymitywnego rozwiązania, więc z pewnością działa wolniej. Ale Firefox 3.7 i IE9 mają już obsługiwać DirectDraw do rysowania, więc zapowiada się dobrze.

  5. Odpaliłem z ciekawości pod wirtualizowanym Ubuntu (niestety, mało kto przykłada dużą wagę do wydajnej wirtualizacji operacji graficznych na Linuksa…) ale mimo to: zarówno w Firefox jak i Chrome jest płynnie.

  6. Brzmi to jak „działa na komputerze autora, w rozdziałce 800×600”. jQuery faktycznie daje spore możliwości do zarżnięcia przeglądarki, ale też wystarczy się wczytać w dokumentację, albo chociaż zajrzeć do kodu źródłowego… Przyjrzyj się, w ilu miejscach niepotrzebne korzystasz z funkcji jQuery, albo używasz ich w nieoptymalny sposób (np. metoda css), albo opakowujesz elementy w obiekt jQuery, żeby dobrać się do właściwości, które są dostępne natywnie… Można się też spokojnie pozbyć tych each na rzecz zwykłych pętli. I funkcja cssPath, która jeszcze pogarsza sprawę, bo jest jakimś dziwacznym sposobem na identyfikację elementów. Natomiast z $.browser.msie możesz mieć problem w przyszłości, bo kto wie, czy będzie się znajdować w przyszłych wersjach jQuery.

  7. @Wasacz, zgadzam się prawie ze wszystkim co mówisz. Pięknem open source jest to, że zawsze można pacza wysłać. No ale jeśli nikt tego nie zrobi to w wolnej chwili się tym zajmę, projekt w końcu nie jest zakończony. Będę starał się go rozwijać i udoskonalać.

    Jednak jeśli chodzi o ten brak optymalizacji, o którym wspominasz, to jest on niedostrzegalny. Te wszystkie wywołania .css, .each czy $() zachodzą przed puszczeniem animacji w ruch. One służą do wyliczenia docelowych pozycji. Następnie wywołuję .animate i od tego momentu dopiero użytkownik widzi efekt. A ten już jest obsługiwany automatycznie przez system i przeglądarkę. Jeśli animacja działa niepłynnie — kwestia systemu operacyjnego i przeglądarki (albo skomplikowanego designu z mnóstwem CSS3).

    Optymalizacja kodu (można go przepisać na czysty JavaScript, bez użycia frameworku) zmniejszy jedynie opóźnienie między kliknięciem a startem animacji. A ja takiego opóźnienia nie dostrzegam (Firefox, Safari, Opera, Chrome, niezależnie od systemu), a na przeglądarce Microsoftu (7) jest zaledwie ledwo zauważalne i w ogóle nie przeszkadza. Na to jest wpływ. Na samą animację już nie.

    Dzięki za opinię o kodzie, tak czy siak. Po takich słowach go tym bardziej zoptymalizuję :D. Ale to będzie bardziej dla idei i sportu, różnicę w działaniu mało kto zauważy…

  8. RazorJack: Wiesz, trudno tak się właściwie dyskutuje, jeśli nikt niczego nie przetestował i każdy pisze, jak mu się wydaje :) Ale jQuery ma też spory narzut kodu; miałem już takie przypadki, że wydawałoby się „a, to przecież jakieś milisekundy, kto to zauważy”, a jednak po poprawkach rzeczywiście czuć było różnicę. Natomiast wydaje mi się, że tnąca się animacja, to jeszcze nie koniec (z animacjami najgorzej radziła sobie zawsze Opera, ale w 10.50 jest znacznie lepiej), procesor ma jednak sporo do przetrawienia, bo trochę skakania po DOM tam jest, a to nigdy nie było wydajne niestety :)

  9. Ostatni link we wpisie („dostępny jest też na Githubie”) nie wskazuje na GitHuba tylko na Twoją stronę domową — domyślam się że niepoprawnie.

  10. Poprawione, dzięki.

  11. Dla mnie takie efekty tylko spowalniają pracę. Rozumiem znikające komunikaty itd., ale to akurat moim zdaniem przerost formy nad treścią.

  12. Pomysł fajny, ale strasznie powolne :)
    U mnie na Athlonie 1700+ XP z 1gb ramu, Opera 10.10 i Win 2003 nie da się tego używać :>
    W większości przypadków mam 2-4 klatki pomiędzy stanem początkowym a końcowym.
    Tylko gdy wyświetlone są 4 ikonki (utilities) działa płynnie. Jak dla mnie, to te ikonki są za duże trochę, z mniejszymi na pewno działałoby szybciej :)

  13. @irider
    Jak masz 24" monitor i wyskoczy jakiś popup, można nie zauważyć. Ale jak wyskakuje z animacją, są większe szanse, że dojrzysz. W dobrych interfejsach (jak iPhone np) proces jest animowany (np wejście do innego okna), żeby użytkownik cały czas miał połączenie z interfejsem i dokładnie widział proces tego, co się dzieje na ekranie. Taka animacja to pokazanie procesu. Oczywiście, zgadzam się, że 90% tego pluginu to czyste eye-candy. Ale w 10% jest to też przydatne dla użytkownika, który kliknął i dokładnie widzi, że jego kliknięcie coś zmieniło.

    @epi
    No niestety, efekt potrzebuje trochę mocy. Najgorszy jest w tym wszystkim zacofany Windows, który nadal dla podstawowych operacji nie ma przyspieszenia sprzętowego karty graficznej. Na szczęście IE9 i Firefox 3.7 będą rysować przez Direct2D, więc Opera i Chrome pewnie przykład wezmą i niedługo Windowsy się zrównają z OS X i Linuksem i będzie wszędzie płynnie :).

  14. @RazorJack: http://my.opera.com/core/blog/2009/02/04/vega

  15. Wypuściłem wersję 1.2. Sporo usprawnień wydajności i możliwe jest jeszcze dodatkowe dopalenie: http://razorjack.net/quicksand/docs-and-demos.html#performance — odpaliłem ten zoptymalizowany (ot, wyłączony CSS3 transforms z którymi Firefox sobie kiepsko radzi pod Windowsem + parę drobnostek, wszystko w opcjach wywołania, no i oczywiście nowa wersja 1.2) i jest płynnie. Testowałem we wszystkich przeglądarkach na 5-letnim kompie z Win XP i wszędzie było mega płynnie. Dzięki za motywację do optymalizacji.

  16. Gratulacje, spora różnica :)

  17. haha, brawa. Twój plugin został umieszczony na liście http://speckyboy.com/2010/03/01/25-amazing-and-fresh-jquery-plugins/ :)

  18. I stamtąd trafiłeś do http://www.smashingmagazine.com/2010/03/12/45-fresh-useful-javascript-and-jquery-techniques-and-tools/ :)

  19. plugin świetny ale walidacji mi nie przechodzi strona przez "data-id", można to jakoś ominąć?

  20. plugin naprawdę dobry, właśnie przeglądałem smashingmagazine i postanowiłem go wykorzystać w swoim folio ;)

    Ale mam mały problem, ponieważ folio już jest naszpikowane skryptami, a głównie to lightbox no i mały hover fade, a że kompletna ze mnie noga jeśli chodzi o javascript, to nie mam pojęcia jak zastosować tę funkcję callback...:/ siedzę nad tym już od 22 ;)

    Na stronce Quicksand, piszesz, że wystarczy:

    $("#content").quicksand($("#data > li"),
    {
    duration: 1000,
    }, function() { // callback function
    $('#content a').tooltip();
    }
    );

    więc jako typowy lamer, wstawiłem zamiast 'tooltip' 'lightbox' i nie bardzo działa... proszę o pomoc w miarę możliwości...

Dodaj komentarz na temat

Zanim skomentujesz...

W komentarzach działają znaczniki Textile.
Zastrzegam sobie prawo do edycji Twojego komentarza tylko i wyłącznie w celach estetycznych (naprawienie źle wstawionego kodu, itp). Nie zmieniam ich treści, ortografii, interpunkcji. Jeśli odczuwasz potrzebę edycji swojego komentarza, skontaktuj się ze mną, a zdziałamy co trzeba.