ES

www.codigo-facil.com > Mi framework en Javascript, efectos parte 2

Mi framework en Javascript


Capitulo 6 : Efectos parte 2

Capitulos

Mi framework en Javascript, introduccion

Primer capitulo de una serie donde veremos en que consiste y como desarrollar nuestro propio framework en javascript.

Mi framework en Javascript, la clase principal

En este capitulo definiremos la base de nuestro framework, crearemos una clase base a partir de la cual iremos incluyendo todas las funcionalidades del framework.

Mi framework en Javascript, los selectores

Los selectores son uno de los pilares fundamentales a partir del cual se desarrollan el resto de funcionalidades del framework. En el capitulo que nos ocupa veremos que son exactamente y como implementarlos.

Mi framework en Javascript, la funcion CSS

En este capitulo veremos como implementar una funcion, que nos permita cambiar el aspecto de cualquier elemento incluido en nuestra pagina html, a traves de la utilizacion de las propiedades CSS.

Mi framework en Javascript, efectos parte 1

En este capitulo vamos a incluir una funcionalidad a nuestro framework que nos permita aplicar efectos para poder mover o cambiar de tamaño cualquier elemento de nuestro documento HTML.

Mi framework en Javascript, efectos parte 2

En este articulo vamos a desarrollar una funcion para nuestro framework, que nos permita crear efectos de transicion entre 2 colores diferentes.

Mi framework en Javascript, transparencias

En este articulo veremos como modificar la propiedad alpha de cualquier elemento de nuestro documento HTML, para crear asi transparencias haciendo mas artactivo el diseño de nuestra pagina.

Introduccion :


En la anterior publicacion implementamos una funcion que nos permitia aplicar efectos de tamaño  o posicion al elemento, previamente seleccionado, de nuestra pagina web.

En el articulo que nos ocupa hoy, vamos a desarrollar una extension para poder aplicar un efecto de transicion entre 2 colores diferentes. Tan solo recordar que esta extension ya estaba presenta en la funcion "animate", que vimos anteriormente, y que habiamos dejado su implementacion para el capitulo que nos ocupa. Por lo tanto es recomendable para aquellos que se hayan saltado este capitulo que le den un vistazo para evitar confusiones.

La implementacion de la funcion "animate" la podeis encontrar en el siguiente enlace.

Antes de empezara a implementar la funcion del capitulo de hoy, podeis ver un ejemplo de su utilizacion en este enlace.

Implementacion :


Para la implementacion he seguido el mismo planteamiento que habia tomado para relizar la funcion animate del capitulo anterior. Esto quiere decir que vamios a tener 2 funciones :
  1. Una funcion inicial que sera la que invoquemos al principio y que se encargara de iniciar los parametros necesarios para la ejecucion del efecto.
  2. Por ultimo una segunda funcion, que sera invocada por la primera, y se encargara de la ejecucion del efecto desde su inicio hasta su finalizacion, haciendo los ajustes necesarios en funcion a la duracion determinada previamente.

Implementando la primera funcion :


Como es habitual voy a escribir el codigo acompañado de algunos comentarios dejando algunos apuntes adicionales para el final.
  1. /*
  2. Funcion inicial encargada de iniciar los parametros antes de aplicar el efecto
  3. */
  4. this.animateColor = function(type,option,sleep,tag)
  5. {
  6.   /*En caso de no existir inicializo la variable tag*/
  7.   if (!tag )tag = this.tag;

  8.    /*
  9.   En caso de no exixtir creo la cache de parametros para este elemento y efecto
  10.   Si existe paro una posible ejecucion previa de este efecto para este elemento
  11.   */
  12.   if (!frameJS.objs[tag].animate[type])
  13.     frameJS.objs[tag].animate[type] = {}
  14.   else
  15.     clearTimeout(frameJS.objs[tag].animate[type]['timer']);

  16.   /*
  17.   Compruebo si se ha especificado el parametro "sleep", que sirve para aplicar un
  18.   retardo antes de lanzar el efecto
  19.   */
  20.   if (sleep && sleep!=-1)
  21.     {
  22.     frameJS.objs[this.tag].animate[type]['timer'] = window.setInterval( "frameJS.animateColor('" + type + "'," + this.ArraytoStr(option) + ",-1,'"+this.tag+"')" , sleep );
  23.     return this;
  24.     }

  25.   /*
  26.   Compruebo la longitud de la cadena "valor" para extraer los valores RGB correctamente
  27.   */
  28.   option['value']=''+option['value']+'';
  29.   if (option['value'].length > 7)
  30.   {
  31.   option['value'] = option['value'].replace('rgb(','');
  32.   option['value'] = option['value'].replace(')','');
  33.   var valFin = option['value'].split(',');
  34.   option['fin_1'] = parseInt(valFin[0]);
  35.   option['fin_2'] = parseInt(valFin[1]);
  36.   option['fin_3'] = parseInt(valFin[2]);
  37.   }
  38.   else
  39.   {
  40.     if (option['value'].length==7)
  41.       option['value'] = option['value'].substr(1,6);
  42.     option['fin_1'] = parseInt(option['value'].substr(0,2),16);
  43.     option['fin_2'] = parseInt(option['value'].substr(2,2),16);
  44.     option['fin_3'] = parseInt(option['value'].substr(4,2),16);
  45.   }

  46.   /*
  47.   Verifico la existencia de un valor inicial, en caso de no existir, intento obtenerlo
  48.   directamente de su propiedad CSS. En caso de no existir lo inicializo a blanco
  49.   */
  50.   if (!option['ini'])
  51.   {
  52.     option['ini'] = this.getCSS(type);
  53.     option['ini'] = option['ini']+'';
  54.   }
  55.   if (option['ini'].length==0)
  56.     option['ini'] = '#FFFFFF';

  57.   /*
  58.   Extraigo los valores RGB iniciales, segun la longitud de la cadena
  59.   */
  60.   if (option['ini'].length==7)
  61.   {
  62.     option['ini_1'] = parseInt(option['ini'].substr(1,2),16);
  63.     option['ini_2'] = parseInt(option['ini'].substr(3,2),16);
  64.     option['ini_3'] = parseInt(option['ini'].substr(5,2),16);
  65.   }
  66.   else
  67.   {
  68.   option['ini'] = option['ini'].replace('rgb(','');
  69.   option['ini'] = option['ini'].replace(')','');
  70.   var valIni = option['ini'].split(',');
  71.   option['ini_1'] = parseInt(valIni[0]);
  72.   option['ini_2'] = parseInt(valIni[1]);
  73.   option['ini_3'] = parseInt(valIni[2]);
  74.   }

  75.   /*
  76.   Inicializo los valores que serviran para incrementar o reducir los
  77.   valores iniciales segun sea el caso de caso y para cada componenete
  78.   del color RGB ( R=red, G=green, N=Blue)
  79.   */
  80.   option['sign_1'] = 1;
  81.   if (option['ini_1'] > option['fin_1'])option['sign_1'] = -1;
  82.   option['sign_2'] = 1;
  83.   if (option['ini_2'] > option['fin_2'])option['sign_2'] = -1;
  84.   option['sign_3'] = 1;
  85.   if (option['ini_3'] > option['fin_3'])option['sign_3'] = -1;

  86.   /*
  87.   Inicializo la duracion del efecto, por defecto 400 milisegundos
  88.   */
  89.   if (!option['delay'])var delay=400;
  90.   else var delay=option['delay'];

  91.   /*
  92.   Calculo los diferentes valores que se utilizaran para aplicar el efecto
  93.   en funcion de la duracion del efecto y para una ejecucion a 60 fps
  94.   (16 milisegundos) para una animacion suave y fluida
  95.   */
  96.   var i=0;
  97.   for (i=1;i<=3;i++)
  98.   {
  99.     if (option['sign_'+i]>0)
  100.       option['add_'+i] = ( option['ini_'+i]-option['fin_'+i] ) / (delay/16);
  101.     else
  102.      option['add_'+i] = ( option['fin_'+i]-option['ini_'+i] ) / (delay/16);
  103.   }

  104.   /*
  105.   Registro el momento en el que debe finalizar el efecto
  106.   */
  107.   option['dFin'] = (new Date()).getTime()+parseInt(delay);

  108.   /*
  109.   Guardo los parametros de configuracion en la cache del selector
  110.   y del efecto que corresponde
  111.   */
  112.   frameJS.objs[tag].animate[type]['option'] = option;
  113.  
  114.   /*
  115.   Invoco la funcion encargada de aplicar el efecto
  116.   */
  117.   frameJS.objs[tag].animate[type]['timer'] = window.setInterval(" frameJS.startAnimColor('" + tag + "','" + type + "')",16);    
  118. }
Comentarios acerca del codigo :

Esta funcion sigue el mismo plantemiento que el tomado para la funcion animate, por lo que recomiendo dar un vistazo al articulo anterior para quienes no lo hayan leido. Tan solo destacar algunas diferencias como las que encontramos cuando vamos a iniciar los valores de incio y final, ya que en este caso trabajaremos con el valor RGB, utilizado para representar el color.

Como es habitual encontramos diferencias en el tratamiento de dicho valor por los diferentes navegadores, asi en firefox nos encontramos con una representacion decimal para cada uno de los 3 colores que lo componen. Mientras en que en internet explorer utiliza la numeracion hexadicimal.

Ejemplo para firefox : rgb(255,255,255) (Blanco)
Ejemplo para internet explorer : #FFFFFF (Blanco)

De esta forma el objetivo principal de esta primera funcion es el de una buena inicializacion de los princiopales valores, para su posterior utilizacion por la funcion que veremos a continuacion.

Implementado la segunda funcion


