ES

www.codigo-facil.com > Mi framework en Javascript, transparencias

Mi framework en Javascript


Capitulo 7 : Transparencias

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.

Introducion


En capitulos anteriores hemos visto como aplicar diferentes efectos a los elementos de nuestra pagina HTML. En este capitulo vamos a completar estos efectos con la posibilidad de modificar el parametro alpha, puediendo asi aplicar un efecto de transparencia.

Ademas vamos a completar el articulo con la creacion de otra funcion que nos permita aplicar una transicion entre 2 valores, con el objetivo de crear atractivas animaciones de aparicion y desaparicion. Permitiendo no solo mejorar el diseño de nuestra pagina sino tambien la navegacion, ya que podemos hacer destacar los elementos que nos interesen al hacer click en un texto, al paso por encima el raton, etc.

Podeis ver un ejemplo en funcionamiento en el siguiente enlace :
http://programa.128-k.com/html/demo/miframework/transparencia/

La funcion "setOpacity"


No debemos olvidar que el codigo tanto para esta funcion como para la que se encargara de realizar las animaciones de aparicion/desaparicion, debemos incluirlo en la zona reservada a nuevas funcionalidades de nuestra clase base.

Esta funcion se encarga de modificar el valor del parametro CSS correspondiente para aplicar un transparencia. Pero como es habitual existen diferencias entre internet explorer y el resto. Nada que no vayamos a solucionar con nuestra magica funcion.

Dejamos aqui la introduccion y pasamos a lo que realmente nos interesa, el codigo :
  1. this.setOpacity = function (value)
  2. {
  3.   if (this.objs!=null && this.objs.length>0)
  4.   {
  5.     var i=0;
  6.    
  7.     /*Chequeo sencillo del valor para que
  8.     no se exceda de los limites*/
  9.     if (value>100)
  10.       value=100:
  11.     else
  12.     if (value<0)
  13.       value=0;

  14.     /*Bucle que recorre la cache del selector*/
  15.     for (i=0;i<this.objs.length;i++)
  16.     {
  17.       /*Si el objeto no esta visible, lo hago vosible
  18.       para aplicr la transparencia*/
  19.       if (value>0 && this.objs[i].style.display=='none')
  20.         this.objs[i].style.display='block';

  21.       /*Aplico el valor segun el navegador,
  22.       explorer y el resto*/
  23.       if (this.navign==1)
  24.         this.objs[i].style.filter = 'alpha(opacity='+(value)+')';
  25.       else
  26.           this.objs[i].style.opacity = value/100;
  27.     }
  28.   }
  29.   /*Devuelvo el objeto para seguir enlazando
  30.   ejecuciones si fuera necesrio*/
  31.   return this;
  32. }

Jugando con las transparencias


Como habia comentado anteriormente una vez que tenemos la funcion para cambiar la opacidad de cualquier elemento de nuestra pagina HTML, vamos a ver como crear una funcion que nos permita jugar con estos valores, puediendo asi aplicar efectos de aparicion/desaparicion a los elementos previamente seleccionados.

Para ello vamos a necesitar crear 3 funciones, que incluiremos en nuestra clase base, ta y como hemos hecho con la funcion "setOpacity". Estas funciones son las siguientes :
  • "getOpacity" : Funcion que se encarga de obtener el valor utilizado para representar la opacidad de un determinado elemento.
  • "startFade" : Funcion encargada de aplicar el efecto hasta su finalizacion. Sera invocada internamente.
  • "fade" : Es la funcion que se encarga de realizar los preparativos antes de la aplicacion del efecto. Es la funcion que utilizaremos cada vez que queramos aplicar el efecto.
Como podemos comprobar, si hemos seguido el tutorial, se sigue la misma logica que en la creacion de los efectos anteriores. La implementacion de cada una de ellas la vamos a ver a continuacion.

La funcion "getOpacity"


