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 (Infinitypara 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-outou uma curva personalizada comcubic-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çãoease-in-out: comportamento da transição10ms: atraso antes do início da animaçãoinfinite: número de repetiçõesalternate: direção da animaçãoboth: 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.
Documentação oficial: