logo

Začínáme s rozhraním JavaScript Web Animation API

Přidáním animací do webových rozhraní budou stránky a aplikace citlivější a interaktivnější. Postranní nabídka, která se plynule vysune ze zobrazení, poskytuje mnohem lepší uživatelský dojem než nabídka, která zmizí, když ji zavřete.

Doposud tvorba webových animací probíhala buď pomocí CSS přechodů, CSS klíčových snímků, nebo externí knihovny jako Animate.css nebo Velocity. Díky novému nativnímu JavaScript API jsme nyní schopni volně animovat jakýkoli HTML prvek, aniž bychom museli opustit náš soubor .js.

Vytváření animací

Abychom předvedli úžasnost nového API, pojďme sestavit super jednoduchý příklad, jednou staromódním způsobem CSS, pak s JavaScript Web Animations.

Níže uvedený editor obsahuje dva HTML divy, které se po kliknutí přesunou doprava a poté změní jejich barvu. Čtverec je animován pomocí kódu CSS>@keyframes a kruh pomocí rozhraní Web Animations API.

<h4>Click on the shapes to animate them.</h4>

<p>CSS keyframes</p>
<div id="square"></div>

<p>JS Web Animation API</p>
<div id="circle"></div>

#square,
#circle {
    width: 100px;
    height: 100px;
    margin: 10px 10px 30px;
    background-color: #2196F3;
}

#circle {
    border-radius: 50%;
}

.animate {
    animation-name: move-and-change-color;   
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
}

@keyframes move-and-change-color {
    0% {
        transform: translateX(0);
    }

    80% {
        transform: translateX(100px);
        background-color: #2196F3;
    }

    100% {
        transform: translateX(100px);
        background-color: #EF5350;
    }
}
var square = document.getElementById('square');

square.addEventListener('click', function() {
    square.className += " animate";
});

var moveAndChangeColor = [
    { 
        transform: 'translateX(0)',
        background: '#2196F3'    // blue
    },
    { 
        offset: 0.8,
        transform: 'translateX(100px)', 
        background: '#2196F3'    // blue
    },
    {
        transform: 'translateX(100px)',
        background: '#EF5350'    // red
    }
];

var circle = document.getElementById('circle');

circle.addEventListener('click', function() {
    circle.animate(moveAndChangeColor, {
        duration: 400,
        fill: 'forwards'
    });
});

Animace code>@keyframes by měla být známá většině vývojářů, takže se na ni nejprve podíváme.

Přístup CSS

Naše CSS animace je definována v bloku code>@keyframes, který představuje časovou osu všech přechodů. Jakmile máme naši choreografii definovanou, můžeme ji namapovat na selektor prostřednictvím vlastnosti animace a jejích možností.

.animate {
    animation-name: move-and-change-color;   
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
}

@keyframes move-and-change-color {
    0% {
        transform: translateX(0);
    }

    80% {
        transform: translateX(100px);
        background-color: #2196F3;
    }

    100% {
        transform: translateX(100px);
        background-color: #EF5350;
    }
}

Chceme, aby se animace spustila při interakci uživatele, takže budeme muset také vytvořit posluchač události po kliknutí, který přidá třídu CSS k požadovanému prvku:

var square = document.getElementById('square');

square.addEventListener('click', function() {
    square.className += " animate";
});

Ačkoli to funguje docela dobře, přístup CSS se zdá poněkud neintuitivní, protože definujeme, co se stane v šablonách stylů, ale ve skutečnosti to spustíme v JavaScriptu. Máme také velmi omezenou kontrolu nad animací, jakmile byla vyvolána. Oba tyto problémy lze vyřešit přechodem na Web Animation API.

Přístup JavaScript

Naši JavaScriptovou animaci můžeme popsat pomocí téměř stejných přechodů, jaké jsme použili v příkladu CSS:

var moveAndChangeColor = [
    { 
        transform: 'translateX(0)',
        background: '#2196F3'    // blue
    },
    { 
        offset: 0.8,
        transform: 'translateX(100px)', 
        background: '#2196F3'    // blue
    },
    {
        transform: 'translateX(100px)',
        background: '#EF5350'    // red
    }
];

Každý objekt v poli představuje stav animace. Stavy jsou rovnoměrně rozloženy v čase (3 stavy - 0 %, 50 %, 100 %), pokud nezměníme načasování pomocí offset možnost, jako jsme to udělali se středním stavem.

Poté, co jsme definovali naše pole animací, jej můžeme vyvolat pomocí metody animate(). Jako druhý argument bere objekt se stejnými možnostmi jako vlastnost CSS animation, i když s mírně odlišnými názvy (např. animation-fill-mode je fill , animation-iteration-count je iteration , atd.).

var circle = document.getElementById('circle');

circle.addEventListener('click', function() {
    circle.animate(moveAndChangeColor, {
        duration: 400,
        fill: 'forwards'
    });
});

Jak můžete vidět, přístup JavaScriptu je mnohem organizovanější s animací uloženou v proměnné a animate() metoda používaná pro jeho vyvolání, kdykoli to potřebujeme.

Ovládání animací