Vamos a empezar viendo la implementacion de esta sencilla funcion que obtiene el valor de la transparencia del objeto que se tenga en la cache del selector.

  1. this.getOpacity = function()
  2. {
  3.   if (this.objs.length>0)
  4.   {
  5.     var value = this.objs[0].style.filter;
  6.     if (typeof value=='string')
  7.       value = value.split('=');
  8.     return parseInt(value[1]);
  9.   }
  10.   else
  11.   return this.objs[this.objs.length-1].style.opacity*100;
  12. }

La funcion "startFade"


Esta es realmente la que realiza todo el trabajo. Es invocada por la funcion que implementaremos al final del articulo, y se encarga de aplicar el efecto en relacion al tiempo y los valores de inicio y final especificados.

Su codigo es el siguiente :
  1. this.startFade = function (selector)
  2. {
  3.   /*Varifico la existencia de la cache del selector*/
  4.   if (apiJS.objs[selector])
  5.   {
  6.     /*Recupero los parametros de configuracion actuales*/
  7.     var option = apiJS.objs[selector].animate['fade']['option'];

  8.     /*Actualizo el tiempo que nos queda para finalizar
  9.     el efecto segun la duracion especificadaa*/
  10.     var time = option['dFin'] - (new Date()).getTime();

  11.     if (time>0)
  12.     {
  13.       /*Si aun queda tiempo, ajusto el valor de incremento
  14.       en funcion al total restante y al tiempo disponible,
  15.       despues lo divido por la cantidad de ciclos
  16.       de repeticion que se van a ejecutar*/
  17.       var add = ((option['sign']>0)?(option['value']-option['ini']):(option['ini']-option['value']))/(time/16);

  18.       /*Le aplico el signo corrspondiente para el posterior calculo */
  19.       add = add*option['sign'];
  20.       option['ini']=option['ini']+parseInt(add);

  21.       /*en caso de que el valor se excede lo ajusto directamente*/
  22.       if ( ( option['sign'] > 0 && option['ini'] > option['value'] ) || ( option['sign']<0 && option['ini'] < option['value'] ) )
  23.       option['ini'] = option['value'];

  24.       /*Acualizo los parametros de configuracion del efecto
  25.       y aplico el valor de la transparencia obtenido del calculo*/
  26.       apiJS.objs[selector].animate['fade']['option'] = option;
  27.       apiJS.objs[selector].obj.setOpacity(option['ini']);
  28.     }
  29.     else
  30.     {
  31.       /*
  32.       Se ha pasado el tiempo de duracion del efecto, por lo que le aplico el valor final directamente y ademas verifico la existencia de una funcion "callback" a ejecutar una vez finalizado el efecto. Esta funcion puede ser una cadena de texto o una funcion nativa por lo que hgo la correspondiente verificacion para saber como invocarla
  33.       */
  34.       option['ini'] = option['value'];
  35.       apiJS.objs[selector].obj.setOpacity(option['ini']);
  36.       clearTimeout(apiJS.objs[selector].animate['fade']['timer']);
  37.       if (option['exec'])
  38.       {
  39.         if (typeof option['exec'] == 'string')
  40.           eval(option['exec']);
  41.         else
  42.         {
  43.           option['exec'].call(apiJS.objs[selector]['obj']);
  44.           option['exec'] = null;
  45.         }
  46.       }
  47.     }
  48.   }
  49. }

La funcion "fade"


Esta es realmente la funcion que vamos a utilizar para lanzar el efecto. Se encarga de realizar todos los preparativos antes de la ejecucion de la animacion ya sea de aparicion o desaparicion.

Comentar tan solo que la funcion admite 3 parametros, aunque a nosotros solo nos interesara los 2 primeros :
  • option : Objeto donde indicamos los valores de inicio, final, duracion del efecto o una funcion "callback" a ejecutar tras la finalizacion de la animacion.
  • sleep : Entero que nos sirve para aplicar un retardo, en milisegundos, antes de lanzar el efecto.
  • selector : Se utiliza internamente en caso de que hayamos forzado el retardo. Sirve para poder recordar el selector utilizado para la aplicacion del efecto.
