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.

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_);
}

Vyzkoušet:

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?