Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Algoritmo para Effects

Estas en el tema de Algoritmo para Effects en el foro de Frameworks JS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 06/04/2007, 22:32
Avatar de MaBoRaK  
Fecha de Ingreso: abril-2003
Ubicación: La Paz - Bolivia
Mensajes: 2.003
Antigüedad: 21 años, 6 meses
Puntos: 35
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 Technologies
  #2 (permalink)  
Antiguo 07/04/2007, 18:47
 
Fecha de Ingreso: julio-2005
Ubicación: Buenos Aires, Argentina
Mensajes: 1.304
Antigüedad: 19 años, 4 meses
Puntos: 6
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/04/2007 a las 18:53
  #3 (permalink)  
Antiguo 08/04/2007, 17:18
Avatar de stock  
Fecha de Ingreso: junio-2004
Ubicación: Monterrey NL
Mensajes: 2.390
Antigüedad: 20 años, 4 meses
Puntos: 53
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
  #4 (permalink)  
Antiguo 09/04/2007, 08:03
Avatar de MaBoRaK  
Fecha de Ingreso: abril-2003
Ubicación: La Paz - Bolivia
Mensajes: 2.003
Antigüedad: 21 años, 6 meses
Puntos: 35
Re: Algoritmo para Effects

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

gracias :D es lo que buscaba

connection closed.
__________________

Maborak Technologies
  #5 (permalink)  
Antiguo 12/04/2007, 14:04
Avatar de Calisco  
Fecha de Ingreso: marzo-2004
Ubicación: Neuquen
Mensajes: 732
Antigüedad: 20 años, 8 meses
Puntos: 4
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 |
  #6 (permalink)  
Antiguo 16/04/2007, 14:14
 
Fecha de Ingreso: enero-2004
Ubicación: Medellin
Mensajes: 178
Antigüedad: 20 años, 10 meses
Puntos: 8
Re: Algoritmo para Effects

mira esta pagina
http://jstween.blogspot.com/
  #7 (permalink)  
Antiguo 16/04/2007, 14:43
 
Fecha de Ingreso: abril-2005
Ubicación: Lima-Peru
Mensajes: 313
Antigüedad: 19 años, 7 meses
Puntos: 1
Re: Algoritmo para Effects

Jquery implementa algunas ecuaciones basicas de penner por default, pero si se quiere completas, se pueden implementar con un plugin
  #8 (permalink)  
Antiguo 16/04/2007, 14:48
Avatar de MaBoRaK  
Fecha de Ingreso: abril-2003
Ubicación: La Paz - Bolivia
Mensajes: 2.003
Antigüedad: 21 años, 6 meses
Puntos: 35
Re: Algoritmo para Effects

loading.........


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


connection closed.
__________________

Maborak Technologies
  #9 (permalink)  
Antiguo 23/04/2007, 20:59
 
Fecha de Ingreso: julio-2005
Ubicación: Guatemala
Mensajes: 165
Antigüedad: 19 años, 3 meses
Puntos: 0
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
  #10 (permalink)  
Antiguo 24/04/2007, 03:36
Avatar de Calisco  
Fecha de Ingreso: marzo-2004
Ubicación: Neuquen
Mensajes: 732
Antigüedad: 20 años, 8 meses
Puntos: 4
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 |
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:03.