Foros del Web

Foros del Web (http://www.forosdelweb.com/)
-   Frameworks JS (http://www.forosdelweb.com/f127/)
-   -   Algoritmo para Effects (http://www.forosdelweb.com/f127/algoritmo-para-effects-479319/)

MaBoRaK 06/04/2007 22:32

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.

Fridureiks 07/04/2007 18:47

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.

stock 08/04/2007 17:18

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 :adios:

MaBoRaK 09/04/2007 08:03

Re: Algoritmo para Effects
 
loading...........

gracias :D es lo que buscaba

connection closed.

Calisco 12/04/2007 14:04

Re: Algoritmo para Effects
 
Yo estoy empezando a utilizar MooTools. Hice un pequeño tutorial para implementar un accordion.
Este es el link.
Saludos.

vicman 16/04/2007 14:14

Re: Algoritmo para Effects
 
mira esta pagina
http://jstween.blogspot.com/

MaXaC 16/04/2007 14:43

Re: Algoritmo para Effects
 
Jquery implementa algunas ecuaciones basicas de penner por default, pero si se quiere completas, se pueden implementar con un plugin

MaBoRaK 16/04/2007 14:48

Re: Algoritmo para Effects
 
loading.........


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


connection closed.

bilkarm3 23/04/2007 20:59

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

Saludos.

Calisco 24/04/2007 03:36

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.


La zona horaria es GMT -6. Ahora son las 21:05.

Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2026, Jelsoft Enterprises Ltd.