Zakręć ekipą Spider’s Web…

Blog Forum 13.11.2012
Zakręć ekipą Spider’s Web…

… na telefonie:)
jQuery (i Spider’s Web) potęga jest i basta;) W czwartym cyklu opowieści z mchu i paproci, w ramach zrobienia „czegoś tam” przyszło mi do głowy by rozruszać trochę aplikację i dodać jej dynamicznych przejść. Jak to już jest z jQuery, wszystko tam jest proste do zaimplementowania i jeszcze prostsze do konkretnego użycia.
Na odsiecz ruszają oczywiście transformacje i przejścia znane z CSS3. Taki paradoks, że to co osiągało się JavaScriptem zostało przełożone na żąglerkę stylami, a, że mi to jakoś nie do końca pasowało postanowiłem napisać prostą wtyczkę do jQ którą bez problemu może użyć każdy w swojej aplikacji i która moim zdaniem upraszcza korzystanie z tego typu, całkiem miłych dla oka wizualnych efektów.
Jako, że aplikacje piszę pod Androida a środowisko uruchomieniowe to przeglądarka oparta o silnik WebKit, we wtyczce dodane są prefiksy do tej przeglądarki, ale oczywiście każdy może sobie zaimplementować obsługę innych przeglądarek według życzenia (i ich możliwości).
Generalnie transformacje to przejścia które odbywają się w czasie rzeczywistym (0 sekund) , więc siłą rzeczy wtyczka obsługująca przejścia obsługuje także transformacje i staje się niejako uniwersalna. Ale o tym za chwilkę.
Nie upieram się, że użyłem odpowiednich nazw, takie mi po prostu pasują, w źródle mojej wtyczki które załączyłem każdy może je oczywiście ustawić sobie sa jak i zmienić nazwę dodanej metody.
Metoda nosi nazwę transformuj({obiekt_przejścia}, callback);
Domyślny obiekt konfiguracyjny wygląda tak {czas_trwania_przejscia:”0″,
kat:”0″,
skala_w_pionie:”1″,
skala_w_poziomie:”1″,
przesuniecie_w_pionie:”0″,
przesuniecie_w_poziomie:”0″,
skos_w_poziomie:”0″,
skos_w_pionie:”0″,
}
czas_trwania_przejścia – to nie wymaga komentarza , czas podany w sekundach, np. {czas_trwania_przejscia:2}, przy {czas_trwania_przejścia:0} przejście staje się statyczną transformacją.
„kat” – wartość o jaką należy obrócić obiekt podana w stopniach, np. {kat:45} , wartości dodatnie obracają obiekt zgodnie z ruchem wskazówek zegara, ujemne, przeciwnie. np. {kat:-90} obróci zdjęcie (lub cokolwiek innego) do góry nogami przeciwnie do ruchu wskazówek zegara
skala_w_pionie – wartość o jaką należy przeskalować obiekt po osi Y, np. {skala_w_pionie:1.5} , powiększy na przykład zdjęcie o 50%, a {skala_w_pionie: .8} pomniejszy obiekt o 20% – użyta min., na załączonym filmie w transformacji oznaczającej przeczytane newsy, i uważam, że to wygląda bardzo dobrze i jest niezłą wizualnie koncepcją.
skala_w_poziomie – to samo tylko na osi X
przesuniecie_w_pionie – wartość o jaką należy przetransformować obiekt wzdłuż osi Y, np. {przesuniecie_w_pionie:45px}, przesuwa obiekt o 45 pikseli w dół, {przesuniecie_w_poziomie:-60px} przesuwa obiekt o 60 pikseli w lewo
i wreszcie skos (skrzywienie, skos, ukos od słowa wartości skew) obiektu podane w stopniach, np. {skos_w_poziomie:45} lub {skos_w_pionie:-90}
Przykładowy użycie:
[code]
$(„#android_news”).transformuj({czas_trwania_przejscia:2,skala_w_pionie:.8,skala_w_poziomie:.8});
[/code]
spowoduje efektowne płynne cofnięcie newsa jako już np. oglądniętego
a:
[code]
$(‚#pozycje’).transformuj({czas_trwania_przejscia:3,skala_w_pionie:1, skala_w_poziomie:1},function(){$(„#info2”).remove();});
[/code]
spowoduje ładne „wypłynięcie” wcześniej zeskalowanego do zera, panelu z newsami na użytek czytelnika i usunięcie informacji o ładowaniu
Efekt finalny użycia wtyczki jest następujący (nakręcony Jabłkiem, więc w spawie księgi skarg i wniosków prosze pisać do Cupertino;) –
www.dropbox.com/s/mz3xfjhvhsk7y5t/IMG_0045.MOV
Kod wtyczki –
www.dropbox.com/s/gf3xore8pxqgedm/jquery.transform.js
apk. z aplikacją (testowane na Samsungu) –
www.dropbox.com/s/nml7kid3izrzzhs/SW%20-%20przej%C5%9Bcia.apk
Przy okazji dla kolegów z „modern/metro” UI , ciekawy link – jqm-metro-test.cloudfoundry.com/
Jak to powiedział Osioł Shrekowi – „Shrek, nie idź w stronę światła!”;) No dobra, nie będę już podśmiewał się z Blackberry, więc do rzeczy – dla każdego coś miłego –
bit.ly/SjbAQu , www.blackberrydeveloperevents.com/events/webcast/registration/register.html?scoid=1074981337
I dzisiejsza ciekawostka z kanału JQM , panel w stylu Twittera i Facebooka – jpanelmenu.com/
jQuery akbar! i tym harcerskim pozdrowieniem kończę:-)

Dołącz do dyskusji

MAŁO? CZYTAJ KOLEJNY WPIS...

MAŁO? CZYTAJ KOLEJNY WPIS...

Advertisement