Web Animation API také umožňuje snadno ovládat přehrávání animace mnoha způsoby. animate() metoda vrací objekt Animation, který můžeme uložit do proměnné a později na ni odkazovat.

var animation = elem.animate(transitions, options);

Rozhraní nám poskytuje následující metody:

  • pause() – Zmrazí animaci v jejím aktuálním stavu.
  • play() – Obnoví animaci nebo ji restartuje, pokud byla dokončena.
  • reverse() – Přehraje přechody pozpátku.
  • finish() – Přejde na konec animace (nebo na začátek, pokud je obrácená).
  • cancel() – zastaví přehrávání a vrátí se do počátečního stavu.

Níže je malé demo s indikátorem načítání, který se nekonečně opakuje. Nastavili jsme tlačítka pro různé události, abyste si je mohli vyzkoušet:

var spinner = document.getElementById('spinner');
var spinnerAnimation = spinner.animate([
    {
        transform: 'rotate(0)'
    },
    {
        transform: 'rotate(359deg)'
    }
], {
    duration: 1000,
    iterations: Infinity
});

document.getElementById('pause').addEventListener('click', function() { 
  spinnerAnimation.pause();
});
document.getElementById('play').addEventListener('click', function() { 
  spinnerAnimation.play(); 
});
document.getElementById('reverse').addEventListener('click', function() { 
  spinnerAnimation.reverse(); 
});
document.getElementById('cancel').addEventListener('click', function() { 
  spinnerAnimation.cancel(); 
});
<div id="spinner"></div>

<p>Try controlling the animation:</p>
<button id="pause">Pause</button>
<button id="play">Play</button>
<button id="reverse">Reverse</button>
<button id="cancel">Cancel</button>
#spinner {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid #e2e2e2;
    border-top-color: #186aab;
    margin: 50px;
}

Vlastnosti a posluchače událostí

Objekt Animation se vrátil z animate() obsahuje několik užitečných vlastností, které nám umožňují přístup k možnostem, jako je aktuální čas, rychlost přehrávání a další. Ačkoli některé jsou pouze pro čtení, většinu vlastností lze použít jako nastavovače a získávání.

Kód JS si můžete prohlédnout v editoru níže, abyste získali představu o tom, jak fungují. Úplný seznam nemovitostí naleznete na MDN.

var spinner = document.getElementById('spinner');
var spinnerAnimation = spinner.animate([
    {
        transform: 'rotate(0)'
    },
    {
        transform: 'rotate(359deg)'
    }
], {
    duration: 1000,
    iterations: Infinity
});

document.getElementById('half').addEventListener('click', function() { 
  spinnerAnimation.playbackRate = 0.5; 
});
document.getElementById('normal').addEventListener('click', function() { 
  spinnerAnimation.playbackRate = 1; 
});
document.getElementById('double').addEventListener('click', function() { 
  spinnerAnimation.playbackRate = 2; 
});
document.getElementById('triple').addEventListener('click', function() { 
  spinnerAnimation.playbackRate = 3; 
});
<div id="spinner"></div>

<p>Set Playback Speed:</p>
<button id="half">0.5</button>
<button id="normal">Normal</button>
<button id="double">2</button>
<button id="triple">3</button>
#spinner {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid #e2e2e2;
    border-top-color: #186aab;
    margin: 50px;
}

Kromě toho nám rozhraní Web Animation API poskytuje dvě užitečné obslužné rutiny událostí pro dokončení nebo zrušení animace:

spinnerAnimation.addEventListener('finish', function() {
    // Animation has completed or .finish() has been called.
    doSomething();
});

spinnerAnimation.addEventListener('cancel', function() {
    // Animation has been canceled.    
    doSomething();
});

Podpora a výkon

Většina funkcí webové animace je volně dostupná v prohlížečích Chrome a Firefox, přičemž implementace Edge a Safari jsou v práci (caniuse). K dispozici je také dobře udržovaný open-source polyfill, který lze použít při čekání na plné pokrytí prohlížečem.

Pokud jde o výkon, neměl by být žádný rozdíl ve srovnání s běžnými přechody CSS, protože prohlížeče používají pro oba stejný engine. Pokud se budete držet pouze animace vlastností, které nezpůsobují překreslení, jako je transform a opacity , animace by si měly udržovat stálou frekvenci 60 snímků za sekundu.

Závěr

Web Animation API poskytuje vývojářům úžasný nový způsob, jak vytvářet a ovládat webové animace pomocí pouhého JavaScriptu. Pro animace, které jsou vyvolány při interakci uživatele nebo jiných dynamických událostech, je to skvělá zpráva, protože celou animaci lze provést v kódu ovladače, aniž byste museli skákat do souboru CSS pro skutečné přechody.

Tento článek popsal většinu funkcí nového API, ale pokud se chcete dozvědět více, zde je několik vynikajících zdrojů, které vřele doporučujeme:

  • Používání rozhraní Web Animations API na MDN
  • Animatelo – Přepracování Animate.css pomocí rozhraní Web Animation API
  • Pojďme si promluvit o rozhraní Web Animations API – pětidílný tutoriál od Daniela C. Wilsona