Animace v JavaScriptu

Animace v JavaScriptu mohou zvládnout věci, které CSS nedokáže.

Například pohyb po složité cestě s časovací funkcí, která je jiná než Bézierova křivka, nebo animaci na plátně.

Použití setInterval

Animaci je možné implementovat jako posloupnost snímků – obvykle malých změn HTML/CSS vlastností.

Například pÅ™i mÄ›nÄ›ní style.left z 0px na 100px se bude posunovat element. A pokud jej zvÄ›tšíme v setInterval a budeme jej zvyÅ¡ovat o 2px s malými prodlevami, tÅ™eba 50krát za sekundu, pak to bude vypadat plynule. Je to stejný princip jako v kinÄ›: 24 snímků za sekundu stačí, aby film vypadal plynule.

Pseudokód může vypadat následovně:

let časovač = setInterval(function() {
  if (animace je kompletní) clearInterval(časovač);
  else zvyš style.left o 2px
}, 20); // změna o 2px každých 20 ms, přibližně 50 snímků za sekundu

Úplnější příklad animace:

let začátek = Date.now(); // pamatujeme si čas začátku

let časovač = setInterval(function() {
  // kolik času uplynulo od začátku?
  let uplynulýČas = Date.now() - začátek;

  if (uplynulýČas >= 2000) {
    clearInterval(časovač); // po 2 sekundách ukončíme animaci
    return;
  }

  // vykreslíme animaci v okamžiku uplynulýČas
  vykresli(uplynulýČas);

}, 20);

// když uplynulýČas postupuje od 0 do 2000
// left nabývá hodnot od 0px do 400px
function vykresli(uplynulýČas) {
  vláček.style.left = uplynulýČas / 5 + 'px';
}

Pro ukázku klikněte sem:

<!DOCTYPE HTML>
<html>

<head>
  <style>
    #train {
      position: relative;
      cursor: pointer;
    }
  </style>
</head>

<body>

  <img id="train" src="https://js.cx/clipart/train.gif">


  <script>
    train.onclick = function() {
      let start = Date.now();

      let timer = setInterval(function() {
        let timePassed = Date.now() - start;

        train.style.left = timePassed / 5 + 'px';

        if (timePassed > 2000) clearInterval(timer);

      }, 20);
    }
  </script>


</body>

</html>

Použití requestAnimationFrame

Představme si, že máme několik animací, které probíhají současně.

Pokud spustíme každou zvlášť, pak i když každá bude mít setInterval(..., 20), prohlížeč bude muset pÅ™ekreslovat mnohem častÄ›ji než každých 20 ms.

Je to tím, že každá má jiný počáteční čas, takže „každých 20 ms“ se mezi různými animacemi liší. Intervaly nejsou sjednocené. Budeme tedy mít nÄ›kolik nezávislých bÄ›hů každých 20 ms.

Jinými slovy, toto:

setInterval(function() {
  animace1();
  animace2();
  animace3();
}, 20)

…je lehčí než tři nezávislá volání:

setInterval(animace1, 20); // nezávislé animace
setInterval(animace2, 20); // na různých místech skriptu
setInterval(animace3, 20);

Těchto několik nezávislých překreslení by mělo být seskupeno dohromady, abychom prohlížeči ulehčili překreslování. Tím budeme méně zatěžovat CPU a animace bude plynulejší.

JeÅ¡tÄ› jednu vÄ›c bychom mÄ›li mít na pamÄ›ti. NÄ›kdy je CPU pÅ™etížená nebo existují jiné důvody, proč pÅ™ekreslovat ménÄ› často (například když je záložka prohlížeče skrytá), takže ve skutečnosti bychom nemÄ›li spouÅ¡tÄ›t animaci každých 20 ms.

Jak se o tom vÅ¡ak dozvíme v JavaScriptu? Existuje specifikace ÄŒasování animací, která poskytuje funkci requestAnimationFrame. Ta Å™eší vÅ¡echny tyto i další problémy.

Syntaxe:

let idPožadavku = requestAnimationFrame(callback)

Tím se naplánuje spuÅ¡tÄ›ní funkce callback v nejbližším okamžiku, kdy prohlížeč bude chtít provádÄ›t animaci.

Pokud ve funkci callback provedeme zmÄ›ny v elementech, budou seskupeny dohromady s jinými callbacky requestAnimationFrame a s CSS animacemi. Místo mnoha pÅ™epočtů geometrie a pÅ™ekreslování se tedy provede pouze jeden.

Návratovou hodnotu idPožadavku můžeme použít ke zruÅ¡ení volání:

// zrušíme naplánované provedení callbacku
cancelAnimationFrame(idPožadavku);

Funkce callback má jeden argument – čas v milisekundách uplynulý od začátku načítání stránky. Tento čas můžeme získat i voláním performance.now().

Obvykle se callback spouÅ¡tí velmi brzy, pokud není CPU pÅ™etížena, baterie laptopu není téměř vybitá nebo není jiný důvod k jeho nespuÅ¡tÄ›ní.

Následující kód zobrazuje čas mezi prvními 10 spuÅ¡tÄ›ními requestAnimationFrame. Obvykle je to 10-20 ms:

<script>
  let předchozí = performance.now();
  let kolikrát = 0;

  requestAnimationFrame(function měř(čas) {
    document.body.insertAdjacentHTML("beforeEnd", Math.floor(čas - předchozí) + " ");
    předchozí = čas;

    if (kolikrát++ < 10) requestAnimationFrame(měř);
  })
</script>

Strukturovaná animace

Nyní můžeme vytvoÅ™it univerzálnÄ›jší animační funkci, založenou na requestAnimationFrame:

function animace({časování, vykreslení, trvání}) {

  let začátek = performance.now();

  requestAnimationFrame(function animace(čas) {
    // poměrČasu jde od 0 do 1
    let poměrČasu = (čas - začátek) / trvání;
    if (poměrČasu > 1) poměrČasu = 1;

    // vypočítáme aktuální stav animace
    let postup = časování(poměrČasu)

    vykreslení(postup); // vykreslíme ho

    if (poměrČasu < 1) {
      requestAnimationFrame(animace);
    }

  });
}

Funkce animace pÅ™ijímá 3 parametry, které v zásadÄ› popisují celou animaci:

trvání

Celkový čas animace, například 1000.

časování(poměrČasu)

ÄŒasovací funkce, podobná CSS vlastnosti transition-timing-function, která obdrží pomÄ›r uplynulého času (0 na začátku, 1 na konci) a vrátí míru dokončení animace (podobnÄ› jako y na BézierovÄ› kÅ™ivce).

Například lineární funkce znamená, že animace pokračuje rovnoměrně stále stejnou rychlostí:

function lineární(poměrČasu) {
  return poměrČasu;
}

Její graf:

Je to jako transition-timing-function: linear. Dále uvedeme zajímavÄ›jší varianty.

vykreslení(postup)

Funkce, která obdrží stav dokončení animace a vykreslí jej. Hodnota postup=0 popisuje počáteční stav animace, postup=1 koncový stav.

Tato funkce zajistí skutečné vykreslení animace.

Může přesunovat element:

function vykresli(postup) {
  vláček.style.left = postup + 'px';
}

…Nebo provádět cokoli jiného, můžeme animovat cokoli jakýmkoli způsobem.

Animujme pomocí naší funkce šířku elementu width od 0 do 100%.

Pro ukázku klikněte na element:

function animate({duration, draw, timing}) {

  let start = performance.now();

  requestAnimationFrame(function animate(time) {
    let timeFraction = (time - start) / duration;
    if (timeFraction > 1) timeFraction = 1;

    let progress = timing(timeFraction)

    draw(progress);

    if (timeFraction < 1) {
      requestAnimationFrame(animate);
    }

  });
}

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <style>
    progress {
      width: 5%;
    }
  </style>
  <script src="animate.js"></script>
</head>

<body>


  <progress id="elem"></progress>

  <script>
    elem.onclick = function() {
      animate({
        duration: 1000,
        timing: function(timeFraction) {
          return timeFraction;
        },
        draw: function(progress) {
          elem.style.width = progress * 100 + '%';
        }
      });
    };
  </script>


</body>

</html>

Kód animace:

animace({
  trvání: 1000,
  časování(poměrČasu) {
    return poměrČasu;
  },
  vykreslení(postup) {
    elem.style.width = postup * 100 + '%';
  }
});

Na rozdíl od CSS animací zde můžeme vytvoÅ™it jakoukoli časovací a jakoukoli vykreslovací funkci. ÄŒasovací funkce se neomezuje na Bézierovy kÅ™ivky. A vykreslení může zacházet za vlastnosti, vytvoÅ™it nové elementy pro animaci ve stylu ohňostroje nebo cokoli jiného.

Časovací funkce

Výše jsme viděli nejjednodušší, lineární časovací funkci.

Podívejme se na jiné. Vyzkoušíme animace pohybu s různými časovacími funkcemi, abychom viděli, jak fungují.

Umocnění na n-tou

Jestliže chceme animaci urychlit, můžeme použít postup umocnÄ›ný na n-tou.

Například parabolickou křivku:

function naDruhou(poměrČasu) {
  return Math.pow(poměrČasu, 2)
}

Graf:

Prohlédněte si ji v akci (kliknutím ji aktivujete):

…Nebo kubickou kÅ™ivku nebo jeÅ¡tÄ› vÄ›tší n. Zvýšení exponentu způsobí vÄ›tší urychlení.

Zde je graf pro postup na 5-tou:

V akci:

Oblouk

Funkce:

function kruh(poměrČasu) {
  return 1 - Math.sin(Math.acos(poměrČasu));
}

Graf:

Zpět: výstřel z luku

Následující funkce provádí „výstřel z luku“. Nejprve „natáhneme tětivu“ a pak „vystřelíme“.

Na rozdíl od pÅ™edchozích funkcí závisí na dalším parametru x, „koeficientu pružnosti“. Je jím definována délka „natažení tÄ›tivy“.

Kód:

function zpět(x, poměrČasu) {
  return Math.pow(poměrČasu, 2) * ((x + 1) * poměrČasu - x)
}

Graf pro x = 1.5:

Pro animaci ji použijeme se specifickou hodnotou x. Příklad pro x = 1.5:

Skákání

Představme si, že upustíme míč. Dopadne na zem, několikrát odskočí a pak se zastaví.

Funkce skákání provádí totéž, ale v obráceném poÅ™adí: „skákání“ začne okamžitÄ›. Používá k tomu nÄ›kolik speciálních koeficientů:

function skákání(poměrČasu) {
  for (let a = 0, b = 1; 1; a += b, b /= 2) {
    if (poměrČasu >= (7 - 4 * a) / 11) {
      return -Math.pow((11 - 6 * a - 11 * poměrČasu) / 4, 2) + Math.pow(b, 2)
    }
  }
}

V akci:

Elastická animace

Další „elastická“ funkce, která pÅ™ijímá další parametr x jako „úvodní rozsah“:

function elastická(x, poměrČasu) {
  return Math.pow(2, 10 * (poměrČasu - 1)) * Math.cos(20 * Math.PI * x / 3 * poměrČasu)
}

Graf pro x=1.5:

V akci pro x=1.5:

Opak: ease*

Máme tedy sadu časovacích funkcí. Jejich přímá aplikace se nazývá „easeIn“.

Někdy potřebujeme zobrazit animaci v obráceném pořadí. To provedeme pomocí transformace „easeOut“.

easeOut

V režimu „easeOut“ je funkce časování umístÄ›na do obalu časováníEaseOut:

časováníEaseOut(poměrČasu) = 1 - časování(1 - poměrČasu)

Jinými slovy, máme „transformační“ funkci vytvořEaseOut, která vezme „obyčejnou“ časovací funkci a vrátí obal kolem ní:

// přijímá časovací funkci, vrací transformovanou variantu
function vytvořEaseOut(časování) {
  return function(poměrČasu) {
    return 1 - časování(1 - poměrČasu);
  }
}

Můžeme například vzít výše uvedenou funkci skákání a aplikovat ji:

let skákáníEaseOut = vytvořEaseOut(skákání);

Pak skákání nebude na začátku, ale na konci animace. Vypadá to ještě lépe:

#brick {
  width: 40px;
  height: 20px;
  background: #EE6B47;
  position: relative;
  cursor: pointer;
}

#path {
  outline: 1px solid #E8C48E;
  width: 540px;
  height: 20px;
}

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
  <script src="https://js.cx/libs/animate.js"></script>
</head>

<body>


  <div id="path">
    <div id="brick"></div>
  </div>

  <script>
    function makeEaseOut(timing) {
      return function(timeFraction) {
        return 1 - timing(1 - timeFraction);
      }
    }

    function bounce(timeFraction) {
      for (let a = 0, b = 1; 1; a += b, b /= 2) {
        if (timeFraction >= (7 - 4 * a) / 11) {
          return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
        }
      }
    }

    let bounceEaseOut = makeEaseOut(bounce);

    brick.onclick = function() {
      animate({
        duration: 3000,
        timing: bounceEaseOut,
        draw: function(progress) {
          brick.style.left = progress * 500 + 'px';
        }
      });
    };
  </script>


</body>

</html>

Zde vidíme, jak transformace mění chování funkce:

Pokud je nějaký efekt, například skákání, na začátku animace, zobrazí se na konci.

V uvedeném grafu má obvyklé skákání červenou barvu a skákání easeOut modrou.

• Obvyklé skákání – objekt skáče na spodku, pak nakonec ostÅ™e vyskočí na vrch.
• Po easeOut – nejprve skočí na vrch, pak skáče tam.

easeInOut

Můžeme také zobrazit efekt jak na začátku, tak na konci animace. Tato transformace se nazývá „easeInOut“.

Ze zadané časovací funkce vypočítáme stav animace následovně:

if (poměrČasu <= 0.5) { // první polovina animace
  return časování(2 * poměrČasu) / 2;
} else { // druhá polovina animace
  return (2 - časování(2 * (1 - poměrČasu))) / 2;
}

Kód obalu:

function vytvořEaseInOut(časování) {
  return function(poměrČasu) {
    if (poměrČasu < .5)
      return časování(2 * poměrČasu) / 2;
    else
      return (2 - časování(2 * (1 - poměrČasu))) / 2;
  }
}

skákáníEaseInOut = vytvořEaseInOut(skákání);

V akci, skákáníEaseInOut:

#brick {
  width: 40px;
  height: 20px;
  background: #EE6B47;
  position: relative;
  cursor: pointer;
}

#path {
  outline: 1px solid #E8C48E;
  width: 540px;
  height: 20px;
}

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
  <script src="https://js.cx/libs/animate.js"></script>
</head>

<body>


  <div id="path">
    <div id="brick"></div>
  </div>

  <script>
    function makeEaseInOut(timing) {
      return function(timeFraction) {
        if (timeFraction < .5)
          return timing(2 * timeFraction) / 2;
        else
          return (2 - timing(2 * (1 - timeFraction))) / 2;
      }
    }


    function bounce(timeFraction) {
      for (let a = 0, b = 1; 1; a += b, b /= 2) {
        if (timeFraction >= (7 - 4 * a) / 11) {
          return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
        }
      }
    }

    let bounceEaseInOut = makeEaseInOut(bounce);

    brick.onclick = function() {
      animate({
        duration: 3000,
        timing: bounceEaseInOut,
        draw: function(progress) {
          brick.style.left = progress * 500 + 'px';
        }
      });
    };
  </script>


</body>

</html>

Transformace „easeInOut“ spojuje dva grafy do jednoho: easeIn (obvyklé) pro první polovinu animace a easeOut (obrácené) pro druhou polovinu.

Efekt jasnÄ› uvidíme, když si porovnáme grafy easeIn, easeOut a easeInOut časovací funkce kruh:

