Retroceder   Foros del Web > Programación para sitios web > AJAX

Respuesta
 
Herramientas Desplegado
Antiguo 06-abr-2007, 22:32   #1 (permalink)
MaBoRaK llegará a ser famoso muy prontoMaBoRaK llegará a ser famoso muy pronto
 
Avatar de MaBoRaK
 
Fecha de Ingreso: abril-2003
Ubicación: La Paz - Bolivia
Mensajes: 1.765
Enviar un mensaje por MSN a MaBoRaK
Algoritmo para Effects

loading...........


Bueno seguramente muchos vieron las librerias Effect, mootols, etc que hacen efectos bonitos para abrir un div... "FX" jeje... bueno eso es sencillo... con una complejidad....

Que algoritmo de MOVIMIENTO / VELOCIDAD DE DESPLAZAMIENTO / TIEMPO se usa para ello? por ejemplo para abrir una ventana con rebote... o un FADE .. la opacidad y el tamaño disminuye en relacion a la velocidad de movimiento. Saben algo de esto? fuera de ver el codigo de Scriptaculous.


connection closed.
__________________
maborak@maborak.com
http://www.maborak.com
Maborak technologies
MaBoRaK está desconectado   Responder Citando
Antiguo 07-abr-2007, 18:47   #2 (permalink)
Fridureiks ha deshabilitado el karma
 
Fecha de Ingreso: julio-2005
Ubicación: Buenos Aires, Argentina
Mensajes: 1.237
Re: Algoritmo para Effects

Hola,

Mootools (y alguna libreria mas supongo) utiliza las funciones que Robert Penner hizo para Actionscript (Easing Equations). En su web creo que te las podes bajar, seguramente en "formato AS" pero no tendras problemas para entenderlas si lo que deseas es usarlas en otro lenguaje. Del mismo modo, las podes encontrar en la libreria Mootools (la version sin comprimir) en "formato JS".

Estas son las que estan en Mootools:

Código:
	/* Property: linear */
	linear: function(t, b, c, d){
		return c*t/d + b;
	},

	/* Property: quadIn */
	quadIn: function(t, b, c, d){
		return c*(t/=d)*t + b;
	},

	/* Property: quadOut */
	quadOut: function(t, b, c, d){
		return -c *(t/=d)*(t-2) + b;
	},

	/* Property: quadInOut */
	quadInOut: function(t, b, c, d){
		if ((t/=d/2) < 1) return c/2*t*t + b;
		return -c/2 * ((--t)*(t-2) - 1) + b;
	},

	/* Property: cubicIn */
	cubicIn: function(t, b, c, d){
		return c*(t/=d)*t*t + b;
	},

	/* Property: cubicOut */
	cubicOut: function(t, b, c, d){
		return c*((t=t/d-1)*t*t + 1) + b;
	},

	/* Property: cubicInOut */
	cubicInOut: function(t, b, c, d){
		if ((t/=d/2) < 1) return c/2*t*t*t + b;
		return c/2*((t-=2)*t*t + 2) + b;
	},

	/* Property: quartIn */
	quartIn: function(t, b, c, d){
		return c*(t/=d)*t*t*t + b;
	},

	/* Property: quartOut */
	quartOut: function(t, b, c, d){
		return -c * ((t=t/d-1)*t*t*t - 1) + b;
	},

	/* Property: quartInOut */
	quartInOut: function(t, b, c, d){
		if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
		return -c/2 * ((t-=2)*t*t*t - 2) + b;
	},

	/* Property: quintIn */
	quintIn: function(t, b, c, d){
		return c*(t/=d)*t*t*t*t + b;
	},

	/* Property: quintOut */
	quintOut: function(t, b, c, d){
		return c*((t=t/d-1)*t*t*t*t + 1) + b;
	},

	/* Property: quintInOut */
	quintInOut: function(t, b, c, d){
		if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
		return c/2*((t-=2)*t*t*t*t + 2) + b;
	},

	/* Property: sineIn */
	sineIn: function(t, b, c, d){
		return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
	},

	/* Property: sineOut */
	sineOut: function(t, b, c, d){
		return c * Math.sin(t/d * (Math.PI/2)) + b;
	},

	/* Property: sineInOut */
	sineInOut: function(t, b, c, d){
		return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
	},

	/* Property: expoIn */
	expoIn: function(t, b, c, d){
		return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
	},

	/* Property: expoOut */
	expoOut: function(t, b, c, d){
		return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
	},

	/* Property: expoInOut */
	expoInOut: function(t, b, c, d){
		if (t==0) return b;
		if (t==d) return b+c;
		if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
		return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
	},

	/* Property: circIn */
	circIn: function(t, b, c, d){
		return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
	},

	/* Property: circOut */
	circOut: function(t, b, c, d){
		return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
	},

	/* Property: circInOut */
	circInOut: function(t, b, c, d){
		if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
		return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
	},

	/* Property: elasticIn */
	elasticIn: function(t, b, c, d, a, p){
		if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; if (!a) a = 1;
		if (a < Math.abs(c)){ a=c; var s=p/4; }
		else var s = p/(2*Math.PI) * Math.asin(c/a);
		return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
	},

	/* Property: elasticOut */
	elasticOut: function(t, b, c, d, a, p){
		if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; if (!a) a = 1;
		if (a < Math.abs(c)){ a=c; var s=p/4; }
		else var s = p/(2*Math.PI) * Math.asin(c/a);
		return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
	},

	/* Property: elasticInOut */
	elasticInOut: function(t, b, c, d, a, p){
		if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5); if (!a) a = 1;
		if (a < Math.abs(c)){ a=c; var s=p/4; }
		else var s = p/(2*Math.PI) * Math.asin(c/a);
		if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
		return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
	},

	/* Property: backIn */
	backIn: function(t, b, c, d, s){
		if (!s) s = 1.70158;
		return c*(t/=d)*t*((s+1)*t - s) + b;
	},

	/* Property: backOut */
	backOut: function(t, b, c, d, s){
		if (!s) s = 1.70158;
		return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
	},

	/* Property: backInOut */
	backInOut: function(t, b, c, d, s){
		if (!s) s = 1.70158;
		if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
		return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
	},

	/* Property: bounceIn */
	bounceIn: function(t, b, c, d){
		return c - Fx.Transitions.bounceOut (d-t, 0, c, d) + b;
	},

	/* Property: bounceOut */
	bounceOut: function(t, b, c, d){
		if ((t/=d) < (1/2.75)){
			return c*(7.5625*t*t) + b;
		} else if (t < (2/2.75)){
			return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
		} else if (t < (2.5/2.75)){
			return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
		} else {
			return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
		}
	},

	/* Property: bounceInOut */
	bounceInOut: function(t, b, c, d){
		if (t < d/2) return Fx.Transitions.bounceIn(t*2, 0, c, d) * .5 + b;
		return Fx.Transitions.bounceOut(t*2-d, 0, c, d) * .5 + c*.5 + b;
	}
Saludos.
__________________
Federico.

Mi página: www.jourmoly.com.ar

Última edición por Fridureiks; 07-abr-2007 a las 18:53.
Fridureiks está desconectado   Responder Citando
Antiguo 08-abr-2007, 17:18   #3 (permalink)
stock tiene algunos puntos positivos de karma
 
Avatar de stock
 
Fecha de Ingreso: junio-2004
Ubicación: Monterrey NL
Mensajes: 1.993
Re: Algoritmo para Effects

en efecto, esas ecuaciones son muy famosas, yo las he utilizado con flash, pero dela misma manera se pueden escribir en JavaScripty generar los mismos resultados

have funnnnnnnn
__________________
Don't hate the languaje, hate the runtime environment
Crysfel's Blog :: Blog de programación, JAVA,PHP, AJAX, JavaScript, CSS y otras hierbas
stock está desconectado   Responder Citando
Antiguo 09-abr-2007, 08:03   #4 (permalink)
MaBoRaK llegará a ser famoso muy prontoMaBoRaK llegará a ser famoso muy pronto
 
Avatar de MaBoRaK
 