El codigo de la funcion es el siguiente :
  1. this.fade = function(option,sleep,selector)
  2. {

  3.   /*En caso de no estar definido el selector ,
  4.   lo inicializao con el selector actual*/
  5.   if (!selector)
  6.     selector = this.selector;

  7.   /*Creo la cache necesaria para la ejecucion del efecto
  8.   en caso de que aun no se haya inicializado, si existe
  9.   paro las posibles ejecuciones que esten en marcha*/
  10.   if (!apiJS.objs[selector].animate['fade'])
  11.       apiJS.objs[selector].animate['fade'] = {};
  12.   else
  13.     clearTimeout(apiJS.objs[selector].animate['fade']['timer']);

  14.   /*Verifico si se ha invocado la funcion especificando un retardo*/
  15.   if (sleep && sleep!=-1)
  16.   {
  17.     /*Guardo las opciones en la ccche y vualvo a
  18.     invocar la funcion con el retardo correspondiente,
  19.     esta vez asignandole el valor -1 al retardo,
  20.     para indicar que viene del temporizador*/
  21.     apiJS.objs[selector].animate['fade']['option'] = option;
  22.     apiJS.objs[selector].animate['fade']['timer'] = window.setInterval(' apiJS.fade(' + this.ArraytoString( option ) + ',-1,"' + selector + '") ',sleep);
  23. return this;
  24.   }

  25.   /*Inicializao el valor de inicio para el efecto
  26.    con el valor de transparencia actual,
  27.   en caso de no existir le doy el valor 0*/
  28.   option['ini'] = parseInt(apiJS.objs[selector].obj.getOpacity());
  29.   if (!option['ini'])
  30.     option['ini'] = 0;

  31.   /* Segun el valor de inicio y final registro
  32.   el tipo de signo que tendra la operacion
  33.    a efectuar, si es positivo quiere decir que
  34.   es un efecto de aparcicion, negativo pues
  35.   sera de desaparicion ;-) */
  36.   option['sign'] =  1;
  37.   if (option['ini']>option['value'])
  38.     option['sign'] = -1;

  39.   /*Iniciamiza la duracion del efcto en caso
  40.   de no haberse especificado, por defecto
  41.   400 milisegundos*/
  42.   if (!option['delay'])
  43.     var delay = 400;
  44.   else
  45.     var delay = option['delay'];

  46.   /*
  47.   Calculo el momento que debe finalizar el efecto
  48.   */
  49.   option['dFin'] = (new Date()).getTime()+parseInt(delay);
  50.  
  51.   /*
  52.   Si se habia especificado un retardo
  53.   recupero la posible funcion callback
  54.   que hubieramos especificdo
  55.   */
  56.   if (sleep==-1 && apiJS.objs[selector].animate['fade']['option']['exec'])
  57.     option['exec'] = apiJS.objs[selector].animate['fade']['option']['exec'];
  58.  
  59.   /* Registro los valores de configuracion
  60.   actuales en la cache del efecto*/
  61.   apiJS.objs[selector].animate['fade']['option'] = option;

  62.   /*Si los vlores de inicio y final son distintos, lanzo el efecto*/
  63.   if(option['ini'] != option['value'])
  64.   {
  65.   apiJS.objs[selector].animate['fade']['timer'] = window.setInterval("apiJS.startFade('"+selector+"')",16);
  66.   }
  67.   return this;
  68. }
Comentarios finales :

Con la finalizacion de este articulo doy por concluida esta mini serie de 3 tutoriales dedicada a implementar efectos visuales para nuestro framework.

En este enlace podeis ver un ejemplo en funcionamiento de las funciones vistas en este articulo:
http://programa.128-k.com/html/demo/miframework/transparencia/

En el siguiente capitulo cambiaremos totalmente de tercio e incluiremos otra funcionalidad bastante interesante para nuestro framework, la creacion de eventos.

Aqui me despido, como siempre gracias a tod@s por vuestro apoyo y nos vemos en la siguiente publicacion.

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