**{{ :krouzek:animace_priklady.zip | Příklady kódu v archivu ZIP}}**
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.
* Ukázat ten pozicovací příklad a jak změny top a left (v css) ovlivňují pozici autíčka.
Jak jde autíčko rozpohybovat?
=== Možnost 1 - CSS animace ===
@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_);
}
* https://www.vzhurudolu.cz/prirucka/css3-animations
* reference: https://www.w3schools.com/css/css3_animations.asp
* Příklad: pozicovani_css_anim.htm
Vyzkoušet:
* Ruzne timing funkce (průběhy): ease, linear, ease-in, ease-out, cubic-bezier(.07,.85,.92,.37)
* generátor: https://cubic-bezier.com/#.07,.85,.92,.37
* více keyframes (používají se 0%, 5%, ... 100% v _cas_ (v příkladu mám from(=0%), to(=100%)
* animace dalších atributů: opacity, background-color, textové atributy (font-size atp - na jiném příkladu)
* změna počtu opakování, zpoždění
=== Možnost 2 - Javascript ===
(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?