Animacje w MooTools 1.3

17 października, 2010

Płynne animacje elementów to zagadnienie, które bardzo zbliżyło strony WWW oparte o (X)HTML i CSS do stron wykonanych we Flashu. Właściwie patrząc na to co oferuje CSS3 można śmiało stwierdzić, że istnieje coraz mniej efektów stworzonych we Flashu, których nie da się przerobić na efekty wykonane z użyciem JavaScript.

Zawsze doceniałem MooTools za duże możliwości przy tworzeniu animacji. Ponieważ od czasu MooTools 1.1 wiele się zmieniło, chciałbym odświeżyć temat w wydaniu MooTools 1.3.

Spis treści

  1. Klasy związane z animacją
  2. Budowa klasy Fx
  3. Sposoby łączenia animacji
  4. Klasy Fx.Tween i Fx.Morph
  5. Określanie przebiegu animacji
  6. Przykłady
  7. Podsumowanie

Czytaj dalej...

DOMContentLoaded

08 listopada, 2009

Dzisiejszy wpis dedykuję wszystkim wielbicielom zdarzenia DOMContentLoaded. Niestety jak wszystko co dobre, wymaga ono ostrożności w stosowaniu.

Dla zobrazowania sytuacji dwa przykłady.

W MooTools 1.1.1 (niektórzy muszą wciąż na nim bazować - i nie jest to wcale małe grono) implementacja zdarzenia domready sprawia, że w IE powstają czasami dziwne błędy wynikające z tego, że zdarzenie to występuje PRZED wczytaniem kompletnego drzewa dokumentu. Efektem jest z reguły na wpół załadowana strona. Żeby było jeszcze ciekawiej to problem ten występuje tylko w niektórych przypadkach - niestety nie udało mi się jeszcze wykryć kiedy dokładnie to się dzieje ze względu na złożoność stron, które posiadały ten problem. Jedno jest pewne - w MooTools 1.1.1 stosowanie zdarzenia domready właściwie odpada na stronach gdzie użytkownik może swobodnie dodawać nowe moduły z treścią - w konkretnej konfiguracji nasz skrypt może pięknie działać w IE ale wystarczy, że użytkownik włączy dodatkowe moduły i wtedy mogą wystąpić poważne problemy - lepiej nie ryzykować zwłaszcza, że widok strony, która wczytała się do połowy wcale nie powoduje przywołania na myśl tego, że przyczyną może być źle działający skrypt.

Drugi problem tyczy się także stron gdzie mogą się pojawić później dodatkowe elementy. Jako przykład przytoczę tu skryptowe wyrównywanie kolumn - pierwsza myśl przy tworzeniu takowego skryptu jest jasna - niech to wyrównywanie wykona się najszybciej jak to tylko jest możliwe. I wszystko zapewne będzie działać pięknie do momentu w którym na stronie nie pojawi się po jakimś czasie dodatkowy skrypt, który będzie modyfikował wysokość elementów w treści kolumny i oczywiście złośliwie korzystał ze zdarzenia onLoad.

Reasumując ten krótki wpis - decyzja o korzystaniu ze zdarzenia DOMContentLoaded powinna wynikać nie tylko z zalet tego rozwiązania, ale także z przeanalizowania przyszłych losów tworzonej strony - jeżeli wiemy, że strona jest tak zbudowana iż umożliwia użytkownikowi spore zmiany w zakresie układu witryny i dodawanie dodatkowych rozwiązań bez naszego udziału to rada jest krótka - lepiej zapomnieć o stosowaniu tego zdarzenia.

Banalny userJS mojego autorstwa, który ma za zadanie odblokować cytowanie prywatnych wiadomości na blip.pl

W poprzednich częściach kursu nauczyliśmy się poruszać po drzewie dokumentu, tworzyć nowe elementy strony oraz zmieniać ich cechy, odczytywać je oraz przechowywać dodatkowe informacje w elementach. Przyszła pora poznać kilka metod dokonujących znaczących zmian w strukturze dokumentu - dwie z nich poznaliśmy wcześniej - adopt i clone, teraz nauczymy się kilku nowych.

Czytaj dalej...

W kolejnej części kursu poświęconej elementom strony, zajmiemy się dynamicznym tworzeniem elementów, zmienianiem ich atrybutów oraz zapoznamy się z zupełnie nową funkcjonalnością klasy Element - możliwością przechowywania informacji w obiektach tej klasy.

Czytaj dalej...