Cíl: Ukázat dva způsoby jak animovat
Před Vánoci jsme si ukázali pozicování - vnější kontejner(div) má position: relative a rozměry (width, height) a vnitřní div (reprezentující třeba autíčko) má position: absolute (a menší rozměry a třeba background-color).
Vnitřní div potom pozicujeme pomocí top
a left
css vlastností
- pozor, určuje pozici levého horního rohu, nikoliv středu.
Jak jde autíčko rozpohybovat?
@keyframes nazev_animace { _cas_ { _deklarace_vlastnosti_ } _cas_ { _deklarace_vlastnosti_ } } #auticko { animation: _nazev_animace_ _cas_trvani_ _casova_funkce_prubehu_ _zpozdeni_ _pocet_opakovani_ _smer_prubehu_ _fill_mode_ (,_dalsi_animace_); }
Vyzkoušet:
(to už jsme v nějaké formě dělali) Javascript a 'simulační smyčka' = v intervalech aktualizujeme atributy přímo. Využijeme k tomu setTimeout v rekurzi, nebo setInterval
let x = 0; let y = 0; setInterval( function(){ // Pohyb - může být i v závislosti na stiknutých klávesách, zprávě od serveru, atp. x += 1 y += 2 // Aktualizace vzhledu document.getElementById('objekt1').style.left = x+'px' document.getElementById('objekt1').style.top = y+'px' }, 1000/60 )
Možné nahradit funkcí requestAnimationFrame (v rekurzi) - browser sám si volí vhodný fps v závislosti na výkonnosti zařízení, atp.
let x = 0; let y = 0; function vykresli(){ // Pohyb - může být i v závislosti na stiknutých klávesách, zprávě od serveru, atp. x += 1 y += 2 // Aktualizace vzhledu document.getElementById('objekt1').style.left = x+'px' document.getElementById('objekt1').style.top = y+'px' // Zavolani nasledujiciho vykresleni requestAnimationFrame(vykresli) } // prvni zavolani requestAnimationFrame(vykresli)
Pozor - všechny tyhle volání délku intervalu negarantují. Pokud chci animaci přesnou (například hra aby byla pro všechny spravedlivá), musím při počítání pohybu zohlednit čas (Date() - previous_date)
Diskuse: výhody a nevýhody obou přístupů? Možnosti kombinace?