martes, 28 de mayo de 2013

Animaciones repetivas en javascript - Parte 6

“Es muy interesante lo que tú compartes, Juan, pero el requestAnimationFrame no es compatible con todos los navegadores”. Es verdad, tienen razón. El cross-browser es el problema eterno para quienes nos dedicamos al diseño de páginas web y ésta no es la excepción
Hay varias soluciones: unas complicadas y otras sencillas. No nos queremos complicar, por lo que iremos directo a la más sencilla de todas.
El único requisito es tener la archiconocida librería Jquery. Agregaremos este pequeño archivo js: jquery.requestAnimationFrame.min.js que lo pueden descargar desde aquí.

Para los despistados: una vez descargado, no hay que olvidarse de agregarlo entre las etiquetas <head> y </head>:
<head>

<script src="jquery.requestAnimationFrame.min.js"></script>
</head>
¡Listo! La animación funcionará en todos los navegadores modernos. Por supuesto, no esperes milagros, la compatibilidad es limitada. En la siguiente imagen puedes ver la tabla de compatibilidad:


Para ver la tabla en su versión original: http://caniuse.com/requestanimationframe

por Juan
para ae Soluciones web - Diseño de páginas web en Argentina



domingo, 26 de mayo de 2013

Animaciones repetivas en javascript - Parte 5

Hoy veremos cómo aplicar la función matemática del seno a nuestra animación. La idea general es la siguiente: con cada lectura de la función requestAnimationFrame(moverDiv) queremos nuestra función del seno arroje un valor diferente. Por ello, tenemos que procurar que el argumento de la función seno (es decir, nuestra x) vaya cambiando con cada lectura.
Manos a la obra. En primer lugar debemos definir un valor inicial para nuestra x:
var x = 0;
Luego debemos procurar modificar mínimamente esta variable al final del moverDiv:
moverDiv(){   //código   x=x+0.1   window.requestAnimationFrame(moverDiv);}
Por ultimo, aplicamos nuestros conocimientos de matemática (!):
divMovible.style.left = Math.sin(x) + 50  + “px”;
El código final, para un movimiento ondulatorio sin fin:
var divMovible = document.getElementById(‘div_movible’);
var ultimaEjecucion = date.now();
var fps = 30;
var x = 0;
function moverDiv(){
var ahora = date.now();
if( (ahora – ultimaEjecucion) < (1000 / fps) ){
divMovible.style.left = Math.sin(x) + 50  + “px”;
x=x+0.1
}
ultimaEjecucion = date.now();
window.requestAnimationFrame(moverDiv);
}


por Juan
para ae Soluciones web - Diseño de páginas web en Argentina


sábado, 25 de mayo de 2013

Animaciones repetivas en javascript - Parte 4

No es extraño que te preguntes a esta altura cómo hacer para realizar movimientos ondulatorios. Muy bien sabemos que el diseño de una página web animada no puede bastarse con unos movimientos horizontales o verticales uniformes.
Aquí es donde entran en juego los conocimientos de matemática que aprendiste en la escuela. En esta ocasión nos detendremos solamente sobre la función del seno. En el próximo artículo veremos cómo aplicarlo en nuestra función animada.
Bien, ¿recuerdas la función del seno? La función tenía esta forma
y = sen(x)
Y su gráfica era una sinusoide como ésta:

En javascript evitaremos la escritura de “y=” y nos quedaremos sólo con “sen(x)”. En verdad, la función javascript para el seno tendrá la siguiente sintaxis:
Math.sin(x)
La función, como recordarás, arroja un valor para un argumento determinado. Por ejemplo, si nosotros escribiésemos:
alert(Math.sin(1));
al ser leída se dispararía un alert en cuyo contenido obtendremos el resultado de aplicarle el seno a 1, es decir, 0.8414709848.
Como pueden ver en la gráfica, los valores para la función sen(x) se encuentran entre -1 y 1. Esta es la llamada amplitud de onda. Si queremos modificar la amplitud de onda, por ejemplo, para que los valores estén entre -2 y 2, entonces sólo debemos multiplicar el sen(x) por 2:
alert(2*Math.sin(x));
Otras modificaciones importantes son:
*la modificación del período: Math.sin(2*x)
*el corrimiento de la gráfica respecto del eje y: Math.sin(x - 2)
*el corrimiento de la gráfica respecto del eje x: Math.sin(x ) – 2

Todas ellas las puedes encontrar en cualquier manual de la escuela secundaria.

La próxima vez veremos cómo aplicar esto en el diseño de sus páginas web.

por Juan
para ae Soluciones web - Diseño de páginas web en Argentina


viernes, 24 de mayo de 2013

Animaciones repetivas en javascript - Parte 3

En los artículos anteriores hemos presentado una herramienta harto valiosa para quienes se dedican al diseño de páginas web. Me estoy refiriendo a la función javascript requestAnimationFrame, la cual nos permite realizar animaciones repetitivas (o, como veremos en publicaciones siguientes, no tan repetitivas) para nuestros elementos con posición absoluta.
Recuerden que habíamos llegado a escribir el código para lograr que un elemento dentro del documento (en nuestro ejemplo, un div cuya id es ‘div_movible’) cobre movimiento, desplazándose velozmente hacia la izquierda de la pantalla y desaparecer allende los límites de la misma. El código que entonces teníamos era:
var divMovible = document.getElementById(‘div_movible’);
function moverDiv(){
divMovible.style.left = movible.offsetLeft + 1 + “px”;
window.requestAnimationFrame(moverDiv);
}
window.requestAnimationFrame(moverDiv);
Desde ya, no queremos en toda ocasión que los elementos se disparen como truenos de una punta a la otra de nuestras páginas web. Por eso, hoy veremos una forma para controlar la velocidad del movimiento.
El truco consiste en agregar un condicional if al iniciarse la función moverDiv. La condición que debe cumplirse será precisamente de carácter temporal: sólo si ha pasado determinado tiempo desde la última vez que se ejecutó la función, entonces se continuará normalmente con la modificación de la propiedad css.
Comenzaremos agregando dos variables fuera de moverDiv();
var ultimaEjecucion = date.now();
var fps = 30;
Luego, modificaremos ligeramente la función moverDiv según lo indicado:
function moverDiv(){
var ahora = date.now(); if( (ahora – ultimaEjecucion) < (1000 / fps) ){
divMovible.style.left = movible.offsetLeft + 1 + “px”;
}
ultimaEjecucion = date.now();
window.requestAnimationFrame(moverDiv);
}
Sólo si han pasado 30 milisegundos desde la última vez que se ha ejecutado la función,  div_movible se desplazará un píxel hacia la derecha.
Veamos cómo quedaría nuestro código:
var divMovible = document.getElementById(‘div_movible’);
var ultimaEjecucion = date.now();
var fps = 30;
function moverDiv(){
var ahora = date.now(); if( (ahora – ultimaEjecucion) < (1000 / fps) ){
divMovible.style.left = movible.offsetLeft + 1 + “px”;
}
ultimaEjecucion = date.now();
window.requestAnimationFrame(moverDiv);
}
window.requestAnimationFrame(moverDiv);

Espero les sea útil. Cualquier cosa, me escriben.

por Juan
para ae Soluciones web - Diseño de páginas web en Argentina


jueves, 23 de mayo de 2013

DNYTFQXKPUXP

DNYTFQXKPUXP

Animaciones repetivas en javascript - Parte 2

Hemos visto que el diseño de páginas web muchas veces nos demanda realizar animaciones. Si no queremos entregarnos a las fauces de Flash, la mejor opción es trabajar con javascript. La última vez hemos presentado la función javascript requestAnimationFrame. Bien, hoy nos toca profundizar un poco más en todo esto.
Veámoslo poco a poco.
Supón que quieres mover un elemento horizontalmente. Lo primero que debemos tener en cuenta es su propiedad css fundamental: position absolute, y su ubicación espacial con left y top. Sin esto así definido, difícilmente podamos hacer algo.
Bien, ahora debemos pensar en un bucle infinito que, en cada lectura, cambie mínimamente la propiedad css left. Preliminarmente, tendríamos que pensar en algo como esto:
var divMovible = document.getElementById(‘div_movible’);
function moverDiv(){
divMovible.style.left = divMovible.offsetLeft + 1 + “px”;
//moverDiv()
}
Allí arriba hemos definido, en primer lugar, una variable que guarda al elemento que queremos mover. Luego hemos definido una función moverDiv:
1º) modificamos la propiedad css left del elemento que queremos mover, agregándole un nuevo píxel;
2º) recursivamente, llamamos a nuestra función.

Bien, ahora solo nos resta agregar a todo esto el requestAnimationFrame. La función moverDiv será llamada desde el interior del requestAnimationFrame (es decir, como su parámetro), tanto en el interior del bucle como desde fuera de él:
var divMovible = document.getElementById(‘div_movible’);
function moverDiv(){
divMovible.style.left = movible.offsetLeft + 1 + “px”;
window.requestAnimationFrame(moverDiv);
}
window.requestAnimationFrame(moverDiv);
Más adelante daré nuevas precisiones sobre su uso. Por el momento, ya tienes un div animado, que se desplazará infinitamente hacia la derecha.

por Juan
para ae Soluciones web - Diseño de páginas web en Argentina



miércoles, 22 de mayo de 2013

Animaciones repetivas en javascript - Parte 1

Cuando diseñamos páginas web muchas veces deseamos animar elementos. Las posibilidades son varias. La opción más sencilla es utilizar la ya conocida librería JQuery y, si hicieran falta, los muchos pluings que están a nuestro alcance.
Aquella, ciertamente, es una salida rápida y eficaz para solucionar animaciones no repetitivas. Sin embargo, si alguna vez has intentado diseñar una página web con movimientos repetitivos te habrás percatado de que aquella no es una salida siquiera admisible.
¿Por qué?
Bien, la respuesta la puedes hallar por ti mismo. Intenta hacer un bucle con la función jquery animate y no tardarás en percatarte que has abierto una puerta para colgar tu PC.
¿La solución?
Muy fácil, haz tú mismo las animaciones. Los diseñadores web y programadores javascript utilizan una función innovadora: requestAnimationFrame. La misma informa al navegador que la función-parámetro es una animación. De esta forma los frames per second de la animación se adaptarán a la frecuencia de actualización de la pantalla, evitándote miles de inconvenientes. Lo único que debes hacer es un bucle donde cada lectura del script supone una modificación en los estilos css del elemento que buscas animar.

Aquí podrás encontrar más información al respecto:


En poco seguiremos hablando de todo esto.

por Juan
para ae Soluciones web - Diseño de páginas web en Argentina