JavaScript Cookie: requestAnimationFrame

Posted on April 12, 2011

0


programming cookies


¿Qué es un requestAnimationFrame?

Esta función traída por los Dioses de los browser nos introduce a un mundo donde es posible optimizar el uso del CPU y procesamiento del mismo en los computadores  destinatarios, haciendo eficiente el dibujado de las animaciones elaboradas por JavaScript, deteniéndolas por completo cuando la pagina web que las incluye no esté siendo utilizada por el usuario. Es decir, si la pagina animada no se observa en la pantalla de tu computador, esta función detiene el dibujado de los gráficos animados. Genial no? Entonces veamos un ejemplo de su uso.

Presentación html.

Esto representara la cara de nuestro ejemplo para efectos de demostración. Muy simple como podrán ver, nada elegante. Note que se llaman dos JavaScript, ambos podrá verlos a continuación.

<!DOCTYPE HTML>
<html lang="es">
 <head>
 <title>Ejemplo RequestAnimationFrame</title>
 <script src="js/RequestAnimationFrame.js"></script>
 </head>
 <body>
   <script src ="js/movement.js"></script>
<div style="width:256px">
   <!--<a href="javascript:location='view-source: ' + window.location;">observa la fuente: </a><br /><br/>-->
<p align="center"> Ejemplo instructivo de un <b>RequestAnimationFrame</b></p>
   </div>
 </body>
</html>

Uso del requestAnimationFrame.

Esta función realizada en JavaScript utiliza la habilidad de la función en nuestra sencilla pagina. En pocas palabras, esta función establece que mientras la pagina web no es observada se detiene por completo el cálculo de dibujo por parte de la computadora. La función funciona muy bien en la mayoría de lo browser actuales, a excepción de algún bug peculiar de frame rate en mozilla.

/** * Basado en el codigo fuente realizado por: * paul irish * modificado parcialmente y comentado por Alonso Lamas */
/** * La Funcion a continuacion evita el dibujado y calculo de animacion cuando estas no estan en uso prioritario por el browser. Es decir, mientras no veas la pagina el calculo de dibujado de las animaciones se detiene, optimizando el uso del cpu. */
if ( !window.requestAnimationFrame ) {
 window.requestAnimationFrame = ( function() {
 return 	window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame || /* este paquete elaborado para mozilla presenta algunos bug particulares como el decremento de frame rate, si te causa problemas puedes comentarlo*/
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
    function( /* function FrameRequestCallback */ callback, /* DOMElement Elemento */ element ) {
                window.setTimeout( callback, 1000 / 60 );
   };
 } )();
}

Los dibujitos y animaciones con que trabajamos el ejemplo.

Nada que decir, simplemente la elaboración de la animación con la que puedes observar el ejemplo. Si observas bien se utiliza la maravillosas propiedades de las canvas del html5.

/* en este codigo es una muestra sobre la cual trabajara nuestro requestAnimationFrame, el cual se basa en una simple animacion de dos circulos concentricos con funciones matematicas en un eje de coordenadas definido en funcion del tiempo*/
 var canvas, context;
init();
animate();
 function init() {
     canvas = document.createElement( 'canvas' );
     canvas.width = 256;
     canvas.height = 256;
     context = canvas.getContext( '2d' );
     document.body.appendChild( canvas );
  }

 function animate() {
     requestAnimationFrame( animate );
     draw();
  }
function draw() {
     var time = new Date().getTime() * 0.002;
     var x = Math.sin( time ) * 96 + 128;
     var y = Math.cos( time * 0.9 ) * 96 + 128;
    context.fillStyle = 'rgb(0,0,0)';
    context.fillRect( 0, 0, 256, 256 );
    context.beginPath();
    context.fillStyle = 'rgb(0,0,0)';
   /*context.rect(x,y,30,30);*/
   context.arc( x, y, 30, 0, Math.PI * 2, true );
   context.lineWidth=5;
   context.strokeStyle="white";
   context.stroke();
   context.closePath();

   context.beginPath();
   context.fillStyle = 'rgb(255,0,0)';
   /*context.rect(x - 15 ,y -15,30,30);*/
   context.arc( x, y, 10, 0, Math.PI * 2 , true );
   context.lineWidth=10;
   context.strokeStyle="white"; /* line color */
   context.stroke();
   context.closePath();
   context.fill();
 }
Posted in: Code