Hoy en día, se introducen varias tecnologías de desarrollo web para crear páginas web elegantes. Al hablar de páginas web elegantes, una de las cosas más importantes que me vienen a la mente es la animación. Hay muchas formas de generarlos, CSS moderno es una de ellas, pero JavaScript siempre ha sido una opción poderosa para hacerlo.
El requestAnimationFrame() es uno de los métodos presentes en JavaScript para incorporar poderosamente animaciones asombrosas y simples dentro de nuestro proyecto. Se usaron métodos anteriores como setTimeout() o setInterval() , lo cual estaba bien pero ralentiza todo el proceso. El principal problema con ellos era de sincronización. El tiempo de transición era muy lento y no coincidía perfectamente con el sistema del usuario.
Aquí, requestAnimationFrame() entró en escena. Básicamente, el método requestAnimationFrame() se sincroniza fácilmente con los tiempos de su navegador y genera una llamada para realizar la animación específica antes de la carga real de la pantalla. Además, también ralentiza su proceso cuando la animación no está en uso, lo que ahorra recursos.
Sintaxis:
window.requestAnimationFrame( callback );
Parámetro: este método acepta un solo parámetro como se mencionó anteriormente y se describe a continuación:
- devolución de llamada: a menos que desee que la animación se detenga, debe escribir la función de devolución de llamada para que se llame a sí misma para que se realice una solicitud al siguiente cuadro. La función de devolución de llamada toma la marca de tiempo o simplemente un valor de tiempo en el que debería comenzar a ejecutarse.
Valores devueltos: este método devuelve un valor entero largo distinto de cero que actúa como una identidad única para la entrada de animación en la función de devolución de llamada.
Los siguientes ejemplos ilustran el método requestAnimationFrame() en la API web:
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<title>
Window.requestAnimationFrame() Method
</title>
</head>
<body>
<div id="gfg">
<h1 style="color:green;">GeeksforGeeks</h1>
<h4>Window.requestAnimation()</h4>
</div>
<script type="text/javascript">
// Setting the start point for animation
var start = null;
var element = document.getElementById('gfg');
function startAnim(timestamp) {
// Timestamp is an integer that represents the number
// of seconds elapsed since January 1 1970.
if (!start) start = timestamp;
// Setting the difference between timestamp
// and the set start point as our progress
var progress = timestamp - start;
// Moving our div element
element.style.transform =
'translateX(' + Math.min(progress / 10, 700) + 'px)';
window.requestAnimationFrame(startAnim);
}
window.requestAnimationFrame(startAnim);
</script>
</body>
</html>
Producción:
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<style>
div {
position: absolute;
left: 10px;
top: 50px;
padding: auto;
color: white
}
h1 {
color: green;
}
</style>
</head>
<body>
<div id="gfg">
<h1>GeeksforGeeks</h1></div>
<center>
<button onclick="start()">Start the animation</button>
</center>
<script type="text/javascript">
var x = document.getElementById("gfg");
// Initializing variables
var requestId;
var stopped;
var starttime;
function startAnim(time) {
// Set left style to a function of time if it is not stopped
if (!stopped) {
// We use the difference between time returned
// by Data.now() and the animation starttime
x.style.left = ((Date.now() - starttime) / 10 % 700) + "px";
requestId = window.requestAnimationFrame(startAnim);
}
}
function start() {
// Return the number of milliseconds since 1970/01/01:
starttime = Date.now();
// Starting point of animation
requestId = window.requestAnimationFrame(startAnim);
stopped = false; // Means animation will not stop
}
</script>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con el método Window.requestAnimationFrame() se enumeran a continuación:
- Google Chrome 23.0
- Internet Explorer 10.0
- Firefox 11.0
- Ópera 10.0
- Safari 6.1