Tworzenie_animacji_z_uzyciem_jezyka_JavaScript_twanjs.pdf

(522 KB) Pobierz
Tytuł oryginału: Web Animation using JavaScript: Develop & Design
Tłumaczenie: Mirosław Gołda
ISBN: 978-83-283-1572-3
Authorized translation from the English language edition, entitled: WEB ANIMATION USING
JAVASCRIPT: DEVELOP & DESIGN; ISBN 0134096665; by Julian Shapiro; published by Pearson
Education, Inc, publishing as Peachpit Press.
Copyright © 2015 by Julian Shapiro.
All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means,
electronic or mechanical, including photocopying, recording or by any information storage retrieval system,
without permission from Pearson Education, Inc.
Polish language edition published by HELION S.A. Copyright © 2016.
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.
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)
Pliki z przykładami omawianymi w książce można znaleźć pod adresem:
ftp://ftp.helion.pl/przyklady/twanjs.zip
Drogi Czytelniku!
Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres
http://helion.pl/user/opinie/twanjs
Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.
Printed in Poland.
Kup książkę
Poleć książkę
Oceń książkę
Księgarnia internetowa
Lubię to! » Nasza społeczność
SPIS TREŚCI
Wstęp .......................................................................................................................................................7
Wprowadzenie .......................................................................................................................................9
ROZDZIAŁ 1
ZALETY ANIMACJI JAVASCRIPT .................................................................................................. 10
Animacje JavaScript a animacje CSS .................................................................................................12
Wspaniała wydajność ..........................................................................................................................14
Możliwości ............................................................................................................................................15
Proces łatwy w utrzymaniu ................................................................................................................17
Podsumowanie .....................................................................................................................................18
TWORZENIE ANIMACJI ZA POMOCĄ VELOCITY.JS ................................................................. 20
Typy bibliotek animacji JavaScript ....................................................................................................22
Instalacja jQuery i Velocity ................................................................................................................23
Praca z Velocity: podstawy .................................................................................................................24
Praca z Velocity: opcje .........................................................................................................................28
Praca z Velocity: dodatkowe funkcje ................................................................................................34
Praca z Velocity: bez jQuery średnio zaawansowane) ....................................................................37
Podsumowanie .....................................................................................................................................39
ROZDZIAŁ 3
TEORIA PROJEKTOWANIA RUCHU ............................................................................................. 40
Projekt ruchu poprawia wrażenia użytkownika ..............................................................................42
Użyteczność ..........................................................................................................................................45
Elegancja ................................................................................................................................................50
Podsumowanie .....................................................................................................................................55
PRACA Z ANIMACJAMI ................................................................................................................. 56
Praca z animacjami CSS ......................................................................................................................58
Technika kodowania: rozdzielenie stylowania od logiki ................................................................61
Technika kodowania: organizacja sekwencji animacji ...................................................................66
Technika kodowania: dodawanie efektów .......................................................................................70
Techniki projektowania ......................................................................................................................73
Podsumowanie .....................................................................................................................................77
ROZDZIAŁ 2
ROZDZIAŁ 4
Kup książkę
Poleć książkę
ROZDZIAŁ 5
ANIMACJA TEKSTU .........................................................................................................................78
Standardowe podejście do animacji tekstu ...................................................................................... 80
Przygotowujemy elementy tekstu do animacji za pomocą Blast.js .............................................. 82
Wprowadzanie tekstu do widoku i wyprowadzanie go z niego .................................................... 89
Zmiana indywidualnych elementów tekstu ..................................................................................... 92
Bardziej wyszukane zmiany tekstu .................................................................................................... 93
Floresy tekstowe ................................................................................................................................... 94
Podsumowanie ..................................................................................................................................... 96
ROZDZIAŁ 6
PODSTAWOWE INFORMACJE O SVG ..........................................................................................98
Tworzenie obrazków za pomocą kodu ...........................................................................................100
Język znaczników SVG ......................................................................................................................101
Stylowanie SVG ..................................................................................................................................103
Wsparcie dla SVG ..............................................................................................................................104
Animacje SVG ....................................................................................................................................105
Przykład implementacji: animowane logo .....................................................................................108
Podsumowanie ...................................................................................................................................109
WYDAJNOŚĆ ANIMACJI ............................................................................................................. 110
Realia wydajności stron internetowych ..........................................................................................112
Technika: zapobieganie uszkodzeniu układu strony ........................................................................... 115
Technika: seryjne dodawanie elementów do DOM ............................................................................ 119
Technika: unikanie wpływu na sąsiednie elementy ............................................................................. 122
Technika: unikanie równoległego wczytywania ................................................................................... 124
Technika: nie reaguj w sposób ciągły na zdarzenia przewijania i zmiany rozmiaru przeglądarki ... 126
Technika: redukowanie generowanego obrazu .................................................................................... 127
Technika: degradacja animacji na starszych przeglądarkach ............................................................ 129
Odnajdź właściwy próg wydajności na wczesnym etapie ............................................................131
Podsumowanie ...................................................................................................................................135
POKAZ ANIMACJI ........................................................................................................................ 136
Zachowanie .........................................................................................................................................138
Struktura kodu ...................................................................................................................................140
Sekcja kodu: Konfiguracja animacji ................................................................................................142
Sekcja kodu: Tworzenie kół ..............................................................................................................143
Sekcja kodu: Animacja kontenera ...................................................................................................144
Sekcja kodu: Animacja kół ...............................................................................................................147
Podsumowanie ...................................................................................................................................151
SKOROWIDZ ................................................................................................................................. 153
ROZDZIAŁ 7
ROZDZIAŁ 8
6
SPIS TREŚCI
Kup książkę
Poleć książkę
ROZDZIAŁ 1.
Zalety animacji JavaScript
Kup książkę
Poleć książkę
Zgłoś jeśli naruszono regulamin