Animace

51. hodina WBA


Matěj Cajthaml — SSPŠ

©

Opakování

Jak se liší input type=checkbox a input type=radio?
Jak určíme prvku odsazení vnitřní a vnější?
Jak se liší rastrový a vektorový obrázek?
Jaké pravidla můžeme používat v @media?
Kde se používají certifikáty?

Co jsou to vlastně animace? Z čeho se skládají?

Animace

  • způsob pohybu objektů
  • v IT se bavíme o zdáleném pohybování objektů
  • monitory neumí zobrazovat plynulý pohyb
  • animace se skládají z frames - rámců

Kolik frames per second (FPS) by měla mít animace?

Počet FPS

  • ošálit okolo lze pro některé jedince již při 24 FPS
  • obyčejně se však používá 30 - 33 FPS
  • profesionální užití 60+ FPS

Viděli jste někde používané například 1 FPS?

S jakým počtem rámců za sekundu budeme na webových stránkách pracovat?

Webové stránky mají různé typy animací, které se využívají. Některé typy ani s rámci nepracují. V případě, že ano, dají se jednotlivé rámce natáhnout díky interpolaci.

Interpolace

  • způsob vypočítání hodnot mezi dvěma hodnotama dle určitého parametru
  • např.:
    • A = 3
    • B = 13
    • t = 0.25
    • výsledek = ?

Animace se v každém odvětví IT definují jinak. Webové stránky používají definici dříve uvedenou a dále ji rozvijí.

Typy animací

  • přechodové animace (CSS)
  • pravá animace (CSS)
  • pokročilé animace (JS)

Přechodové animace

  • definují vzhled (chování) prvku během toho, když se jeho stav na stránce změnil
  • často pseudotřídy (nejčastěji hover)
  • ale např. i změna tříd
  • používá interpolaci
  • správna definice

Tyto animace jsou nejjednoduší a definují, co se stane, když se nějaký prvek změní na dané pravidlo. Definujeme je tedy pro jednotlivá pravidla pomocí vlastnosti.

Vlastnost transition

  • tři parametry
    • jaké vlastnosti se pro danou vlastnost budou kontrolovat — případně all
    • jak dlouho bude přechod trvat
    • typ přechodové funkce — jak se mezi stavy bude procházet

Typy přechodových funkcí

Další typy

Jaké vlastnosti nebudou s tímto typem animací fungovat? Proč?

Pravé animace

  • definujeme animace přímo pomocí jednotlivých rámců
  • pravidlo @keyframes
  • vždy určujeme jméno a uvnitř rámce
  • animaci může využívat více prvků najednou, vždy definujeme vlastnosti animation:
    • jméno animace
    • délku
    • přechodovou funkci

Animacím můžeme nastavovat např.
animation-play-state či animation-iteration-count, k čemu slouží?

Můžeme definovat rámec na 44.2039169420%?

Co se stane, když začáteční a poslední rámec nemají stejné vlastnosti?

Pokročilé animace

  • definujeme v JS a nastavujeme velmi podobně jako pravé animace
  • využití CSS vlastností
  • můžeme programovat naší animaci
  • můžeme správně zachytit její konec a nebo ji předčastně ukončit
  • dokumentace

Jak uděláme, aby byla tento typ animace nekonečný?

Pro jednoduší práci s animacemi existují v DevTools různé nástroje.

Děkuji za pozornost!

  • matej.cajthaml@ssps.cz
  • https://ssps.cajthaml.eu/