Foros del Web » Programando para Internet » Javascript »

[APORTE] Easy Animate

 Estas en el tema de [APORTE] Easy Animate en el foro de Javascript en Foros del Web. Hola, Hice hace mucho este animador. Envase a un tutorial http://www.disegnocentell.com.ar/notas2.php?id=239 . Pero este animador manega mas cosas como los colores y medidas. @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); ...
  #1 (permalink)  
Antiguo 29/07/2009, 02:01
Avatar de pato12  
Fecha de Ingreso: septiembre-2007
Ubicación: Salta
Mensajes: 1.620
Antigüedad: 17 años, 3 meses
Puntos: 101
[APORTE] Easy Animate
Hola,
Hice hace mucho este animador. Envase a un tutorial http://www.disegnocentell.com.ar/notas2.php?id=239. Pero este animador manega mas cosas como los colores y medidas.
Código javascript: 
Ver original
  1. <!--
  2. /***********************************
  3. *          ::: EASY ANIMATE :::
  4. ************************************
  5. * ESTE SCRIPT FUE CREADO POR
  6. * pato12 DE FOROSDELWEB.COM
  7. * Licencia: GNU General Public License
  8. * http://creativecommons.org/licenses/GPL/2.0/deed.es_AR
  9. * CODIGO LIBRE DE USO, SIEMPRE
  10. * CUANDO RESPETEN LA LICENCIA
  11. * --------------------------------
  12. * halfmusic.com.ar - halfwars.com
  13. * --------------------------------
  14. * TODOS LOS DERECHOS RESERVADOS
  15. **/
  16. var EasyAnimate=function(dom){
  17.     this.elemento=typeof dom=='string'?document.getElementById(dom):dom;
  18.     this.cssColor=['backgroundColor','borderBottomColor','borderLeftColor','borderRightColor','borderTopColor','color','outlineColor'];
  19.     this.colors={aqua:[0,255,255],azure:[240,255,255],beige:[245,245,220],black:[0,0,0],blue:[0,0,255],brown:[165,42,42],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgrey:[169,169,169],darkgreen:[0,100,0],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkviolet:[148,0,211],fuchsia:[255,0,255],gold:[255,215,0],green:[0,128,0],indigo:[75,0,130],khaki:[240,230,140],lightblue:[173,216,230],lightcyan:[224,255,255],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightyellow:[255,255,224],lime:[0,255,0],magenta:[255,0,255],maroon:[128,0,0],navy:[0,0,128],olive:[128,128,0],orange:[255,165,0],pink:[255,192,203],purple:[128,0,128],violet:[128,0,128],red:[255,0,0],silver:[192,192,192],white:[255,255,255],yellow:[255,255,0],transparent:[255,255,255]};
  20.     this.colorChange=function(dom,pos,end,start,estilo){
  21.         var start=this.getRGB(start),end=this.getRGB(end);
  22.         this.css(dom,estilo,"rgb("+[Math.max(Math.min(parseInt((pos*(end[0]-start[0]))+start[0]),255),0),Math.max(Math.min(parseInt((pos*(end[1]-start[1]))+start[1]),255),0),Math.max(Math.min(parseInt((pos*(end[2]-start[2]))+start[2]),255),0)].join(",")+")");
  23.     };
  24.     this.getRGB=function(color) {
  25.         var result;
  26.         if(color&&color.constructor==Array&&color.length==3)return color;
  27.         if(result=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
  28.             return [parseInt(result[1]),parseInt(result[2]),parseInt(result[3])];
  29.         if(result=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))
  30.             return [parseFloat(result[1])*2.55,parseFloat(result[2])*2.55,parseFloat(result[3])*2.55];
  31.         if(result=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))
  32.             return [parseInt(result[1],16),parseInt(result[2],16),parseInt(result[3],16)];
  33.         if(result=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))
  34.             return [parseInt(result[1]+result[1],16),parseInt(result[2]+result[2],16),parseInt(result[3]+result[3],16)];
  35.         if(result=/rgba\(0, 0, 0, 0\)/.exec(color))
  36.             return this.colors['transparent'];
  37.         return this.colors[color.toLowerCase()];
  38.     };
  39.     this.position=function(el){
  40.         var offsetTop=0,offsetLeft=0,elm=el;
  41.         do{
  42.             offsetLeft+=parseInt(elm.offsetLeft);
  43.             offsetTop+=parseInt(elm.offsetTop);
  44.             if(elm.scrollTop>0)offsetTop -= elm.scrollTop;
  45.             if(elm.scrollLeft>0)offsetLeft -= elm.scrollLeft;
  46.             elm=elm.offsetParent;
  47.         }while(elm);
  48.         return {left:offsetLeft,top:offsetTop};
  49.     };
  50.     this.stop=function(){
  51.         if(this.elemento.setIntervalTime)clearInterval(this.elemento.setIntervalTime);
  52.     };
  53.     this.animar=function(animar,tiempo,funcion,onEnd){
  54.         var pot=0.01,inicia=new Date().getTime(),el=this;
  55.         if(this.elemento.setIntervalTime)this.stop();
  56.         this.elemento.setIntervalTime=setInterval(function(){
  57.             var now=new Date().getTime(),fotograma=(now-inicia)>tiempo?false:(pot=animar((now-inicia+.001)/tiempo,pot));
  58.             if(!fotograma){funcion(1);el.stop();(onEnd||function(){})();return;}
  59.             funcion(fotograma);
  60.         },10);
  61.     };
  62.     this.inArray=function(array,palabra){
  63.         for(var i=0,total=array.length;i<total;i++)if(array[i]==palabra)return true;
  64.         return false;
  65.     };
  66.     this.css=function(dom,css,csss){
  67.         if(csss){var estilo={};estilo[css]=csss;}
  68.         else{if(typeof css!='object')return dom.style[css]; else var estilo=css;}
  69.         for(cs in estilo){
  70.             if(cs=='opacity'){
  71.                 dom.style.opacity=estilo[cs]>1?estilo[cs]/100:estilo[cs];
  72.                 dom.style.MozOpacity=estilo[cs]>1?estilo[cs]/100:estilo[cs];
  73.                 dom.style.KhtmlOpacity=estilo[cs]>1?estilo[cs]/100:estilo[cs];
  74.                 dom.style.filter='alpha(opacity='+(estilo[cs]>1?estilo[cs]:estilo[cs]*100)+')';
  75.                 dom.style.zoom=1;
  76.             }else dom.style[cs]=estilo[cs];
  77.         }
  78.     };
  79.     this.animate=function(fin,time,onEnd,animacion){
  80.         var el=this,inicio={},extencion={},time=!time?300:(isNaN(time)?300:time);
  81.         if(typeof fin!='object')return false;
  82.         for(css in fin){
  83.             if(css=='opacity'){
  84.                 fin[css]=fin[css]>1?fin[css]:fin[css]*100;
  85.                 extencion[css]='';
  86.                 inicio[css]=isNaN(parseInt(this.css(this.elemento,css)))?100:parseInt(this.css(this.elemento,css))*100;inicio[css]=isNaN(inicio[css])?100:inicio[css];
  87.             }else if(css=='left'||css=='top'){
  88.                 extencion[css]=isNaN(fin[css])?fin[css].substr(fin[css].length-2,fin[css].length):'px';
  89.                 extencion[css]=isNaN(parseInt(extencion[css]))?extencion[css]:extencion[css].substr(extencion[css].length-1,extencion[css].length);
  90.                 inicio[css]=this.position(this.elemento)[css],extencion[css];
  91.                 fin[css]=parseInt(fin[css]);
  92.             }else if(this.inArray(this.cssColor,css)){
  93.                 extencion[css]='';
  94.                 inicio[css]=this.css(this.elemento,css);
  95.             }else{
  96.                 extencion[css]=isNaN(fin[css])?fin[css].substr(fin[css].length-2,fin[css].length):'px';
  97.                 extencion[css]=isNaN(parseInt(extencion[css]))?extencion[css]:extencion[css].substr(extencion[css].length-1,extencion[css].length);
  98.                 inicio[css]=parseInt(this.css(this.elemento,css)),extencion[css];
  99.                 fin[css]=parseInt(fin[css]);
  100.             }
  101.         };
  102.         this.animar((animacion||function(p,k){return p}),time,function(p){
  103.             for(css in fin){
  104.                 var start=inicio[css],finish=fin[css],ext=extencion[css];
  105.                 if(el.inArray(el.cssColor,css)){
  106.                     el.colorChange(el.elemento,p,finish,start,css);
  107.                 }else if(start>finish){
  108.                     el.css(el.elemento,css,(start-(start-finish)*p)+ext);
  109.                 }else if(start<finish){
  110.                     el.css(el.elemento,css,(start+(finish-start)*p)+ext);
  111.                 }
  112.             }
  113.         },onEnd);
  114.     };
  115. };
