Web Animation API em JavaScript

A Web Animation API é uma ferramenta que permite criar e controlar animações diretamente via JavaScript. Para isso, utiliza-se o método animate() nos elementos da página.

animate(keyframes, options)

O primeiro parâmetro, keyframes, contém uma definição dos quadros-chave da animação. O segundo parâmetro, options, é um objeto que especifica as configurações gerais da animação. As principais propriedades em options incluem:

delay: especifica o atraso, em milissegundos, antes do início da animação.
endDelay: define o atraso, em milissegundos, após o término da animação.
fill: determina como o estilo do elemento será aplicado antes e depois da execução da animação (valores possíveis: none, forwards, backwards, both, auto).
iterationStart: define a iteração na qual a animação começa.
iterations: número de repetições da animação (Infinity para repetir indefinidamente).
duration: duração da animação, em milissegundos.
direction: direção da animação (valores possíveis: normal, reverse, alternate, alternate-reverse).
easing: comportamento da transição da animação (valores comuns: ease, ease-in, ease-out, ease-in-out ou uma curva personalizada com cubic-bezier).

O método animate() retorna um objeto do tipo Animation, que pode ser usado para manipular e controlar a animação em tempo de execução.

Exemplo: Animação com CSS

Este exemplo implementa uma animação básica utilizando apenas CSS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Animation</title>
    <style>
        @keyframes frames {
            0% { transform: scale(2); opacity: 0.2; }
            30% { transform: scale(3); opacity: 0.4; }
            60% { transform: scale(4); opacity: 0.6; }
            100% { transform: scale(5); opacity: 0.8; }
        }

        #circle {
            width: 50px;
            height: 50px;
            opacity: 0.2;
            background-color: red;
            margin: 100px;
            border-radius: 25px;
            animation: frames 500ms ease-in-out 10ms infinite alternate both;
        }
    </style>
</head>
<body>
    <div id="circle"></div>
</body>
</html>

Neste exemplo, a propriedade @keyframes define os quadros da animação. Cada quadro especifica os valores das propriedades do elemento em diferentes momentos. Por exemplo, o quadro 0% representa o estado inicial da animação, enquanto o quadro 100% representa o estado final.

Os valores utilizados na propriedade animation são os seguintes:

500ms: duração da animação
ease-in-out: comportamento da transição
10ms: atraso antes do início da animação
infinite: número de repetições
alternate: direção da animação
both: estilo do elemento antes e depois da animação

Exemplo: Web Animation API

A seguir, a mesma animação é recriada utilizando o Web Animation API:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Animation API</title>
    <style>
        #circle {
            width: 50px;
            height: 50px;
            opacity: 0.2;
            background-color: red;
            margin: 100px;
            border-radius: 25px;
        }
    </style>
</head>
<body>
    <div id="circle"></div>
    <script>
        const circle = document.getElementById("circle");

        const frames = [
            { transform: "scale(2)", opacity: 0.2, offset: 0 },
            { transform: "scale(3)", opacity: 0.4, offset: 0.3 },
            { transform: "scale(4)", opacity: 0.6, offset: 0.6 },
            { transform: "scale(5)", opacity: 1.0, offset: 1 }
        ];

        const config = {
            duration: 500,
            easing: "ease-in-out",
            delay: 10,
            iterations: Infinity,
            direction: "alternate",
            fill: "both"
        };

        circle.animate(frames, config);
    </script>
</body>
</html>

Neste exemplo, os quadros da animação são definidos como um array de objetos. Cada quadro representa um estado da animação e utiliza a propriedade offset para especificar o momento no qual deve ser exibido, em relação à duração total (semelhante ao valor percentual nos quadros CSS).

Controle de Animações

O objeto Animation retornado pelo método animate() permite controlar a animação por meio de métodos, como:

pause(): pausa a animação.
play(): reinicia a animação.
cancel(): cancela a animação.
finish(): finaliza a animação.

Além disso, é possível ajustar a velocidade da animação dinamicamente utilizando a propriedade playbackRate.

Aqui está um exemplo que demonstra como controlar uma animação com botões:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animation Control</title>
    <style>
        #rect {
            width: 50px;
            height: 50px;
            background-color: green;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div>
        <button id="pause">Pause</button>
        <button id="play">Play</button>
        <button id="cancel">Cancel</button>
        <button id="faster">Faster</button>
        <button id="slower">Slower</button>
    </div>
    <div id="rect"></div>
    <script>
        const rect = document.getElementById("rect");

        const frames = [
            { marginLeft: "50px", offset: 0 },
            { marginLeft: "100px", offset: 0.3 },
            { marginLeft: "150px", offset: 0.6 },
            { marginLeft: "200px", offset: 1 }
        ];

        const config = {
            duration: 600,
            easing: "ease-in-out",
            iterations: Infinity,
            direction: "alternate"
        };

        const animation = rect.animate(frames, config);

        document.getElementById("pause").addEventListener("click", () => animation.pause());
        document.getElementById("play").addEventListener("click", () => animation.play());
        document.getElementById("cancel").addEventListener("click", () => animation.cancel());
        document.getElementById("faster").addEventListener("click", () => animation.playbackRate *= 2);
        document.getElementById("slower").addEventListener("click", () => animation.playbackRate /= 2);
    </script>
</body>
</html>

Neste exemplo, a animação move um retângulo para a direita e para a esquerda indefinidamente. Os botões permitem controlar a animação em tempo real, ajustando sua velocidade ou pausando, reiniciando e cancelando.

Controlando Animação com Animation API em JavaScript