logo El diario de Pepe Molina (Caricatos)

yo

Las transiciones que presentamos ahora se caracterizan por presentar tiras horizontales o verticales de las capas.


Última caricatura

IV Asamblea de la AEC: IV Asamblea General de la Asociación Española de Caricaturistas

IV Asamblea de la AEC

RSS de las imágenes: rss


La Cita

Lo presente, producto de lo pasado, engendra a su vez lo futuro

G. Wilhelm Leibniz, filósofo; matemático y estadista alemán (1646-1716).


En esta zona están las páginas personales del autor.


Mis clientes ahora también son mis amigos (aunque les cobre).


En Mis amigos Informáticos hay una pequeña colección de páginas de colegas webmasters..


En Mis amigos artistas podemos encontrar artistas de cualquier índole (dibujantes, pintores, escritores...)


Las recomendaciones que proponemos son de índole variada.


Aquí un cajón de sastre de enlaces.


Nos referencian desde sitios de toda índole.


Puede contribuir a mantener esta página con su donativo.


botón pay-pal

Transiciones: Barridos

emoticón de Caricatos Publicado el día 08 de noviembre de 2011
id=53; categorías: Vicisitudes de un Webmaster, Programación

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.

dibujo
dibujo
Feliz Navidad
Feliz Navidad
dibujo
dibujo
dibujo
dibujo
dibujo
dibujo
Fundido:
Desplazamientos:
Aperturas:  
Cierres:  
Barridos Horizontales:        
Barridos Verticales:        

Con las transiciones de barrido mostradas, podemos pensar que aún nos quedan más en el tintero, pero lo dejaremos para futuros apuntes.

Cuestiones teóricas

Foto en grupo

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.

Arrays de tiempos y acciones como comodines

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.

Algunos casos descartados

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.

Zona de comentarios

Este apunte aún no tiene comentarios.

Evaluación

Valoración de esta página: (apunte.53) valor

Valoración evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar

Respuesta: Zona de mensajes (proceso de evaluación)

Historial de navegación

Esta página ha sido visitada en 9379 ocasiones


Disponemos de rss sindicar

Y del Mapa del sitio, además del sitemap.xml.


Aquí podemos encontrar los apuntes más visitados.

"Top 10" reemplaza a la sección Últimos apuntes.


Una buena forma de buscar un apunte es a partir de su categoría.


También es posible buscar apuntes por medio de las etiquetas (tags).


Hemos decidido poner al alcance de todos algunos comodines.

Adjuntamos una versión reducida del "buscador interno" que vemos en la lista anterior:

Buscar en apuntes

También estamos recopilando antiguas páginas del sitio.


Desde este recuadro se puede hacer una búsqueda cronológica.


Se puede crear una postal nueva desde el enlace del sector "Otras páginas del dominio", o editar la que sale en el recuadro, pulsando sobre ella..

http://www.pepemolina.com/clipart/fondos/BCKGRD44.svg
http://www.pepemolina.com/clipart/fondos/1673.svg
http://www.pepemolina.com/postales/aves/ocellot2.gif
enlace a la postal
Copyright © 2002-2024 www.pepemolina.com
RSS rss | Ver Mapa del sitio