Modo de uso:
Código javascript: 
Ver original
  1. new EasyAnimate(DOM O ID DEL OBETO A ANIMAR).animate(OBJETO CON LOS CSS(EJ:{color:'#999',height:'10em'})[,TIEMPO DE DURACION, FUNCION A EJECUTAR CUANDO SE TERMINE LA ANIMACION, EFECTO]);
En el ultimo se pone la funcion del efecto, pueden crear las suyas, pero esta saque del tutorial:
Código javascript: 
Ver original
  1. function linear(p,ant){
  2.     var maxValue=1, minValue=.001, totalP=1, k=1;
  3.     var delta = maxValue - minValue; 
  4.     var stepp = minValue+(Math.pow(((1 / totalP) * p), k) * delta); 
  5.     return stepp; 
  6. }
  7. function senoidal(p,ant){
  8.     return (1 - Math.cos(p * Math.PI)) / 2;
  9. }
  10.  
  11. function desacelerado(p,ant){
  12.     var maxValue=1, minValue=.001, totalP=1, k=.25;
  13.     var delta = maxValue - minValue; 
  14.     var stepp = minValue+(Math.pow(((1 / totalP) * p), k) * delta); 
  15.     return stepp; 
  16. }
  17.  
  18. function acelerado(p,ant){
  19.     var maxValue=1, minValue=.001, totalP=1, k=7;
  20.     var delta = maxValue - minValue; 
  21.     var stepp = minValue+(Math.pow(((1 / totalP) * p), k) * delta); 
  22.     return stepp; 
  23. }
  24.  
  25. function elasticoFuerte(p,ant){
  26.     if(p<=0.6){
  27.         return Math.pow(p*5/3,2);}
  28.     else{
  29.         return Math.pow((p-0.8)*5,2)*0.6+0.6;
  30.     }
  31. }
  32. function elasticoSuave(p,ant){
  33.     if(p<=0.6){
  34.         return Math.pow(p*5/3,2);
  35.     }else{
  36.         return Math.pow((p-0.8)*5,2)*0.4+0.6;
  37.     }
  38. }

Bueno, por ejemplo:
Código html: 
Ver original
  1. <script type="text/javascript">
  2. <!--
  3. function elasticoFuerte(p,ant){
  4.     if(p<=0.6){
  5.         return Math.pow(p*5/3,2);}
  6.     else{
  7.         return Math.pow((p-0.8)*5,2)*0.6+0.6;
  8.     }
  9. }
  10. function darForma(){
  11.     new EasyAnimate(document.getElementById('div_texto')).animate({height:'300px',color:'#999',backgroundColor:'#EEE'},700,function(){alert('Fin!');},elasticoFuerte); // elasticoFuerte por la funcion de arriba.
  12. }
  13. -->
  14. </script>
  15. <div id="div_texto" style="color:#000; background-color:#CCC; width:300px; height:200px;">TEXTO DEL DIV <a href="#" onclick="darForma();return false;">ANIMAR</a></div>

[EDITO]
Aqui hay una demostracion: http://halfmusic.com/easyanimate/

Gracias
Salu2
__________________
Half Music - www.halfmusic.com
Última edición por pato12; 03/08/2009 a las 02:47 Razón: poner demostracion y link del tutorial
  #2 (permalink)  
Antiguo 29/07/2009, 02:58
Avatar de ZiTAL  
Fecha de Ingreso: marzo-2004
Ubicación: Bermio (Bizkaia)
Mensajes: 1.545
Antigüedad: 20 años, 10 meses
Puntos: 62
Respuesta: [APORTE] Easy Animate
a simple vista es cojonudo :D
__________________
http://zital.no-ip.org
____________________

Euskerie ahuen eta bijotzan
  #3 (permalink)  
Antiguo 30/07/2009, 02:48
Avatar de ZiTAL  
Fecha de Ingreso: marzo-2004
Ubicación: Bermio (Bizkaia)
Mensajes: 1.545
Antigüedad: 20 años, 10 meses
Puntos: 62
Respuesta: [APORTE] Easy Animate
creo que te refieres a esto:

http://www.disegnocentell.com.ar/notas2.php?id=239
__________________
http://zital.no-ip.org
____________________

Euskerie ahuen eta bijotzan
  #4 (permalink)  
Antiguo 30/07/2009, 02:56
Avatar de pato12  
Fecha de Ingreso: septiembre-2007
Ubicación: Salta
Mensajes: 1.620
Antigüedad: 17 años, 3 meses
Puntos: 101
Respuesta: [APORTE] Easy Animate
Si, cuando lo busque no andaba la pagina por eso no la postie al dia :D

PD: que es cojonudo?? xD
__________________
Half Music - www.halfmusic.com
  #5 (permalink)  
Antiguo 30/07/2009, 03:04
Avatar de ZiTAL  
Fecha de Ingreso: marzo-2004
Ubicación: Bermio (Bizkaia)
Mensajes: 1.545
Antigüedad: 20 años, 10 meses
Puntos: 62
Respuesta: [APORTE] Easy Animate
"cojonudo" es que es "la ostia", vamos que está "de puta madre"

PD: no me baneen :)
__________________
http://zital.no-ip.org
____________________

Euskerie ahuen eta bijotzan
  #6 (permalink)  
Antiguo 03/08/2009, 02:47
Avatar de pato12  
Fecha de Ingreso: septiembre-2007
Ubicación: Salta
Mensajes: 1.620
Antigüedad: 17 años, 3 meses
Puntos: 101
Respuesta: [APORTE] Easy Animate
ahhh, ok.

PD: arreglo link, cambie de server y dominio xD
__________________
Half Music - www.halfmusic.com
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

SíEste tema le ha gustado a 1 personas


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 19:11.