Esta es la funcion encargada de realizar el efecto hasta su finalizacion, determinada por el tiempo que se habia especificado para el mismo.
  1. /*
  2. Codigo de la funcion encargada de realizar el efecto paso
  3. a paso hasta su finalizacion
  4. */
  5. this.startAnimColor = function(tag,type)
  6. {
  7.   /*
  8.   Recupero los valores de configuracion guardados en la cache
  9.   del objeto
  10.   */
  11.   var option = frameJS.objs[tag].animate[type]['option'];
  12.   var i=0;
  13.   var color = '#';

  14.   /*
  15.   Registro el tiempo resultante para la finalizacion del efecto
  16.   */
  17.   var time = option['dFin']-(new Date()).getTime();

  18.   /*
  19.   Me dispongo a obtener cada uno de los compoentes del
  20.   color RGB, con el consiguiente recalculo de los valores
  21.   utilizados para incrementar o reducir el valor actual,
  22.   en funcion al tiempo resultante.
  23.  En caso de haberse cumpldo el tiempo, pongo
  24.  directamente el vlor final.
  25.   */
  26.   for (i=1 ; i<=3 ; i++)
  27.   {
  28.     if (time>0)
  29.     {
  30.     var add= ((option['sign_'+i]>0) ? (option['fin_'+i] - option['ini_'+i]) : (option['ini_'+i] - option['fin_'+i])) / (time/14);
  31.     option['ini_'+i] = option['ini_'+i] + (add*option['sign_'+i]);
  32.     if ( (option['ini_'+i]<option['fin_'+i] && option['sign_'+i]<0) || (option['ini_'+i] > option['fin_'+i] && option['add_'+i]>0) )
  33.       option['ini_'+i]=option['fin_'+i];
  34.     }
  35.     else
  36.       option['ini_'+i]=option['fin_'+i];
  37.     /*
  38.     Aqui voy compiendo el color final con cada uno de los componentes
  39.     haciendo la conversion a hexadecilmal.
  40.     */
  41.     color = color + ((parseInt(option['ini_'+i]).toString(16).length == 1) ? ('0' + parseInt( option['ini_'+i] ).toString(16)) : ( parseInt(option['ini_'+i] ).toString(16)));
  42.   }

  43.   /*
  44.   Una vez obtenido el color lo aplicamos con la propiedad CSS correspondiente
  45.   */
  46.   frameJS.objs[tag].obj.css(type,color);

  47.   /*
  48.   Compruebo si ha cumplido el tiempo :
  49.   En caso afirmativo paro el temporizador de ejecucion y
  50.   verifico la existencia de alguna funcion a ejecutar
  51.   a la finalizacion. En caso de existir compruebo el formato
  52.   para saber como debo de invocarla
  53.   En caso de que el tiempo haya finlizado, el efecto debe
  54.   continuar, por lo que registro los valores actuales de
  55.   configuracion en la cache del objeto
  56.   */
  57.   if (time<=0)
  58.   {
  59.   clearTimeout(frameJS.objs[tag].animate[type]['timer']);
  60.   if (option['exec'] && typeof option['exec']=='function')
  61.     {
  62.     option['exec'].call(frameJS.objs[tag]['obj']);
  63.     option['exec']=null;
  64.     }
  65.     else
  66.     if (option['exec'])
  67.       eval(option['exec']);
  68.   }
  69.   else
  70.   frameJS.objs[tag].animate[type]['option']=option;
  71. }
Comentarios finales :

Con esta ultima funcion ya tenemos lo necesario para poder aplicar efectos de transicion de colores a los elementos que hayamos seleccionado de nuestro documento HTML.

Como estos efectos se aplican mediante los valores CSS, podremos crear atractivas transiciones para cambiar el color del fondo, texto o borde.

En este enlace tienen acceso a una pequeña demostracion de  la  ejecucion de las funciones que hemos visto en este articulo.

En el siguiente capitulo veremos como aplicar efectos para crear transiciones "fade in" y "fade out", con lo que dare por finalizada la trilogia de funciones para la aplicacion de efectos de nuestro querido framework.

Ultimas noticias

Crea tu propio framework en javascript

Recopilacion de articulos donde mostrare paso a paso como podemos crear nuestro propio framework en javascript, totalmente funcional y listo para ser utilizado en nuestros futuros proyectos.

Para mas informacion :

Tutorial para crear tu propio FrameWork en JavaSript

Más información
13/12/2013 11:42:57

Como crear una DLL en delphi?

En esta serie de 2 capitulos veremos como crear y utilizar una DLL en Delphi.

Abajo os dejo los enlaces a estos 2 capitulos que componen este mini tutorial, espero que sea de vuestro agrado :

Capitulo 1 : Creacion y utilizacion de una DLL

Capitulo 2 : Creacion de un formulario dinamico utilizando una DLL
Más información
19/09/2013 17:35:59

Ya puedes publicar tu opinion

A partir de ahora ya puedes comentar todas las publicaciones que encuentres en el portal.

Podras opinar tanto si algo te gusta como si no, o si crees que es conveniente completar alguna publicacion, ya que la encuentras incompleta o erronea.

O simplemente por si nos quieres felictar por algo bien hecho :-).

Valoraremos cualquier critica que nos puedas hacer.
Más información
20/05/2013 15:30:10

Tutorial PHP5

Fundamentos de la programacion orientada a objetos
Un interesante tutorial repartido en una serie de capitulos donde se tratan los conocimientos basicos de la programacion orientada a objetos (POO) en PHP5.

Para mayor informacion siga el siguiente enlace :

Tutorial POO en PHP

Más información
04/09/2013 15:44:29
0