Fecha de Ingreso: abril-2003
Ubicación: La Paz - Bolivia
Mensajes: 1.765
Enviar un mensaje por MSN a MaBoRaK
Re: Algoritmo para Effects

loading...........

gracias :D es lo que buscaba

connection closed.
__________________
maborak@maborak.com
http://www.maborak.com
Maborak technologies
MaBoRaK está desconectado   Responder Citando
Antiguo 12-abr-2007, 14:04   #5 (permalink)
Calisco tiene algunos puntos positivos de karma
 
Avatar de Calisco
 
Fecha de Ingreso: marzo-2004
Ubicación: Neuquen
Mensajes: 690
Enviar un mensaje por ICQ a Calisco Enviar un mensaje por MSN a Calisco
Re: Algoritmo para Effects

Yo estoy empezando a utilizar MooTools. Hice un pequeño tutorial para implementar un accordion.
Este es el link.
Saludos.
__________________
| Cabeza De Raton | Foro MooTools en Castellano |
Calisco está desconectado   Responder Citando
Antiguo 16-abr-2007, 14:14   #6 (permalink)
vicman está en el buen camino
 
Fecha de Ingreso: enero-2004
Ubicación: Medellin
Mensajes: 143
Re: Algoritmo para Effects

mira esta pagina
http://jstween.blogspot.com/
vicman está desconectado   Responder Citando
Antiguo 16-abr-2007, 14:43   #7 (permalink)
MaXaC está en el buen camino
 
Fecha de Ingreso: abril-2005
Ubicación: Lima-Peru
Mensajes: 314
Re: Algoritmo para Effects

Jquery implementa algunas ecuaciones basicas de penner por default, pero si se quiere completas, se pueden implementar con un plugin
MaXaC está desconectado   Responder Citando
Antiguo 16-abr-2007, 14:48   #8 (permalink)
MaBoRaK llegará a ser famoso muy prontoMaBoRaK llegará a ser famoso muy pronto
 
Avatar de MaBoRaK
 
Fecha de Ingreso: abril-2003
Ubicación: La Paz - Bolivia
Mensajes: 1.765
Enviar un mensaje por MSN a MaBoRaK
Re: Algoritmo para Effects

loading.........


:o interesante! esto es una llaucha (plato rápido boliviano[paceño]) para mi cerebro.


connection closed.
__________________
maborak@maborak.com
http://www.maborak.com
Maborak technologies
MaBoRaK está desconectado   Responder Citando
Antiguo 23-abr-2007, 20:59   #9 (permalink)
bilkarm3 está en el buen camino
 
Fecha de Ingreso: julio-2005
Ubicación: Guatemala
Mensajes: 134
Re: Algoritmo para Effects

Me gusto mucho lo de los efectos, sobre todo el del acordión.... que más nos pueden compartir.

Saludos.
__________________
Guatemala - Guatemala
bilkarm3 está desconectado   Responder Citando
Antiguo 24-abr-2007, 03:36   #10 (permalink)
Calisco tiene algunos puntos positivos de karma
 
Avatar de Calisco
 
Fecha de Ingreso: marzo-2004
Ubicación: Neuquen
Mensajes: 690
Enviar un mensaje por ICQ a Calisco Enviar un mensaje por MSN a Calisco
Re: Algoritmo para Effects

Ahora estoy haciendo unas ventanitas. Esta es la dirección del pequeño tutorial de una de ellas y este es el link funcionando.
La idea es ir implementando de a poco todo tipo de elementos de aplicación. SOn fáciles de implementar en nuestro sitio web.
__________________
| Cabeza De Raton | Foro MooTools en Castellano |
Calisco está desconectado   Responder Citando
Respuesta
No hay votos aún.


Herramientas
Desplegado

Normas de Publicación
No puedes crear nuevos temas
No puedes responder temas
No puedes subir archivos adjuntos
No puedes editar tus mensajes

BB code is Activado
Caritas están Activado
[IMG] está Activado
Código HTML está Desactivado


La Zona horaria es GMT -6. Ahora son las 23:59.


Message Board Statistics

LinkBacks Enabled by vBSEO 3.1.0

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93