• ÄŒervená je obvyklá varianta funkce kruh (easeIn).
• Zelená – easeOut.
• Modrá – easeInOut.

Jak vidíme, graf první poloviny animace je zmenÅ¡ený easeIn a druhé poloviny zmenÅ¡ený easeOut. Výsledkem je, že animace začne a skončí stejným efektem.

Zajímavější vykreslování

Místo pÅ™esunutí elementu můžeme udÄ›lat nÄ›co jiného. Stačí napsat vhodnou funkci vykreslení.

Zde je animované „skákající“ psaní textu:

textarea {
  display: block;
  border: 1px solid #BBB;
  color: #444;
  font-size: 110%;
}

button {
  margin-top: 10px;
}

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
  <script src="https://js.cx/libs/animate.js"></script>
</head>

<body>


  <textarea id="příkladTextu" rows="5" cols="60">He took his vorpal sword in hand:
Long time the manxome foe he sought—
So rested he by the Tumtum tree,
And stood awhile in thought.
  </textarea>

  <button onclick="animaceTextu(příkladTextu)">Spustit animované psaní!</button>

  <script>
    function animaceTextu(textArea) {
      let text = textArea.value;
      let kam = text.length,
        odkud = 0;

      animate({
        duration: 5000,
        timing: skákání,
        draw: function(postup) {
          let výsledek = (kam - odkud) * postup + odkud;
          textArea.value = text.slice(0, Math.ceil(výsledek))
        }
      });
    }


    function skákání(poměrČasu) {
      for (let a = 0, b = 1; 1; a += b, b /= 2) {
        if (poměrČasu >= (7 - 4 * a) / 11) {
          return -Math.pow((11 - 6 * a - 11 * poměrČasu) / 4, 2) + Math.pow(b, 2)
        }
      }
    }
  </script>


</body>

</html>

Shrnutí

JavaScript může pomoci s animacemi, které CSS nedokáže správnÄ› zvládnout nebo které potÅ™ebují hlubší kontrolu. Animace v JavaScriptu by mÄ›ly být implementovány funkcí requestAnimationFrame. Tato zabudovaná metoda umožňuje nastavit callbackovou funkci, která se spustí, až bude prohlížeč pÅ™ipravovat pÅ™ekreslení. Obvykle k tomu dochází velmi brzy, ale pÅ™esný čas závisí na prohlížeči.

Když je stránka na pozadí, nedochází k žádným překreslením, takže callback se nespustí: animace bude pozastavena a nebude spotřebovávat zdroje. To je výborné.

Následující pomocná funkce animace slouží k nastavení vÄ›tÅ¡iny animací:

function animace({časování, vykreslení, trvání}) {

  let začátek = performance.now();

  requestAnimationFrame(function animace(čas) {
    // poměrČasu jde od 0 do 1
    let poměrČasu = (čas - začátek) / trvání;
    if (poměrČasu > 1) poměrČasu = 1;

    // vypočítáme aktuální stav animace
    let postup = časování(poměrČasu);

    vykreslení(postup); // vykreslíme ho

    if (poměrČasu < 1) {
      requestAnimationFrame(animace);
    }

  });
}

Její volby:

• trvání – celkový čas animace v milisekundách.
• časování – funkce počítající postup animace. Obdrží pomÄ›r času od 0 do 1 a vrátí postup animace, obvykle také od 0 do 1.
• vykreslení – funkce vykreslující animaci.

Samozřejmě bychom ji mohli vylepšit a přidat další vychytávky, ale animace v JavaScriptu se nepoužívají každý den. Používají se k provedení něčeho zajímavého a nestandardního. Další vlastnosti tedy budete chtít přidat až ve chvíli, kdy je budete potřebovat.

Animace v JavaScriptu mohou využívat jakoukoli časovací funkci. Uvedli jsme mnoho příkladů a transformací, abychom je učinili ještě všestrannějšími. Na rozdíl od CSS se zde nemusíme omezovat na Bézierovy křivky.

Totéž platí pro vykreslení: můžeme animovat cokoli, nejenom CSS vlastnosti.