Transiciones con javascript (transiciones): Se encontraron 8 apuntes:
Las transiciones que más vemos suelen hacerse con un par de fotos (o cualquier tipo de imagen), pero nosotros plantearemos las transiciones entre capas (elementos div) de una página web.
Los elementos que vamos a usar son las postales que se pueden ver en esta página, pero con otra escala (100%). Nos hemos ayudado de un comodín que hemos llamado postal, y para ver la postal adjunta podemos pinchar en el siguiente enlace: Feliz Navidad
Lo cierto es que detrás de la postal que estamos viendo (id=3), tenemos otra (id=2), pero la que vemos la está tapando. Podemos probar el efecto fundido para destaparla, pinchando en el botón adjunto (solo activo en el modo apunte (Transiciones: Introducción).
En una discusión de los foros del web (ver sector "Mis recomendaciones") afirmaba que hay efectos que pueden hacerse con una sola línea, y viendo el código que hemos aplicado la línea en cuestión es ésta:
Publicado el día 20 de octubre de 2011for (i = 1; i > 0; i -= .04) setTimeout('tag("capa2").style.opacity = ' + i, 1000 - (i * 1000));
En el código tenemos algunas líneas más pero que no pertenecen a la transición, como la inhabilitación del botón durante la transición (evitando a los odiosos "dedos flojos"), o la inicialización necesaria para la transición inversa que seguramente con lo visto, cualquiera puede ser capaz de implementarla.
Analizando el código línea a línea (¡Je, je!) nos encontramos con un bucle desde uno (1) hasta cero (0), con intervalos decrecientes de 0.04, o sea que tendremos 25 números (0.96, 0.92, 0.88, ..., 0.08, 0.04, 0.0) que serán los veinticinco (25) valores intermedios de opacidad de la capa visible que terminarán dejándola invisible; y la temporización va desde cero (1000 - (1 * 1000)), hasta mil (1000 - (0 * 1000)), o sea que el valor mayor en la temporización será 1000 milisegundos (o sea un segundo).
Para decidir que sean veinticinco (25) transiciones intermedias no hemos hecho ningún tipo de estudio científico, ni de mercado, tan solo hemos considerado que las películas digitales suelen tener ese número de fotogramas por segundo (seguro que algún estudio científico hay detrás).
Este sencillo ejemplo no es suficiente si queremos crear una librería de transiciones como en nuestra página sobre Imágenes (desplegar el "Proyector de diapositivas"), pero vamos a renseñar unas pocas pautas para ello:
En la transición de ejemplo de esta página no se consideran cosas importantes como la zonas calientes. Además, para albergar diversas transiciones tendremos que trabajar con objetos que aún no hemos definido.
Vamos a definir un objeto con todas las características que necesitamos para las transiciones.
En el sistema deben realizarse las transiciones con algunos valores constantes como el tamaño (anchura y altura), la duración (en este caso en milisegundos) y el número de fotogramas o transiciones intermedias. También es bueno conocer las capas u objetos participantes, el elemento contenedor y el que esté visible o activo en cada momento.
Nuestro objeto en su creación deberá a la vez tener preparadas cosas adicionales que también comentaremos.
function objetoTransiciones(l, f, an, al, c, v, b) {
this._lapsus_ = l;// milisegundos de la transición
this._fotogramas_ = f;// número de fotogramas por _lapsus_
this._escala_ = l / f;
this._tiempos_ = [];
this._acciones_ = [];
this._ancho_ = an;// anchura de la zona de transición
this._alto_ = al;// altura de la zona de transición
this._capas_ = c;// array con el id de las capas afectadas
this._visible_ = v;// primera capa visible al inicio. Se actualizará en cada transición...
this._base_ = b;// contenedor de las capas
_resguardamos = tag(this._visible_).cloneNode(true);
tag(this._visible_).parentNode.removeChild(tag(this._visible_))
tag(this._base_).appendChild(_resguardamos);
this.id_temp = "objetoTransiciones_" + Math.random() * 1000;
capa_temp = document.createElement("div");
capa_temp.style.position = "absolute";
capa_temp.id = this.id_temp;
tag(this._base_).appendChild(capa_temp);
this._limpiar_ = function() {
while (tag(this.id_temp).hasChildNodes())
tag(this.id_temp).removeChild(tag(this.id_temp).firstChild);
}
this.asignaciones = function(x) {
_resguardar = tag(this._visible_).cloneNode(true);
tag(this._visible_).parentNode.removeChild(tag(this._visible_));
tag(this._base_).appendChild(_resguardar);
_resguardar = tag(x).cloneNode(true);
tag(x).parentNode.removeChild(tag(x));
tag(this._base_).appendChild(_resguardar);
//alert(x);
}
}
Vemos que aparte de los elementos mencionados, se añade durante la creación del objeto una capa que nos será de gran utilidad en algunas transiciones. Puede resultar extraño que no se distingue ninguna transición, pero ese asunto lo explicaremos a continuación.
Cada transición se irá añadiendo al sistema con definiciones externas como vemos en el caso del "fundido", cuyo efecto ya hemos explicado anteriormente: "Transiciones: Introducción" y "Rollover fundido".
objetoTransiciones.prototype.fundido = function(x) {
this._limpiar_()
if (x == this._visible_) {
return;
}
else {
this.asignaciones(x);
this._visible_ = x;
tag(x).style.opacity = "0";
tag(x).style.top = "0";
tag(x).style.left = "0";
for (i = 0; i <= this._lapsus_; i += this._escala_)
setTimeout("tag( + x + ).style.opacity = " + (i / this._lapsus_), (i / this._lapsus_) * this._lapsus_);
}
}
Ya con estas definiciones podemos mostrar nuestras primeras pruebas en un principio con las miniaturas de postales que vemos a la derecha de este párrafo. Solo nos queda poner un par de elementos "calientes", para pinchar y que funcione la transición. Como las capas que hemos usado las hemos identificado con los nombres mini1 y mini2, los enlaces tendrán nombres similares: miniatura 1 y miniatura 2. Para mejorar la semántica de la página, los enlaces son reales, y se pueden editar las postales abriéndolos en una ventana o pestaña nueva.
Otra característica de este objeto es que pueden crearse varios objetos en una misma página... que tal si lo vemos "ampliado":
Evidentemente pueden convivir todos los objetos que deseemos, aunque no creo que sea aconsejable llenar una página con estas transiciones.
No sé exactamente el orden de publicación de las próximas transiciones, pero puedo adelantar de qué tipo y cómo podrán ser:
Desplazamiento: Se ponen las dos capas posicionadas de forma contigua en un mismo contenedor, desplazando este último.
En el caso de arriba nos hemos despreocupado del desbordamiento (estilo overflow), pero en el recuadro siguiente lo implementamos.
Apertura y cierre: Se ponen las dos capas posicionadas de forma contigua pero solo una se muestra.
Consideraremos apertura, cuando la capa visible descubre la oculta, y viceversa.
Barrido: Horizontal o vertical, también podrían considerarse de apertura o cierre, aunque el efecto visual sería igual, por lo que solo implementaremos el tipo apertura, que comentaremos a su debido tiempo.
Mosaico: Se muestran u ocultan pequeños recortes de cada capa.
Las transiciones de desplazamiento pueden hacerse de más de una manera, pero nosotros pondremos las dos presentaciones juntas y modificaremos la zona visible con estilos de posicionamiento.
Para este efecto usaremos tres postales cuyas miniaturas mostramos a continuación:
Los botones representan los cuatro puntos cardinales por donde aparecerán las postales, y para asegurarnos de la compatibilidad con la transición que teníamos (fundido), también le asociamos otro botón.
Al código que ya teníamos del apunte Transiciones: El Objeto, le hemos añadido lo siguiente:
objetoTransiciones.prototype.dn = function(x) {
this._limpiar_();
if (x == this._visible_) {
return;
}
else {
this.asignaciones(x);
_resguardar = tag(this._visible_).cloneNode(true);
_resguardar.id = "id_temp2_" + (Math.random() * 1000);
tag(this.id_temp).appendChild(_resguardar);
_resguardar = tag(x).cloneNode(true);
_resguardar.style.top = -this._alto_ + "px";
_resguardar.style.left = "0";
_resguardar.id = "id_temp2_" + (Math.random() * 1000);
tag(this.id_temp).appendChild(_resguardar);
_resguardar = tag(this.id_temp).cloneNode(true);
tag(this._base_).removeChild(tag(this.id_temp));
tag(this._base_).appendChild(_resguardar);
tag(this.id_temp).style.top = "0";
tag(this.id_temp).style.left = "0";
for (i = 0; i <= this._lapsus_; i += this._escala_) {
setTimeout("tag('" + this.id_temp + "').style.top = '" + ((i / this._lapsus_) * this._alto_) + "px'", (i / this._lapsus_) * this._lapsus_);
}
this._visible_ = x;
}
}
objetoTransiciones.prototype.ds = function(x) {
this._limpiar_();
if (x == this._visible_) {
return;
}
else {
this.asignaciones(x);
_resguardar = tag(this._visible_).cloneNode(true);
_resguardar.id = "id_temp2_" + (Math.random() * 1000);
tag(this.id_temp).appendChild(_resguardar);
_resguardar = tag(x).cloneNode(true);
_resguardar.style.top = this._alto_ + "px";
_resguardar.style.left = "0";
_resguardar.id = "id_temp2_" + (Math.random() * 1000);
tag(this.id_temp).appendChild(_resguardar);
_resguardar = tag(this.id_temp).cloneNode(true);
tag(this._base_).removeChild(tag(this.id_temp));
tag(this._base_).appendChild(_resguardar);
tag(this.id_temp).style.top = "0";
tag(this.id_temp).style.left = "0";
for (i = 0; i <= this._lapsus_; i += this._escala_) {
setTimeout("tag('" + this.id_temp + "').style.top = '" + -((i / this._lapsus_) * this._alto_) + "px'", (i / this._lapsus_) * this._lapsus_);
}
this._visible_ = x;
}
}
objetoTransiciones.prototype.do = function(x) {
this._limpiar_();
if (x == this._visible_) {
return;
}
else {
this.asignaciones(x);
_resguardar = tag(this._visible_).cloneNode(true);
_resguardar.id = "id_temp2_" + (Math.random() * 1000);
tag(this.id_temp).appendChild(_resguardar);
_resguardar = tag(x).cloneNode(true);
_resguardar.style.left = -this._ancho_ + "px";
_resguardar.style.top = "0";
_resguardar.id = "id_temp2_" + (Math.random() * 1000);
tag(this.id_temp).appendChild(_resguardar);
_resguardar = tag(this.id_temp).cloneNode(true);
tag(this._base_).removeChild(tag(this.id_temp));
tag(this._base_).appendChild(_resguardar);
tag(this.id_temp).style.left = "0";
tag(this.id_temp).style.top = "0";
for (i = 0; i <= this._lapsus_; i += this._escala_) {
setTimeout("tag('" + this.id_temp + "').style.left = '" + ((i / this._lapsus_) * this._ancho_) + "px'", (i / this._lapsus_) * this._lapsus_);
}
this._visible_ = x;
}
}
objetoTransiciones.prototype.de = function(x) {
this._limpiar_();
if (x == this._visible_) {
return;
}
else {
this.asignaciones(x);
_resguardar = tag(this._visible_).cloneNode(true);
_resguardar.id = "id_temp2_" + (Math.random() * 1000);
tag(this.id_temp).appendChild(_resguardar);
_resguardar = tag(x).cloneNode(true);
_resguardar.style.left = this._ancho_ + "px";
_resguardar.style.top = "0";
_resguardar.id = "id_temp2_" + (Math.random() * 1000);
tag(this.id_temp).appendChild(_resguardar);
_resguardar = tag(this.id_temp).cloneNode(true);
tag(this._base_).removeChild(tag(this.id_temp));
tag(this._base_).appendChild(_resguardar);
tag(this.id_temp).style.left = "0";
tag(this.id_temp).style.top = "0";
for (i = 0; i <= this._lapsus_; i += this._escala_) {
setTimeout("tag('" + this.id_temp + "').style.left = '" + -((i / this._lapsus_) * this._ancho_) + "px'", (i / this._lapsus_) * this._lapsus_);
}
this._visible_ = x;
}
}
Los nombre "dn", "ds", "do" y "de" serían formas abreviadas de "desplazamiento norte", "desplazamiento sur", etc.
Aunque las transiciones de apertura y de cierre son prácticamente iguales, debemos diferenciar en la implementación cosas importantes.
Antes de mencionar esas diferencias, mostramos los resultados a continuación:
A las postales que hemos usado en el apunte Transiciones: Desplazamientos...
...Hemos añadido entre las transiciones un elemento adicional (el que está leyendo) donde también podríamos mostrar transiciones.
Espero que lo disfruten.
En vez de copiar todo el código de las transiciones de apertura y cierre, mostraremos uno de apertura y otro de cierre, que nos ayudará a indicar algunas diferencias en la implementación.
objetoTransiciones.prototype.an = function(x) {// apertura desde el norte
this._limpiar_();
if (x == this._visible_) {
return;
}
else {
this.asignaciones(x);
_resguardar = tag(this._visible_).cloneNode(true);
tag(this.id_temp).appendChild(_resguardar);
_resguardar = tag(this.id_temp).cloneNode(true);
tag(this._base_).removeChild(tag(this.id_temp));
tag(this._base_).appendChild(_resguardar);
tag(this.id_temp).style.top = "0";
tag(this.id_temp).style.left = "0";
tag(this.id_temp).style.height = this._alto_ + "px";
tag(this.id_temp).style.width = this._ancho_ + "px";
for (i = 1, total = this._fotogramas_; i <= total; i++) {
accion = "tag('" + this.id_temp + "').style.top = '" + -(this._alto_ * i / this._fotogramas_) + "px'";
setTimeout(accion, i * this._escala_);
}
this._visible_ = x;
}
}
Notamos cierta similitud entre el código para los desplazamientos destacando que en ambos casos usamos la capa temporal que superponemos a todas, pero en los desplazamientos colocamos las dos postales pegadas una al lado de la otra mientras que en los efectos de apertura solo necesitamos clonar una sola capa. Al acabar el efecto estarán superpuestas dos capas iguales, pero siempre que usemos una nueva transición, aplicando el método "_limpiar_()" borramos todo el contenido de esa capa temporal.
Hay una diferencia importante con los cierres, cuya implementación mostramos a continuación:
objetoTransiciones.prototype.ce = function(x) {// apertura desde el este
this._limpiar_();
if (x == this._visible_) {
return;
}
else {
this.asignaciones(x);
tag(x).style.left = this._ancho_ + "px";
tag(x).style.top = "0";
for (i = 1; i <= this._fotogramas_; i++) {
accion = "tag('" + x + "').style.left = '" + parseInt(this._ancho_ - ((i / this._fotogramas_) * this._ancho_)) + "px'";
setTimeout(accion, i * this._escala_);
}
this._visible_ = x;
}
}
A simple vista observamos que el número de líneas de código se reduce considerablemente; y es que ya no necesitamos usar la capa temporal porque en principio la capa que tiene que quedar visible se encuentra fuera de la zona visible del sistema, así que tan solo debemos mover esa capa.
Estas nuevas transiciones no solo son efectos laterales sino que también se usan las esquinas. Simplemente, al mismo tiempo realizamos dos acciones (vertical y horizontal).
También podrían realizarse solo una acción a la vez, y nos ha movido a poner el "caso de estudio" añadido a la botonera. Lo llamamos "zig.zag" porque se van realizando movimientos horizontales y verticales alternativamente. Para poderla apreciar hemos ampliado el tiempo de la transición aumentándolo; para ello añadimos un nuevo método que asigna un nuevo valor a la variable de temporización a la vez que se recalcula el tiempo para pasar al siguiente fotograma.
Las transiciones que presentamos ahora se caracterizan por presentar tiras horizontales o verticales de las capas. La implementación es distinta de las que hemos visto hasta el momento porque cada una de esas tiras es un clon de la capa que se está mostrando y al finalizar la transición se descubrirá la nueva capa, así que debemos crear tantos clones como fotogramas hemos declarado.
Con las transiciones de barrido mostradas, podemos pensar que aún nos quedan más en el tintero, pero lo dejaremos para futuros apuntes.
La forma de conseguir nuestro objetivo es clonando la capa visible tantas veces como fotogramas hayamos declarado, pero dentro de otra capa que nos permitirá mostrar esa capa como un recorte. Esas capas clonadas ocultan la que tenemos que mostrar. Para conseguir el efecto "recorte", ponemos la capa del recorte con su tamaño real, pero posicionada con valor negativo según la posición positiva que tuviera que tener (¡je, je!, ¿a que parece un trabalenguas?); y la capa contenedora con ese posicionamiento real y positivo, pero con el tamaño reducido según sea vertical u horizontal de su anchura o altura (estilo width o height). En el ejemplo adjunto, con una altura de 160px; el recuadro resaltado tendría un "top: 32px;" y su contenido "top: -32px". Supongo que tenemos claro que declaramos 5 fotogramas y es un barrido horizontal.
Con las capas creadas y ya puestas ocultando la que debemos mostrar, la temporización dará paso a la eliminación de cada una de esas capas mostradas.
Un truco para no repetir algunas líneas de código, es guardar tanto el tiempo que debemos calcular como las acciones que hay que hacer en sendos arreglos (arrays) que nos ayudará enormemente; por ejemplo, el array de tiempos para una temporización de 1 segundos (mil milisegundos), y cinco fotogramas (como en el ejemplo) tendría estos valores: [200, 400, 600, 800, 1000]; de esta manera nuestras acciones serán borrar cada uno de los cinco recortes, y la instrucción que usamos en el caso concreto n (norte) es:
while(this._acciones_.length > 0) {
setTimeout(this._acciones_.pop(), this._tiempos_.pop());
}
De este modo, basta con cambiar uno de los "pop()'s" por un "shift()" para conseguir el barrido "s" (sur).
También hemos definidos otros métodos en los arreglos que nos han sido de mucha ayuda:
Array.prototype.caos = function() {
nn = Math.round(Math.random() * this.length);
elemento = this[nn];
for (_i = nn; _i < this.length; _i++) this[_i] = this[_i + 1];
this.length--;
return elemento
}
Array.prototype.mitad = function() {
nn = parseInt(this.length / 2);
elemento = this[nn];
for (_i = nn; _i < this.length; _i++) this[_i] = this[_i + 1];
this.length--;
return elemento
}
Array.prototype.extraer = function(n) {
elemento = this[n];
for (_i = n; _i < this.length; _i++) this[_i] = this[_i + 1];
this.length--;
return elemento
}
Vemos como hemos definido un método "caos", que extrae un elemento del array de forma aleatoria; no es difícil adivinar que es justamente lo que necesitamos para los barridos que hemos nombrado de igual manera.
Si alternamos la extracción de las acciones desde el inicio y desde el final de nuestro arreglo (alternar "pop()" y "shift()") obtendríamos lo que llamaríamos el cierre y/o apertura horizontal y/o vertical (en el código fuente puede verse que está implementado el caso horizontal); pero también podría conseguirse sin tantas capas clonadas, así que esos casos los dejaremos para otra ocasión.
Mosaicos y barridos tienen una implementación similar ya que los barridos pueden considerarse un caso particular de mosaico de n zonas x 1. Nos serán muy útiles las alternativas de implementación usadas en los barridos con el uso de arrays.
Con esta serie que hemos nominado "Básicos" hay unas pocas cosas "extrañas" que iremos explicando.
Los dos primeros botones parecen algo enigmáticos. ¿En qué se diferencian?
Hemos visto que usamos un array para indicar la temporización de las acciones, y que tanto éstas como aquellos (acciones y tiempos) pueden obtenerse con el método que hemos añadido a los arreglos llamado "caos", pero también podemos usar el sistema tradicional, con el método Math.random(); y eso es lo que hacemos en el segundo de los botones. Los códigos los vemos a continuación:
objetoTransiciones.prototype.m_caos = function(x) {// mosaico caótico
this.ini_m(x);
while(this._acciones_.length > 0) {
setTimeout(
this._acciones_.pop(), this._tiempos_.caos()
)
}
this._visible_ = x;
}
objetoTransiciones.prototype.m_caos_caos = function(x) {// mosaico caótico caótico
this.ini_m(x);
while(this._acciones_.length > 0) {
setTimeout(
this._acciones_.pop(), Math.floor(Math.random() * this._lapsus_)
)
}
this._visible_ = x;
}
Para evitar código innecesario, solo implementamos en la librería el primero de ellos.
Tantas expectativas con los mosaicos, pero tan solo nos encontramos con seis botones, de los que ya hemos adelantado que solo se quedarán cinco. También nos encontramos unas opciones que en total generan 16 configuraciones distintas, que hemos notado que cambian el efecto de cada botón "Básico". Resumiendo, nos encontramos con 65 efectos distintos con los cuatro interruptores y cinco botones.
Esos botones se asocian a unos pocos métodos de muy pocas líneas como vemos en los casos mostrados, donde se usan los arreglos y se obtienen acciones combinando los métodos mostrados en el apunte "Transiciones: Barridos". Hemos evitado efectos duplicados con algunas combinaciones, por ejemplo el botón "normal" combina el método pop() tanto para extraer las acciones como los tiempos; ese efecto también se podría obtener con las combinaciones "shift-shift" y "mitad-mitad".
Las opciones "i++" y "j++" cambian los bucles crecientes por decrecientes de ambos índices, por lo que no necesitamos usar las combinaciones "pop-shift" y "shift-pop".
Sé que las explicaciones pueden ser incomprensibles para quienes tienen pocos conocimientos de programación. En próximas entregas resumiremos los pasos a seguir para su uso y más efectos que se nos han quedado en el tintero.
Hemos hecho el recuento de las transiciones que implementamos y ya sumamos más de cien, pero aún nos quedan más. Iremos añadiendo a medida que las implementemos, pero siempre se puede obtener la última versión desde este enlace: objeto transiciones.
Tenemos solo con las variantes del tipo "mosaico" 65 transiciones, y antes habíamos mostrado 39 más entre barridos, aperturas, cierres, desplazamientos y fundido.
Ahora vamos a mostrarlas con las mismas fotos que habíamos mostrado en esta página: "Imágenes" (desplegando el "Proyector de diapositivas") que previamente hemos reducido de tamaño. Pinchando sobre la imagen que vemos a continuación, empezará la presentación, que siempre puede detenerse volviendo a pulsar sobre ella.
Para obtener los nombres de todas las transiciones, hemos recorrido todo el objeto creado para las transiciones, y hemos guardado los que tenían por segundo carácter el guión bajo ("_"), porque es una característica común en todas las transiciones.
_efectos_ = new objetoTransiciones(1000, 100, 480, 360, _capas_, "capa1", "capas"); _nombres_ = []; for(_n_ in _efectos_) if (_n_.charAt(1) == "_") _nombres_.push(_n_);
Esos nombres si empiezan por la letra "a" (minúscula), indica que se trata de una transición de apertura; los que empiezan por "b" son "barridos", "c" para cierres, "d" para desplazamientos, "m" para mosaicos y la "e" de efecto, es la que precede al "fundido".
Con este dato, podemos seleccionar solo los "mosaicos", cambiando la última línea del código anterior por esto:
if (_n_.substr(0, 2) == "m_") _nombres_.push(_n_);
A partir de esta característica, hemos preparado con muy pocas líneas de código el siguiente selector de tipo de transición:
Después de hacer el recuento, podemos fácilmente duplicar el número de transiciones cambiando algunos de los valores de inicialización del sistema, por ejemplo el número de fotogramas de las transiciones, cosa que dejaremos pendiente.
Ampliando las transiciones hasta ahora recopiladas, presentamos las que son centradas. Concretamente mostraremos aperturas y cierres horizontales, verticales y centrales (este último sería una combinación de los dos primeros).
Ya que hemos hablado de precargas, realizaremos una precarga de las imágenes, pero en este caso pondremos ficheros animados de poco peso pero de distintos tamaños, que centraremos en un recuadro que simulará una diapositiva.
Mostramos a continuación tres miniaturas de la imagenes que usaremos, y a la derecha la zona de transiciones:
En el recuadro "Controles", seleccione orientación y tipo. Luego pulse sobre la imagen en miniatura, opaca, que quiera mostrar en la diapositiva adyacente.
Con estos seis nuevos casos podemos considerar que hemos terminado con las transiciones básicas. A partir de ahora iremos añadiendo algunas un poco más complejas y que en algunos casos ya hemos publicado en páginas poco promocionadas.
Esto grupo aún no tiene comentarios.
Valoración de esta página: (grupo.transiciones)