Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00104 005558 13609710 na godz. na dobę w sumie
Frameworki JavaScript. Projektowanie interaktywnych i dynamicznych stron WWW - książka
Frameworki JavaScript. Projektowanie interaktywnych i dynamicznych stron WWW - książka
Autor: Liczba stron: 240
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-8865-4 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> javascript - programowanie
Porównaj ceny (książka, ebook, audiobook).

Komponuj zjawiskowe animacje w JavaScripcie!

Stworzenie od zera kodu zaawansowanej aplikacji czy strony WWW jest dziś praktycznie niemożliwe — nie mówiąc już o tym, że niepotrzebne i zdecydowanie zbyt czasochłonne. Znacznie lepiej jest skorzystać z fragmentów gotowego kodu o określonym działaniu. W erze dominacji animowanych, interaktywnych i dynamicznych witryn internetowych oraz wymagających użytkowników warto poszerzać swoją wiedzę na temat animacji i efektów możliwych do uzyskania dzięki różnym frameworkom, bibliotekom i platformom programistycznym.

W tej książce znajdziesz mnóstwo cennych wiadomości o wykorzystaniu najlepszych, najbardziej innowacyjnych źródeł gotowego kodu dla JavaScriptu. Składa się ona z sześciu rozdziałów — każdy z nich traktuje o wykorzystaniu jednego z tych źródeł w zakresie: transformacji 2D i 3D elementów HTML, sortowania, przeciągania lub przemieszczania elementów HTML wzdłuż osi lub po ścieżce (krzywej) ruchu, a także symulowania ruchu jednostajnego lub zmiennego. Oprócz tego opisano tu sterowanie procesem odtwarzania animacji poprzez kontrolowanie czasu jej trwania i manipulowanie kolejnością wykonywania poszczególnych sekwencji. Jeśli chcesz tworzyć piękne animacje, zacznij czytać już dziś!

Projektuj animacje i wizualne efekty specjalne z bibliotekami:

Zostań mistrzem interaktywnych stron WWW!

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Redaktor prowadzący: Ewelina Burska Projekt okładki: Studio Gravite/Olsztyn Obarek, Pokoński, Pazdrijowski, Zaprucki Materiały graficzne na okładce zostały wykorzystane za zgodą Shutterstock. Wydawnictwo HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: helion@helion.pl WWW: http://helion.pl (księgarnia internetowa, katalog książek) Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/frajav Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Pliki z przykładami omawianymi w książce można znaleźć pod adresem: ftp://ftp.helion.pl/przyklady/frajav.zip ISBN: 978-83-246-8865-4 Copyright © Helion 2014 Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis tre(cid:264)ci Wst(cid:246)p .............................................................................................. 7 Rozdzia(cid:228) 1. Animacje i wizualne efekty specjalne frameworka CreateJS ............. 11 Animacje i wizualne efekty specjalne frameworka CreateJS — wprowadzenie ............. 11 Typy animacji (efekty przenikania) ....................................................................... 12 Klasy, metody, argumenty, parametry, elementy, w(cid:225)a(cid:286)ciwo(cid:286)ci i opcje efektów specjalnych ........................................................................................... 14 Rozdzia(cid:228) 2. Animacje i wizualne efekty specjalne biblioteki Dojo Toolkit ............ 47 Animacje i wizualne efekty specjalne biblioteki Dojo Toolkit — wprowadzenie .......... 47 Typy animacji (efekty przenikania) ....................................................................... 48 Klasy, metody, argumenty, parametry, elementy, w(cid:225)a(cid:286)ciwo(cid:286)ci i opcje efektów specjalnych ........................................................... 48 Rozdzia(cid:228) 3. Animacje i wizualne efekty specjalne biblioteki Script.aculo.us Web 2.0 ......................................................................................... 75 Animacje i wizualne efekty specjalne biblioteki Script.aculo.us Web 2.0 — wprowadzenie ............................................................................................................ 76 Parametry, metody i w(cid:225)a(cid:286)ciwo(cid:286)ci efektów specjalnych ......................................... 76 Typy animacji (efekty przenikania) ....................................................................... 78 Podstawowe efekty specjalne ................................................................................ 80 Kombinowane efekty specjalne ............................................................................. 88 Pomocnicze efekty specjalne ............................................................................... 102 Tworzenie animacji z wykorzystaniem parametru delay ..................................... 109 Zachowania sortowania (ang. Sortable), przeci(cid:261)gania (ang. Drag) i upuszczania (ang. Drop) oraz suwaki (ang. Slider) ........................................ 110 Rozdzia(cid:228) 4. Animacje i wizualne efekty specjalne frameworka MooTools .......... 123 Animacje i wizualne efekty specjalne frameworka MooTools — wprowadzenie ........ 123 Typy animacji (efekty przenikania) ..................................................................... 124 Klasy, metody, argumenty, parametry, elementy, w(cid:225)a(cid:286)ciwo(cid:286)ci, wtyczki i opcje efektów specjalnych ............................................ 126 Klasa Tips ........................................................................................................... 151 Klasa Mask.Fx .................................................................................................... 154 Kup książkęPoleć książkę 6 Frameworki JavaScript. Projektowanie interaktywnych i dynamicznych stron WWW Rozdzia(cid:228) 5. Animacje i wizualne efekty specjalne platformy GreenSock Animation Platform JavaScript (GSAPJS) ....................................... 159 Animacje i wizualne efekty specjalne platformy GSAPJS — wprowadzenie .............. 160 Typy animacji (efekty przenikania) ..................................................................... 160 Klasy, metody, argumenty, parametry, elementy, w(cid:225)a(cid:286)ciwo(cid:286)ci i opcje efektów specjalnych ......................................................................................... 162 Rozdzia(cid:228) 6. Animacje i wizualne efekty specjalne biblioteki Yahoo! User Interface (YUI) ..................................................................... 215 Animacje i wizualne efekty specjalne biblioteki Yahoo! User Interface — wprowadzenie .......................................................................................................... 215 Typy animacji (efekty przenikania) ..................................................................... 216 Klasy, metody, argumenty, parametry, elementy, w(cid:225)a(cid:286)ciwo(cid:286)ci, atrybuty i opcje efektów specjalnych ............................................ 217 Skorowidz .................................................................................... 237 Kup książkęPoleć książkę Wst(cid:246)p Frameworki, biblioteki i platformy obiektowego j(cid:246)zyka programowania JavaScript a tworzenie animowanych i interaktywnych witryn internetowych Projektowanie animowanych stron internetowych z wykorzystaniem frameworków, bibliotek i platform programistycznych skryptowego j(cid:266)zyka programowania JavaScript jest obecnie standardem powszechnie uznanym i stosowanym przez projektantów i pro- gramistów stron WWW. Funkcjonalno(cid:286)ci programistyczne frameworków u(cid:225)atwiaj(cid:261) two- rzenie animowanych, interaktywnych i dynamicznych stron internetowych z wykorzy- staniem ró(cid:298)nego rodzaju zaawansowanych efektów specjalnych. Te ostatnie z kolei umo(cid:298)liwiaj(cid:261) budowanie animacji o wysokim stopniu skomplikowania i wielowarstwo- wej z(cid:225)o(cid:298)ono(cid:286)ci, charakteryzuj(cid:261)cych si(cid:266) szczególn(cid:261) elastyczno(cid:286)ci(cid:261), p(cid:225)ynno(cid:286)ci(cid:261) i wydaj- no(cid:286)ci(cid:261). W zwi(cid:261)zku z powy(cid:298)szym frameworki znajduj(cid:261) szerokie zastosowanie w pro- cesach projektowania elementów interfejsu u(cid:298)ytkownika, takich jak wid(cid:298)ety (ang. Widgets), etykiety (ang. Tabs), dymki (ang. Tooltips), okna dialogowe (ang. Dialog win- dows), kontrolki (ang. Controls), suwaki (ang. Sliders), paski stanu lub post(cid:266)pu (ang. Pro- gressbars), przyciski (ang. Buttons), systemy nawigacji menu (ang. Menu), banery i rotatory reklamowe (ang. Banner rotators), pokazy slajdów (ang. Slideshows), galerie fotografii (ang. Galleries), kalendarze (ang. Calendar) czy formularze kontaktowe (ang. Contact forms). Ponadto nale(cid:298)y podkre(cid:286)li(cid:252), (cid:298)e strony WWW zaprojektowane w oparciu o frameworki s(cid:261) poprawnie wy(cid:286)wietlane przez wi(cid:266)kszo(cid:286)(cid:252) najpopularniejszych przegl(cid:261)darek internetowych (Firefox, Chrome, Internet Explorer, Opera czy Safari), jak równie(cid:298) s(cid:261) kompatybilne z najpopularniejszymi przegl(cid:261)darkami uruchamianymi na systemach operacyjnych urz(cid:261)dze(cid:276) mobilnych (iOS, Android czy Blackberry). W ko(cid:276)cu nale(cid:298)y doda(cid:252), (cid:298)e frameworki gwarantuj(cid:261) oszcz(cid:266)dno(cid:286)(cid:252) czasu i wygod(cid:266) w procesach two- rzenia czy projektowania animowanych witryn WWW. Kup książkęPoleć książkę 8 Frameworki JavaScript. Projektowanie interaktywnych i dynamicznych stron WWW Co znajdziesz w tej ksi(cid:241)(cid:276)ce Ksi(cid:261)(cid:298)ka sk(cid:225)ada si(cid:266) z sze(cid:286)ciu niezale(cid:298)nych rozdzia(cid:225)ów prezentuj(cid:261)cych zastosowanie frameworków (MooTools1 i CreateJS2 z modu(cid:225)ami EaselJS oraz TweenJS), bibliotek (Dojo Toolkit3, Script.aculo.us Web 2.04 i Yahoo! User Interface — YUI5) oraz platform programistycznych (GreenSock Animation Platform JavaScript — GSAPJS 6) skryp- towego j(cid:266)zyka JavaScript w tworzeniu animowanych, interaktywnych i dynamicznych stron WWW. Autor celowo nie uwzgl(cid:266)dni(cid:225) w ksi(cid:261)(cid:298)ce biblioteki jQuery, której po(cid:286)wi(cid:266)ci(cid:225) odr(cid:266)bn(cid:261) publikacj(cid:266)7. Wybór tych, a nie innych frameworków, bibliotek czy platform nie by(cid:225) przypadkowy, a podyktowany przez szereg czynników istotnych z punktu widzenia projektantów czy programistów witryn internetowych. Za podstawowe kryterium doboru autor przyj(cid:261)(cid:225) popularno(cid:286)(cid:252) wykorzystywania danego frameworka, biblioteki czy platformy na rynku webmasterskim. Omówione w ksi(cid:261)(cid:298)ce frameworki, biblioteki i platformy znalaz(cid:225)y szero- kie zastosowanie m.in. na portalach internetowych najwi(cid:266)kszych (cid:286)wiatowych firm, kor- poracji, koncernów, instytucji czy organizacji, takich jak: IBM, Apple, Intel, Android, NASA, Cisco, Alcatel-Lucent, W3C, Vimeo, Ferrari, Formu(cid:225)a1, Jeep, Gucci czy IKEA oraz na wielu innych. Kolejnym warunkiem, jaki musia(cid:225)y spe(cid:225)ni(cid:252) dane framework, biblioteka czy platforma, by(cid:225)o posiadanie profesjonalnego interfejsu programowania aplikacji oraz rozbudowanej dokumentacji. Ostatnie kryterium dotyczy(cid:225)o ju(cid:298) stricte innowacyjnych funkcjonalno(cid:286)ci programistycznych, które mo(cid:298)na zastosowa(cid:252) w pro- jektach animowanych witryn internetowych czy aplikacji sieciowych. W zwi(cid:261)zku z powy(cid:298)szym w ksi(cid:261)(cid:298)ce zaprezentowane zosta(cid:225)y zagadnienia tworzenia zaawansowanych, interaktywnych animacji w oparciu o ró(cid:298)norodne wizualne efekty specjalne, m.in. takie jak: (cid:141) transformacje dwuwymiarowe (2D) i trójwymiarowe (3D) elementów HTML (skalowanie, pochylanie i obracanie), (cid:141) pokazywanie lub ukrywanie elementów HTML poprzez zmian(cid:266) kolorystki, wielko(cid:286)ci rozmiarów, stopnia przezroczysto(cid:286)ci, skali nat(cid:266)(cid:298)enia rozmycia czy cz(cid:266)stotliwo(cid:286)ci i intensywno(cid:286)ci wy(cid:286)wietlania, (cid:141) na(cid:286)ladowanie czynno(cid:286)ci rozwijania, zwijania, rozk(cid:225)adania, sk(cid:225)adania, potrz(cid:261)sania, wje(cid:298)d(cid:298)ania, wyje(cid:298)d(cid:298)ania czy podzia(cid:225)u elementów HTML na kilka mniejszych cz(cid:266)(cid:286)ci, 1 http://mootools.net/ 2 http://www.createjs.com/#!/CreateJS 3 http://dojotoolkit.org/ 4 http://script.aculo.us/ 5 http://yuilibrary.com/ 6 http://www.greensock.com/gsap-js/ 7 W. Majkowski, jQuery. Tworzenie animowanych witryn internetowych, Helion 2013. Kup książkęPoleć książkę Wst(cid:246)p 9 (cid:141) sortowanie, przeci(cid:261)ganie lub przemieszczanie elementów HTML wzd(cid:225)u(cid:298) osi x, y i z lub po (cid:286)cie(cid:298)ce (krzywej) ruchu, (cid:141) symulowanie ruchu jednostajnego lub zmiennego poprzez p(cid:225)ynne wyg(cid:225)adzenie oraz kontrolowane zwi(cid:266)kszenie b(cid:261)d(cid:296) zmniejszenie pr(cid:266)dko(cid:286)ci, (cid:141) sterowanie procesem odtwarzania animacji poprzez kontrolowanie czasu jej trwania i manipulowanie kolejno(cid:286)ci(cid:261) wykonywania poszczególnych jej sekwencji. Dla kogo przeznaczona jest ta ksi(cid:241)(cid:276)ka Ksi(cid:261)(cid:298)ka, ze wzgl(cid:266)du na szeroki zakres podejmowanej problematyki, dotycz(cid:261)cej animo- wania witryn internetowych, dedykowana jest zarówno (cid:286)rednio zaawansowanym pro- jektantom stron WWW, jak i pocz(cid:261)tkuj(cid:261)cym webmasterom. Tym drugim zg(cid:225)(cid:266)bienie wiedzy prezentowanej w ksi(cid:261)(cid:298)ce u(cid:225)atwi fakt, i(cid:298) zawiera ona komplet pi(cid:266)(cid:252)dziesi(cid:266)ciu o(cid:286)miu gotowych, praktycznych przyk(cid:225)adów, które z powodzeniem mo(cid:298)na zastosowa(cid:252) w tworzonych projektach internetowych. Jak uczy(cid:232) si(cid:246) z pomoc(cid:241) tej ksi(cid:241)(cid:276)ki Charakter i budowa ksi(cid:261)(cid:298)ki pozwalaj(cid:261) na szybki, (cid:225)atwy i zrozumia(cid:225)y sposób nauki sze- (cid:286)ciu ró(cid:298)nych frameworków, bibliotek lub platform programistycznych obiektowego j(cid:266)zyka JavaScript. Autor postawi(cid:225) sobie za cel praktyczny wymiar nauki poprzez zapre- zentowanie zestawu gotowych przyk(cid:225)adów, które mo(cid:298)na zastosowa(cid:252) w (cid:286)rodowisku pro- dukcyjnym. W zwi(cid:261)zku z tym, tre(cid:286)(cid:252) merytoryczna ksi(cid:261)(cid:298)ki zawiera wy(cid:225)(cid:261)cznie niezb(cid:266)dne informacje potrzebne do ich zrozumienia i stosowania. W katalogu przyklady znajduje si(cid:266) strona internetowa zawieraj(cid:261)ca zestaw pi(cid:266)(cid:252)dziesi(cid:266)ciu o(cid:286)miu praktycznych przyk(cid:225)a- dów prezentowanych w poszczególnych jej rozdzia(cid:225)ach. By rozwin(cid:261)(cid:252) zaawansowane umiej(cid:266)tno(cid:286)ci, kompetencje czy kwalifikacje, autor zaleca eksperymentowanie na goto- wych przyk(cid:225)adach. Na rysunku W.1 zamieszczony zosta(cid:225) zrzut ekranu strony WWW zawieraj(cid:261)cej zestaw praktycznych przyk(cid:225)adów w oknie przegl(cid:261)darki Firefox. Materia(cid:228)y Wszystkie niezb(cid:266)dne materia(cid:225)y (kompletne kody (cid:296)ród(cid:225)owe JavaScript, HTML, CSS oraz pliki graficzne) w postaci gotowych przyk(cid:225)adów przeznaczonych do zastosowania na stronach WWW mo(cid:298)na znale(cid:296)(cid:252) pod adresem: ftp://ftp.helion.pl/przyklady/frajav.zip. Kup książkęPoleć książkę 10 Frameworki JavaScript. Projektowanie interaktywnych i dynamicznych stron WWW Rysunek W.1. Wizualizacja strony WWW zawieraj(cid:261)cej zestaw praktycznych przyk(cid:225)adów Kup książkęPoleć książkę Rozdzia(cid:228) 1. Animacje i wizualne efekty specjalne frameworka CreateJS Po przeczytaniu tego rozdzia(cid:225)u b(cid:266)dziesz potrafi(cid:225): (cid:141) rysowa(cid:252), stylizowa(cid:252) i animowa(cid:252) grafik(cid:266) wektorow(cid:261) za pomoc(cid:261) skryptów j(cid:266)zyka programowania JavaScript, (cid:141) tworzy(cid:252) zaawansowane animacje z wykorzystaniem grafiki wektorowej osadzonej w elemencie canvas1 HTML5. Animacje i wizualne efekty specjalne frameworka CreateJS — wprowadzenie CreateJS wraz z modu(cid:225)ami EaselJS i TweenJS jako framework j(cid:266)zyka JavaScript udo- st(cid:266)pnia m.in.: (cid:141) klas(cid:266) Tween umo(cid:298)liwiaj(cid:261)c(cid:261) tworzenie zaawansowanych animacji, (cid:141) klas(cid:266) Text umo(cid:298)liwiaj(cid:261)c(cid:261) wy(cid:286)wietlanie tekstu jako grafiki wektorowej, (cid:141) dwie klasy umo(cid:298)liwiaj(cid:261)ce rysowanie grafiki wektorowej; s(cid:261) to Shape i Graphics, (cid:141) trzy klasy umo(cid:298)liwiaj(cid:261)ce transformacj(cid:266) w(cid:225)a(cid:286)ciwo(cid:286)ci barw: ColorFilter, ColorMatrixFilter i ColorMatrix, 1 http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas- element Kup książkęPoleć książkę 12 Frameworki JavaScript. Projektowanie interaktywnych i dynamicznych stron WWW (cid:141) klas(cid:266) BlurFilter umo(cid:298)liwiaj(cid:261)c(cid:261) zastosowanie efektu pionowego i (lub) poziomego rozmycia dla wy(cid:286)wietlanego obiektu, (cid:141) klas(cid:266) Stage umo(cid:298)liwiaj(cid:261)c(cid:261) wy(cid:286)wietlanie rysowanej grafiki wektorowej na tzw. scenie, (cid:141) klas(cid:266) Ticker i metod(cid:266) addEventListener() umo(cid:298)liwiaj(cid:261)ce automatyzowanie procesu aktualizowania odtwarzanych animacji na scenie, (cid:141) osiem metod wspomagaj(cid:261)cych tworzenie zaawansowanych animacji: to(), wait(), call(), update(), cache(), container(), addChild() i removeChild(), (cid:141) osiem metod rysowania ró(cid:298)nych linii i kszta(cid:225)tów jako grafiki wektorowej: Rect(), drawRoundRectComplex(), drawPolyStar(), drawCircle(), drawEllipse(), lineTo(), arcTo() i bezierCurveTo(), (cid:141) siedem metod stylizowania linii i kszta(cid:225)tów: getRGB(), getHSL(), beginFill(), endFill(), beginStroke(), endStroke() i setStrokeStyle(), (cid:141) czterna(cid:286)cie typów animacji (efektów przenikania). Typy animacji (efekty przenikania) Framework CreateJS udost(cid:266)pnia czterna(cid:286)cie typów animacji (efektów przenikania)2: 1. back, 2. bounce, 3. circ, 4. cubic, 5. elastic, 6. get, 7. getBack, 8. getElastic, 9. getPow, 10. linear, 11. quad, 12. quart, 13. quint, 14. sine. 2 http://www.createjs.com/Docs/TweenJS/classes/Ease.html Kup książkęPoleć książkę Rozdzia(cid:228) 1. (cid:105) Animacje i wizualne efekty specjalne frameworka CreateJS 13 Efekty przenikania umo(cid:298)liwiaj(cid:261) zmian(cid:266) wizualizacji przebiegu animacji poprzez zasto- sowanie m.in. nast(cid:266)puj(cid:261)cych funkcjonalno(cid:286)ci: (cid:141) p(cid:225)ynnego wyg(cid:225)adzenia ruchu, (cid:141) kontrolowanego zwi(cid:266)kszenia lub zmniejszenia pr(cid:266)dko(cid:286)ci ruchu, (cid:141) wykonania ruchu w ty(cid:225), a nast(cid:266)pnie w przód, (cid:141) symulowania m.in. ruchów odbijanej pi(cid:225)ki, rozci(cid:261)ganej elastycznej ta(cid:286)my czy b(cid:225)yskawicznego przesuni(cid:266)cia. Dzia(cid:225)anie poszczególnych typów animacji (efektów przenikania) opisane zosta(cid:225)o w tabeli 1.1. Tabela 1.1. Typy animacji (efekty przenikania) Typ Opis dzia(cid:228)ania Rozpoczyna, kontynuuje i ko(cid:276)czy animacj(cid:266) ze sta(cid:225)(cid:261) pr(cid:266)dko(cid:286)ci(cid:261). Rozpoczyna animacj(cid:266) z pr(cid:266)dko(cid:286)ci(cid:261) równ(cid:261) zero, a nast(cid:266)pnie przyspiesza. Rozpoczyna animacj(cid:266) z pe(cid:225)n(cid:261) pr(cid:266)dko(cid:286)ci(cid:261), a nast(cid:266)pnie zwalnia. linear get backIn bounceIn circIn cubicIn elasticIn getBackIn getElasticIn getPowIn quadIn quartIn quintIn sineIn backOut bounceOut circOut cubicOut elasticOut getBackOut getElasticOut getPowOut quadOut quartOut quintOut sineOut Kup książkęPoleć książkę 14 Frameworki JavaScript. Projektowanie interaktywnych i dynamicznych stron WWW Tabela 1.1. Typy animacji (efekty przenikania) — ci(cid:261)g dalszy Typ Opis dzia(cid:228)ania backInOut bounceInOut circInOut cubicInOut elasticInOut getBackInOut getElasticInOut getPowInOut quadInOut quartInOut quintInOut sineInOut none Rozpoczyna animacj(cid:266) z pr(cid:266)dko(cid:286)ci(cid:261) równ(cid:261) zero, nast(cid:266)pnie przyspiesza do po(cid:225)owy trwania animacji, po czym zwalnia do pr(cid:266)dko(cid:286)ci równej zero. Efekt nie animuje elementu. Klasy, metody, argumenty, parametry, elementy, w(cid:228)a(cid:264)ciwo(cid:264)ci i opcje efektów specjalnych Dokumentacja interfejsu programowania aplikacji frameworka CreateJS3 zawiera m.in. zbiory klas, metod, argumentów, parametrów, elementów, w(cid:225)a(cid:286)ciwo(cid:286)ci i opcji efektów specjalnych, które razem tworz(cid:261) integralne cz(cid:266)(cid:286)ci kodu (cid:296)ród(cid:225)owego. Ponadto specyfika- cja oferuje zestaw regu(cid:225) i zasad okre(cid:286)laj(cid:261)cych poprawno(cid:286)(cid:252) pisania sk(cid:225)adni skryptów. Przyk(cid:225)ad sk(cid:225)adni kodu (cid:296)ród(cid:225)owego frameworka CreateJS osadzonej w strukturze doku- mentu HTML i sk(cid:225)adaj(cid:261)cej si(cid:266) z klas, metod, parametrów oraz w(cid:225)a(cid:286)ciwo(cid:286)ci efektów specjalnych wygl(cid:261)da nast(cid:266)puj(cid:261)co: !doctype html html lang= pl head meta charset= utf-8 !--Okre(cid:286)lenie (cid:286)cie(cid:298)ki do pliku style_animacja_1.css-- link href= style_css/style_animacja_1.css rel= stylesheet type= text/css !--Okre(cid:286)lenie (cid:286)cie(cid:298)ki do pliku createjs-2013.12.12.min.js umieszczonego na serwerze zewn(cid:266)trznym-- script src= http://code.createjs.com/createjs-2013.12.12.min.js /script !--Okre(cid:286)lenie (cid:286)cie(cid:298)ki do pliku createjs-2013.12.12.min.js umieszczonego w katalogu na lokalnym (cid:180)dysku komputera-- script type= text/javascript src= framework_createjs/createjs- (cid:180)2013.12.12.min.js /script !--Sk(cid:225)adnia kodu (cid:296)ród(cid:225)owego frameworka CreateJS-- script type= text/javascript var canvas; var stage; 3 http://www.createjs.com/#!/CreateJS Kup książkęPoleć książkę Skorowidz A API, Application Programming Interface, 48 atrybut curve:[ ], 225 atrybuty klasy Anim, 219 B banery, 7 biblioteka Dojo Toolkit, 47–73 Script.aculo.us Web 2.0, 75–122 Yahoo! User Interface, 215–235 D diagramy typów animacji, 79 dymki, Tooltips, 7 E efekt Effect.Appear(), 90 Effect.BlindDown(), 96 Effect.BlindUp(), 96 Effect.DropOut(), 92 Effect.Fade(), 90 Effect.Fold(), 100 Effect.Grow(), 101 Effect.Highlight(), 86 Effect.Morph(), 85 Effect.Move(), 80 Effect.multiple(), 104 Effect.Opacity(), 82 Effect.Parallel(), 88 Effect.Puff(), 91 Effect.Pulsate(), 98 Effect.Queue(), 105 Effect.Scale(), 83 Effect.ScopedQueue(), 106 Effect.ScrollTo(), 103 Effect.Shake(), 93, 95 Effect.Shrink(), 101 Effect.SlideDown(), 97 Effect.SlideUp(), 97 Effect.Squish(), 99 Effect.SwitchOff(), 95 Effect.toggle(), 103 efekty specjalne, 75, 76 kombinowane, 88 podstawowe, 80 pomocnicze, 102 elementy interfejsu, 7 etykiety, Tabs, 7 F formularze kontaktowe, Contact forms, 7 framework CreateJS, 11–45 MooTools, 123–157 funkcja onComplete, 188 G galerie fotografii, Galleries, 7 I interfejs programowania aplikacji, 48 u(cid:298)ytkownika, 7 K kalendarz, Calendar, 7 klasa Anim, 218 AsyncQueue, 234 BlurFilter, 12, 20 ColorFilter, 11, 18 ColorMatrix, 11, 19 ColorMatrixFilter, 11, 18 Container, 16 Control.Slider, 117 Draggable, 115 Fx.Accordion, 150 Fx.Morph, 130 Fx.Slide, 142 Fx.Tween, 127 Graphics, 11, 17, 31 Mask.Fx, 154 Shape, 11, 17, 31 Sortable, 110, 114 Stage, 12, 16 Text, 11, 27, 40 Ticker, 12, 16 TimeLineMax, 199, 200 Tips, 151 Toggler, 72 Tween, 11, 27, 31, 40 TweenMax, 163–165, 171, 195 kontrolki, Controls, 7 M menu, 7 metoda add(), 200, 201 addChild(), 30 addEventListener(), 16 anim(), 50 Kup książkęPoleć książkę 238 Frameworki JavaScript. Projektowanie interaktywnych i dynamicznych stron WWW metoda animateProperty(), 51, 53 animateProperty() i play(), 53 arcTo(), 25 beginFill(), 24 beginStroke(), 26 bezierCurveTo(), 25, 26 cache(), 29 call(), 29, 30 cancel(), 130 chain(), 62 combine(), 64 create(), 110 destroy(), 114 drawCircle(), 22 drawEllipse(), 22 drawPolyStar(), 21 drawRoundRectComplex(), 21 endFill(), 24 endStroke(), 26 fade(), 137 fadeIn(), 57 fadeOut(), 57 from(), 165 fromTo(), 165 getHSL(), 23 getRGB(), 23 getStyle(), 221 hide(), 72, 144, 150 highlight(), 142 lineTo(), 24 Morph(), 134 on(), 56, 221 one(), 221 pause(), 52, 130 play(), 51 rect(), 21 removeChild(), 31 resume(), 130 run(), 218–220 set(), 130, 171, 176, 184 setStrokeStyle(), 25 show(), 72, 144 slideIn(), 143 slideOut(), 143 slideTo(), 62 staggerFrom(), 195 staggerFromTo(), 195 staggerTo(), 195 start(), 129 stop(), 52 timeScale(), 200, 201 to(), 27, 164, 176, 184, 188 toggle(), 144, 148 transition(), 229 Tween(), 128 update(), 29 wait(), 28 wipeIn(), 59 wipeOut(), 59 metody efektów specjalnych, 77 klasy ColorMatrixFilter, 20 klasy Control.Slider, 119 wywo(cid:225)a(cid:276) zwrotnych, 77, 119 O obiekt vars, 200 obs(cid:225)uga zachowa(cid:276), 76 okna dialogowe, Dialog windows, 7 opcje efektów specjalnych, 14 operator new, 127, 134 P parametr delay, 109 how, 138 vars, 164 parametry efektów specjalnych, 76 efektu Appear(), 90 BlindUp(), 98 DropOut(), 93 Fade(), 90 Grow(), 102 Highlight(), 87 Morph(), 85 Move(), 81 multiple(), 105 Parallel(), 88 Puff(), 92 Pulsate(), 99 Queue(), 106 Scale(), 84 ScopedQueue(), 107 ScrollTo(), 104 Shake(), 95 SwitchOff(), 96 AsyncQueue, 235 BlurFilter, 20 ColorFilter, 19 ColorMatrix, 20 ColorMatrixFilter, 19 Control.Slider, 118 Draggable, 116 Fx.Accordion, 150 Fx.Morph, 134 Shape, 17 Sortable, 112 Stage, 16 Text, 27 Tween, 28 klasy konstruktora klasy TimeLineMax, 200 TweenMax, 164 metody add(), 201 addChild(), 30 addEventListener(), 17 anim(), 51 arcTo(), 25 beginFill(), 24 beginStroke(), 27 bezierCurveTo(), 26 chain(), 64 cache(), 30 call(), 30 curve:[], 227 drawCircle(), 22 drawEllipse(), 23 drawPolyStar(), 22 drawRoundRectComplex(), 21 getHSL(), 24 getRGB(), 23 getStyle(), 221 hide(), 145 highlight(), 142 lineTo(), 25 on(), 57, 221 one(), 221 play(), 52 rect(), 21 removeChild(), 31 set(), 172 setStrokeStyle(), 26 show(), 145 Shrink(), 102 slideIn(), 143 slideOut(), 144 staggerTo(), 196 start(), 129 stop(), 52 timeScale(), 201 to(), 28 toggle(), 144 transition(), 230 update(), 29 wait(), 29 wizualnych efektów specjalnych, 80 paski post(cid:266)pu, Progressbars, 7 stanu, 7 platforma GSAPJS, 160–213 plik klasa_fx.accordion.html, 151 klasa_mask.html, 156 klasa_tips.html, 153 metoda_hide.html, 149 skrypt_animacja_delay.js, 110 skrypt_animacja_grafiki.js, 31–36 skrypt_animacja_onComplete.js, 191–193 196, 197 skrypt_animacja_staggerFrom.js, skrypt_animacja_tekst.js, 40–45 Kup książkęPoleć książkę Skorowidz 239 skrypt_animacja_timelinemax.js, skrypt_metody_wipeIn_wipeOut.js, skrypt_animacja_typu_curve_ skrypt_tweenmax_menu.js, 60, 61 172–176 Effect.BlindDown, 89 Effect.BlindUp, 89 Effect.DropOut, 89 Effect.Fade, 88 Effect.Fold, 89 Effect.Grow, 89 Effect.Highlight, 80 Effect.Morph, 80 Effect.Move, 80 Effect.multiple, 103 Effect.Opacity, 80 Effect.Parallel, 80 Effect.Puff, 88 Effect.Pulsate, 89 Effect.Queue, 103 Effect.Queues, 103 Effect.Scale, 80 Effect.ScopedQueue, 103 Effect.ScrollTo, 103 Effect.Shake, 89 Effect.Shrink, 89 Effect.SlideDown, 89 Effect.SlideUp, 89 Effect.Squish, 89 Effect.SwitchOff, 89 Effect.toggle, 103 Effect.Transitions.flicker, 78, 79 Effect.Transitions.full, 78, 79 Effect.Transitions.linear, 78, 79 Effect.Transitions.none, 79 Effect.Transitions.pulse, 78, 79 Effect.Transitions.reverse, 78, 79 Effect.Transitions.sinoidal, 78, 79 Effect.Transitions.spring, 78, 79 Effect.Transitions.wobble, 78, 79 Effect.Tween, 80 elastic, 12, 48 Elastic.ease, 160 elasticBoth, 216, 217 elasticIn, 13, 49, 216, 217 elasticInOut, 14, 49 elasticOut, 13, 49, 216, 217 expo, 48 Expo.ease, 160 expoIn, 49 expoInOut, 49 expoOut, 49 Fx.Transitions.Back, 124 Fx.Transitions.Bounce, 124 Fx.Transitions.Circ, 124 Fx.Transitions.Cubic, 124 Fx.Transitions.Elastic, 124 Fx.Transitions.Expo, 124 Fx.Transitions.linear, 124 Fx.Transitions.pow, 124 Fx.Transitions.Quad, 124 Fx.Transitions.Quart, 124 Fx.Transitions.Quint, 124 Fx.Transitions.Sine, 124 get, 12, 13 getBack, 12 202–211 (cid:180)path.js, 227 (cid:180)nr_2.js, 178 (cid:180)nr_3.js, 182 (cid:180)nr_4.js, 187 skrypt_animacje_3D_przyklad_ skrypt_animacje_3D_przyklad_ skrypt_animacje_3D_przyklad_ skrypt_efekt_podstawowy.js, 81 skrypt_effect_appear.js, 91 skrypt_effect_BlindUp.js, 98 skrypt_effect_DropOut.js, 93 skrypt_effect_grow_shrink.js, 102 skrypt_effect_highlight.js, 87 skrypt_effect_morph.js, 86 skrypt_effect_multiple.js, 105 skrypt_effect_opacity.js, 83 skrypt_effect_parallel.js, 89 skrypt_effect_puff.js, 92 skrypt_effect_pulsate.js, 99 skrypt_effect_Queue.js, 106 skrypt_effect_scale.js, 84 skrypt_effect_ScopedQueue.js, 107 skrypt_effect_ScrollTo.js, 104 skrypt_effect_shake.js, 95 skrypt_effect_squish.js, 100 skrypt_effect_SwitchOff.js, 96 skrypt_effect_toggle.js, 103 skrypt_klasa_anim_1.js, 219, 220 skrypt_klasa_anim_2.js, 222–225 skrypt_klasa_control.slider_1.js, skrypt_klasa_control.slider_2.js, 120 121 skrypt_klasa_draggable.js, 117 skrypt_klasa_fx.morph.js, 134–137 147, 148 skrypt_klasa_fx.slide_1.html, 146 skrypt_klasa_fx.slide_2.html, skrypt_klasa_fx.tween.js, 129 skrypt_klasa_fx.tween_sterowanie_ (cid:180)animacji.js, 131, 132 skrypt_klasa_sortable.create_1.js, skrypt_klasa_sortable.create_2.js, 112 114 53–56 skrypt_klasa_toggler.js, 73 skrypt_metoda_animateProperty.js, skrypt_metoda_chain.js, 65–68 skrypt_metoda_combine_1.js, 69 skrypt_metoda_combine_2.js, 71 skrypt_metoda_fade.js, 139–141 skrypt_metoda_slideTo.js, 63 skrypt_metoda_transition.js, skrypt_metody_fadeIn_fadeOut.js, 231–234 58 skrypt_tweenmax_metoda_to.js, 166–169 pochylenie, 40 pokazy slajdów, Slideshows, 7 pr(cid:266)dko(cid:286)(cid:252) ruchu, 48 przeci(cid:261)ganie, Drag, 76, 110 przemieszczenie, 31, 40, 75, 113–118 przesuni(cid:266)cie, 121, 122 przyciski, Buttons, 7 R rotatory reklamowe, Banner rotators, 7 ruch, 48 ruch obrotowy, 31, 40 S skalowanie, 31, 40 s(cid:225)owo kluczowe var, 127, 133 sortowanie, Sortable, 75, 110 suwak, Slider, 7, 76, 110, 122 T typy animacji back, 12, 48 Back.ease, 160 backBoth, 216, 217 backIn, 13, 49, 216, 217 backInOut, 14, 49 backOut, 13, 49, 216, 217 bounce, 12, 48 Bounce.ease, 160 bounceBoth, 216, 217 bounceIn, 13, 49, 216, 217 bounceInOut, 14, 49 bounceOut, 13, 49, 216, 217 circ, 12, 48 Circ.ease, 160 circIn, 13, 49 circInOut, 14, 49 circOut, 13, 49 cubic, 12, 48 Cubic.ease, 160 cubicIn, 13, 49 cubicInOut, 14, 49 cubicOut, 13, 49 easeBoth, 216, 217 easeBothStrong, 216, 217 easeIn, 216, 217 easeInStrong, 216, 217 easeNone, 216 easeOut, 216, 217 easeOutStrong, 216, 217 Effect.Appear, 88 Kup książkęPoleć książkę 240 Frameworki JavaScript. Projektowanie interaktywnych i dynamicznych stron WWW W warto(cid:286)ci parametru how, 138 wid(cid:298)ety, Widgets, 7 wizualizacja animacji tekstu, 45 w(cid:225)a(cid:286)ciwo(cid:286)ci klasy Shape, 18 klasy Tween, 28 obiektu vars, 200 parametru vars, 164 wyg(cid:225)adzanie ruchu, 48 Z zap(cid:266)tlenie animacji, 31, 40 zastosowanie efektu Fx.Tween, 146 Graphics, 31 Mask.Fx, 155 Shape, 31 Sortable, 111 Text, 40 TimeLineMax, 201, 212, 213 Tips, 154 Toggler, 72 Tween, 31, 40 TweenMax, 165, 170–172, 176–199 zastosowanie kontrolki Control.Slider, 118 zastosowanie metody typy animacji getBackIn, 13 getBackInOut, 14 getBackOut, 13 getElastic, 12 getElasticIn, 13 getElasticInOut, 14 getElasticOut, 13 getPow, 12 getPowIn, 13 getPowInOut, 14 getPowOut, 13 linear, 12, 13, 48 Linear.easeNone, 160 none, 14 Power0.ease, 160 Power1.ease, 160 Power2.ease, 160 Power3.ease, 160 Power4.ease, 160 quad, 12, 48 Quad.ease, 160 quadIn, 13, 49 quadInOut, 14, 49 quadOut, 13, 49 quart, 12, 48 Quart.ease, 160 quartIn, 13, 49 quartInOut, 14, 49 quartOut, 13, 49 quint, 12, 48 Quint.ease, 160 quintIn, 13, 49 quintInOut, 14, 49 quintOut, 13, 49 sine, 12, 48 Sine.ease, 160 sineIn, 13, 49 sineInOut, 14, 49 sineOut, 13, 49 SlowMo.ease, 160 Strong.ease, 160 U upuszczanie, Drop, 76, 110 animateProperty(), 53, 56 cancel(), 130 chain(), 63, 68 combine(), 69, 71 create(), 111fade(), 138 fadeIn(), 57 fadeOut(), 57 metod wipeIn(), 60 on(), 57, 60, 62 pause(), 130 play(), 53, 56 resume(), 130 set(), 130 slideTo(), 62 start(), 130 transition(), 229, 235 tween(), 138 click, 150, 181, 191 hover, 177 mouseenter, 229 mouseleave, 229 mouseout, 222 mouseover, 222, 226 onclick(), 82 zastosowanie parametru delay, 109 zdarzenie Appear(), 90 BlindOut(), 97 BlindUp(), 97 DropOut(), 93 Fade(), 90 Fold(), 100 Grow(), 102 Highlight(), 86 Morph(), 85 Move(), 81 multiple(), 105 Opacity(), 82 Parallel(), 88 Puff(), 91 Queue(), 105 Scale(), 84 ScopedQueue(), 107 ScrollTo(), 104 Shake(), 95 Shrink(), 102 Squish(), 100 SwitchOff(), 96 toggle(), 103 zastosowanie klasy Anim, 219, 220, 222, 226, 230 Control.Slider, 120 Draggable, 115 Fx, 128, 134 Fx.Accordion, 151 Fx.Slide, 145 Fx.Tips, 153 Kup książkęPoleć książkę
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Frameworki JavaScript. Projektowanie interaktywnych i dynamicznych stron WWW
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: