krouzek:animace [Kroužek Javascriptu]

Tato stránka je pouze pro čtení. Můžete si pouze prohlédnout zdrojový kód, ale ne ho měnit. Zeptejte se správce, pokud si myslíte, že něco není v pořádku.
**{{ :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 === 
<code css>
@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_);
}
</code>
  * 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
<code javascript>
 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 
 )
</code>

Možné nahradit funkcí  requestAnimationFrame (v rekurzi) - browser sám si volí vhodný fps v závislosti na výkonnosti zařízení, atp.
<code javascript>
 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)
</code>
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?