logo El diario de Pepe Molina (Caricatos)

yo

Aunque las transiciones de apertura y de cierre son prácticamente iguales, debemos diferenciar en la implementación cosas importantes.

Ú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

Soy difícil de oír, pero no para los que me quieren escuchar

Tiberio Claudio Nerón, emperador de Roma (14-37).

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: Aperturas y cierres

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

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:

dibujo
dibujo
Feliz Navidad
Feliz Navidad
dibujo
dibujo
dibujo
dibujo
dibujo
dibujo

Postales

A las postales que hemos usado en el apunte Transiciones: Desplazamientos...

dibujo
dibujo
Feliz Navidad
Feliz Navidad
dibujo
dibujo
dibujo
dibujo
dibujo
dibujo

...Hemos añadido entre las transiciones un elemento adicional (el que está leyendo) donde también podríamos mostrar transiciones.

Logo Espero que lo disfruten.

Fundido:
Desplazamientos:
Aperturas:  
Cierres:  
Caso de estudio:

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.

También las esquinas

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.

Zona de comentarios

Este apunte aún no tiene comentarios.

Evaluación

Valoración de esta página: (apunte.52) 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 9787 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..

../diario.imagen.php?id=75&amp;max=300
¡Felix Navidad!
¡Felix Navidad!
enlace a la postal
Copyright © 2002-2024 www.pepemolina.com
RSS rss | Ver Mapa del sitio