Rozdíly

Zde můžete vidět rozdíly mezi vybranou verzí a aktuální verzí dané stránky.

--- krouzek:animace [2022/01/04 10:40] – vytvořeno admin
+++ krouzek:animace [2023/11/22 16:07] (aktuální) – admin
@@ Řádek 1: / Řádek 1: @@
-Javascript
+**{{ :krouzek:animace_priklady.zip | Příklady kódu v archivu ZIP}}**
-Cíl: dva způsoby jak animovat
+Cíl: Ukázat dva způsoby jak animovat
 Před Vánoci jsme si ukázali pozicování -
@@ Řádek 11: / Řádek 11: @@
  - pozor, určuje pozici levého horního rohu, nikoliv středu.
-Takže:
+  * Ukázat ten pozicovací příklad a jak změny top a left (v css) ovlivňují pozici autíčka.
- * 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 ===
+=== Možnost 1 - CSS animace ===
-  CSS animace
 <code css>
 @keyframes nazev_animace {
@@ Řádek 48: / Řádek 46: @@
-=== Možnost 2 ===
+=== 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>
+<code javascript>
  let x = 0;
  let y = 0;
@@ Řádek 69: / Řádek 67: @@
 Možné nahradit funkcí  requestAnimationFrame (v rekurzi) - browser sám si volí vhodný fps v závislosti na výkonnosti zařízení, atp.
-<code>
+<code javascript>
  let x = 0;
  let y = 0;