krouzek:animace [Kroužek Javascriptu]

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?