TWORZENIE ANIMACJI Z UŻYCIEM JĘZYKA JAVASCRIPT

SPIS TREŚCI

• 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