E-book details

Tworzenie animacji z użyciem języka JavaScript

Tworzenie animacji z użyciem języka JavaScript

Julian Shapiro

Ebook

Wprowadzenie do animacji w JavaScript!

Do niedawna umieszczenie zaawansowanej animacji na stronie WWW wymagało zastosowania technologii flashowej opracowanej przez firmę Adobe. Takie rozwiązanie powodowało wiele zagrożeń, a ponadto konieczna była instalacja dodatkowego oprogramowania. Ciągły rozwój możliwości przeglądarek, języka JavaScript oraz HTML umożliwił w końcu tworzenie nawet bardzo zaawansowanych animacji bez potrzeby korzystania z zewnętrznych narzędzi.

Jeżeli chcesz się nauczyć tworzyć animacje, czerpiąc z możliwości JavaScript, trafiłeś na właściwy podręcznik. W trakcie lektury kolejnych rozdziałów zdobędziesz bezcenną wiedzę na temat biblioteki Velocity.js oraz zasad projektowania ruchu. Potem przejdziesz do praktycznych aspektów pracy z animacjami — dowiesz się, jak rozdzielić style i logikę, jak zorganizować różne sekwencje animacji oraz jak dodawać efekty. Następnie nauczysz się animować teksty, korzystać z grafiki wektorowej w formacie SVG oraz zadbasz o wydajność animacji. Ta książka stanowi doskonałą lekturę, po której zaskoczysz użytkowników Twoich stron WWW atrakcyjnymi animacjami.

Dzięki tej książce:
  • Poznasz bibliotekę Velocity.js
  • Zrozumiesz teoretyczne podstawy projektowania ruchu
  • Zaznajomisz się z najlepszymi technikami kodowania animacji
  • Przygotujesz animację tekstu
  • Poznasz format SVG
  • Wykonasz atrakcyjny pokaz dla Twoich klientów

Twój unikalny przewodnik po świecie animacji JavaScript!



Julian Shapiro — założyciel start-upu oraz deweloper. Obecnie skupia uwagę na poprawie prezentacji ruchu w internecie. Autor biblioteki Velocity.js, najczęściej używanej do tworzenia animacji JavaScript na stronach WWW. Velocity.js stosowana jest przez takie serwisy, jak np. WhatsApp oraz Tumblr.
  • Podziękowania
  • Wstęp
  • Wprowadzenie
  • Rozdział 1. Zalety animacji JavaScript
    • Animacje JavaScript a animacje CSS
    • Wspaniała wydajność
    • Możliwości
      • Przewijanie strony
      • Odwrócenie animacji
      • Ruch wykorzystujący prawa fizyki
    • Proces łatwy w utrzymaniu
    • Podsumowanie
  • Rozdział 2. Tworzenie animacji za pomocą Velocity.js
    • Typy bibliotek animacji JavaScript
    • Instalacja jQuery i Velocity
    • Praca z Velocity: podstawy
      • Velocity i jQuery
      • Argumenty
      • Właściwości
      • Wartości
      • Łączenie wywołań
    • Praca z Velocity: opcje
      • Czas trwania
      • Wygładzanie
      • Rozpoczęcie i zakończenie
      • Pętla
      • Opóźnienie
      • Opcje display i visibility
    • Praca z Velocity: dodatkowe funkcje
      • Odwrócenie animacji
      • Przewijanie
      • Kolory
      • Przekształcenia
    • Praca z Velocity: bez jQuery (średnio zaawansowane)
    • Podsumowanie
  • Rozdział 3. Teoria projektowania ruchu
    • Projekt ruchu poprawia wrażenia użytkownika
    • Użyteczność
      • Konwencja pożyczania
      • Podgląd wyników
      • Odwrócenie uwagi, by odegnać nudę
      • Wykorzystanie pierwotnych instynktów
      • Uczynienie interakcji instynktownymi
      • Odwzorowanie zasad
      • Redukcja animacji wykonywanych równolegle
      • Redukcja różnorodności
      • Odbijanie animacji
      • Ograniczenie czasu trwania
      • Ograniczenie animacji
    • Elegancja
      • Nie bądź frywolny
      • Jedyna okazja, by być frywolnym
      • Pomyśl o grupie docelowej
      • Wyjście poza nieprzezroczystość
      • Rozbicie animacji na etapy
      • Rozciągnięcie animacji
      • Ruch od elementu wyzwalającego
      • Wykorzystanie grafiki
    • Podsumowanie
  • Rozdział 4. Praca z animacjami
    • Praca z animacjami CSS
      • Problemy z CSS
      • Kiedy korzystanie z CSS ma sens
    • Technika kodowania: rozdzielenie stylowania od logiki
      • Podejście standardowe
      • Podejście zoptymalizowane
    • Technika kodowania: organizacja sekwencji animacji
      • Podejście standardowe
      • Podejście zoptymalizowane
    • Technika kodowania: dodawanie efektów
      • Podejście standardowe
      • Podejście zoptymalizowane
    • Techniki projektowania
      • Modyfikatory czasu trwania
      • Wykorzystanie narzędzia Velocity Motion Designer
    • Podsumowanie
  • Rozdział 5. Animacja tekstu
    • Standardowe podejście do animacji tekstu
    • Przygotowujemy elementy tekstu do animacji za pomocą Blast.js
      • Jak działa Blast.js
      • Instalacja
      • Opcja: delimeter
      • Opcja: customclass
      • Opcja: generatevalueclass
      • Opcja: tag
      • Polecenie: cofnięcie
    • Wprowadzanie tekstu do widoku i wyprowadzanie go z niego
      • Zamiana istniejącego tekstu
      • Rozciąganie animacji w czasie
      • Wyprowadzanie tekstu z widoku
    • Zmiana indywidualnych elementów tekstu
    • Bardziej wyszukane zmiany tekstu
    • Floresy tekstowe
    • Podsumowanie
  • Rozdział 6. Podstawowe informacje o SVG
    • Tworzenie obrazków za pomocą kodu
    • Język znaczników SVG
    • Stylowanie SVG
    • Wsparcie dla SVG
    • Animacje SVG
      • Przekazywanie właściwości
      • Atrybuty prezentacyjne
      • Atrybuty pozycyjne a przekształcenia
    • Przykład implementacji: animowane logo
    • Podsumowanie
  • Rozdział 7. Wydajność animacji
    • Realia wydajności stron internetowych
    • Technika: zapobieganie uszkodzeniu układu strony
      • Problem
      • Rozwiązanie
      • Obiekty elementów jQuery
      • Wymuszanie wartości
    • Technika: seryjne dodawanie elementów do DOM
      • Problem
      • Rozwiązanie
    • Technika: unikanie wpływu na sąsiednie elementy
      • Problem
      • Rozwiązanie
    • Technika: unikanie równoległego wczytywania
      • Problem
      • Rozwiązanie
        • Rozkładanie w czasie
        • Sekwencje wielu animacji
    • Technika: nie reaguj w sposób ciągły na zdarzenia przewijania i zmiany rozmiaru przeglądarki
      • Problem
      • Rozwiązanie
    • Technika: redukowanie generowanego obrazu
      • Problem
      • Rozwiązanie
      • Podstępne zdjęcia
        • Gradienty CSS
        • Właściwości cieniowania
    • Technika: degradacja animacji na starszych przeglądarkach
      • Problem
      • Rozwiązanie
    • Odnajdź właściwy próg wydajności na wczesnym etapie
    • Podsumowanie
  • Rozdział 8. Pokaz animacji
    • Zachowanie
    • Struktura kodu
    • Sekcja kodu: Konfiguracja animacji
    • Sekcja kodu: Tworzenie kół
    • Sekcja kodu: Animacja kontenera
      • Podstawowe informacje o trybie 3D w CSS
      • Właściwości
      • Opcje
    • Sekcja kodu: Animacja kół
      • Funkcje wartości
      • Animacja nieprzezroczystości
      • Przekształcenia animacji
      • Polecenie reverse
    • Podsumowanie
  • Title: Tworzenie animacji z użyciem języka JavaScript
  • Author: Julian Shapiro
  • Original title: Web Animation using JavaScript: Develop & Design (Develop and Design)
  • Translation: Mirosław Gołda
  • ISBN: 978-83-283-1575-4, 9788328315754
  • Date of issue: 2015-11-24
  • Format: Ebook
  • Item ID: twanjs
  • Publisher: Helion