En ES6 JavaScript, la animación se puede realizar de dos formas. El JavaScript de ES6 se puede usar para mover <div> , <img> y muchos otros elementos HTML.
- Usando el método setInterval(): El método setInterval() de JavaScript toma dos argumentos. Una función y un entero. Se termina usando el método clearInterval() .
- Uso del método requestAnimationFrame(): El método requestAnimationFrame() toma una función de argumento único. Ejecutará la función cuando la pantalla esté lista para aceptar el siguiente repintado. Entonces, llamar al método requestAnimationFrame() solo una vez resulta ser bastante insignificante. El efecto animado ocurre cuando lo llamamos recursivamente, luego la animación deseada se crea cuadro por cuadro, cada cuadro se llama cuando el navegador está listo para ello.
Uso del método setInterval(): este método se usa tradicionalmente para producir efectos de animación a través de JavaScript. Esto se basa en la ejecución repetida de algún código para realizar cambios en el elemento cuadro por cuadro.
anim = setInterval(fn, t);
The function fn is called after every t milliseconds.
clearInterval(anim);
It terminates the above process.
Ejemplo: si la función fn produce un cambio en el estilo del elemento, se puede usar setInterval(function, t) para producir cambios graduales en el estilo del elemento después de cada intervalo de tiempo. Si el intervalo de tiempo es lo suficientemente pequeño, los cambios parecen continuos, produciendo así un efecto de animación.
html
<!DOCTYPE html>
<html>
<head>
<title>
ES6 | Animation
</title>
<style>
#background {
width: 400px;
height: 400px;
position: relative;
background: black;
}
#block {
width: 50px;
height: 50px;
position: absolute;
background-color: white;
border: 2px red solid;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<div id="background">
<div id="block"></div>
</div>
<br>
<button onclick="animation()">Click here</button>
<script>
function animation() {
var can = document.getElementById("block");
var i = 0;
// Call after 10 ms
var id = setInterval(makeframe, 10);
function makeframe() {
// Terminate at boundaries
if (i == 347) {
clearInterval(id);
}
else {
i++;
// Setting the top style
can.style.top = i + 'px';
// Setting the left style
can.style.left = i + 'px';
}
}
}
</script>
</center>
</body>
</html>
Producción:
Desventajas:
- El intervalo de tiempo (t) especificado puede no cumplir con los recursos del sistema del usuario, lo que genera un retraso inconsistente entre las tramas.
- El uso de setInterval() conduce a una condición llamada Layout Thrashing.
Uso del método requestAnimationFrame(): Las desventajas encontradas al usar setInterval() llevan a la introducción del método requestAnimationFrame(). El método le permite ejecutar código en el siguiente repintado de pantalla disponible, por lo que se sincroniza con el navegador del usuario y la preparación del hardware para realizar cambios en la pantalla.
function makeframe {
..... ......
requestAnimationFrame(makeframe); // Recursive call
}
makeframe(); // Initiation
Aquí la terminación se produce mediante la función cancelAnimationFrame(). El funcionamiento total de la animación junto con su finalización se muestra a continuación.
function makeframe {
..... ......
if(.. ..){cancelAnimationFrame(anim);} // Termination
anim = requestAnimationFrame(makeframe); // Recursive call
}
makeframe(); // Initiation
Por lo general, requestAnimationFrame() se ejecuta a 60 fps. Para reducir la velocidad, podemos usar la función setTimeout(). Su funcionamiento se muestra a continuación.
function makeframe {
var rate = fps;
setTimeout(function() { // Timeout use
..... ......
if(.. ..) {cancelAnimationFrame(anim);} // Termination
anim = requestAnimationFrame(makeframe); // Recursive call
}, 1000/rate);
}
makeframe(); // Initiation
Ejemplo: aquí la forma más cómoda de ralentizar/acelerar la animación es ajustar la magnitud del cambio en cada fotograma.
html
<!DOCTYPE html>
<html>
<head>
<title>ES6 | Animation</title>
<style>
#background {
width: 200px;
height: 200px;
position: relative;
background: black;
}
#block {
width: 50px;
height: 50px;
position: absolute;
background-color: white;
border: 2px red solid;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">GeeksforGeeks</h1>
<div id="background">
<div id="block"></div>
</div>
<br>
<button onclick="animation()">Click here</button>
<script>
function animation() {
var can = document.getElementById("block");
var i = 0;
var rate = 30;
function makeframe() {
setTimeout(function() {
var anim =
requestAnimationFrame(makeframe);
if (i == 146) {
// Terminate at boundaries
cancelAnimationFrame(anim);
}
else {
i++;
// Setting the top style
can.style.top = i + 'px';
// Setting the left style
can.style.left = i + 'px';
}
}, 1000 / rate);
}
makeframe();
}
</script>
</center>
</body>
</html>
Producción:
Nota: ambos métodos, cuando se usan hábilmente, se pueden usar para crear animaciones muy complejas (por ejemplo, que se pueden usar en el desarrollo de juegos).
Navegadores compatibles: los navegadores compatibles con la animación ES6 se enumeran a continuación:
- Google Chrome
- explorador de Internet
- Firefox
- Safari
- Ópera
Publicación traducida automáticamente
Artículo escrito por jishnubasavaraju y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA