Pensamientos computables

Jquery fire plugin: generador de animaciones y texturas de fuego

Jquery fire plugin

Jquery fire plugin es un plugin de Jquery para crear animaciones e imágenes de fuego en tu página, o para generarlas, copiarlas y usarlas independientemente de este plugin. Si usas la primera opción, las imágenes no ocuparán nada (sólo los 4.5kb que ocupa el plugin comprimido en gzip y lo que ocupe la librería de Jquery). El único problema, es que al usar el nuevo elemento canvas de HTML5, no funciona en Internet Explorer 7 o cualquier versión inferior, pero en estos casos puedes hacer que aparezca una imagen directamente con los comentarios condicionales de IE. Para generar la imagen de la textura de fuego puedes usar el siguiente formulario:

Seleccione donde quiere que se centre la máxima potencia de fuego (maxPowZone)

Ancho de la llama (flameWidth):

Alto de la llama (flameHeight)*:

Parar | Descargar imagen | Usar como fondo

Juegue con los parámetros para encontrar el efecto deseado:

* Aumentar los parámetros marcados con asterisco disminuye rendimiento.

Ancho (width)*: px

Alto (height)*: px

Velocidad deseada (speed): fps

Nivel de transparencia de la llama (fireTransparency): %

Nivel de transparencia global (globalTransparency): %

Potencia máxima (maxPow):

Potencia mínima (minPow):

Gravedad (gravity):

Velocidad de desvanecimiento de la llama (fadingFlameSpeed):

Recortar por debajo a partir del pixel (yOffset)*:

Funcionamiento

Debes incluir la librería de Jquery y la del plugin, la última versión es la 0.62, la cual puedes descargar en este enlace o en los siguientes ejemplos de uso:

Descargar ejemplo simple

Descargar ejemplo simple con varios elementos

La funcionalidad sobre Internet Explorer 8 está limitada sólo al modo imagen y además tienes que incluir un archivo Javascript adicional que se incluye en el ejemplo siguiente:

Descargar ejemplo simple que funciona también en Internet Explorer 8

Código Javascript para llamar al plugin, con algunos parámetros de ejemplo:

$(document).ready(function() {
  $('#fire').fire({
		speed:20,
		maxPow:5,
		gravity:0,
		flameWidth:3,
		flameHeight:0,
		fadingFlameSpeed:8	
	});
  });

Podemos asignar el efecto a cualquier tipo de elemento, preferiblemente un div:

El ancho y el alto del efecto se puede especificar en los parámetros anteriores o en el código CSS:

#fire{width:150px;height:100px;}

Código HTML:

<div id="fire"></div>

También podemos usarlo directamente sobre un objeto canvas:

<canvas id="fire" width="150" height="100"></canvas>

Parámetros:

El parámetro más importante es el parámetro mode, que se explica a continuación, para entender y poder probar el resto de parámetros se recomienda usar el formulario de arriba.

mode String Por defecto:'anim'

Establece el modo de funcionamiento del plugin, los posibles valores son:

'anim': Modo animación. El fuego es una animación.

'background': Modo fondo. El fuego es una imagen fija (establecida mediante la propiedad background-image de CSS). Si el tamaño del elemento sobre el que se aplica tiene un ancho mayor que el establecido con el parámetro width, entonces el fuego se dibuja como una textura que se puede repetir sin cortes en el eje X (apreciable sólo si el parámetro 'burnBorders' es true).

'image': Modo imagen. El fuego es una imagen fija que se crea dentro de un nuevo elemento img.

Establecer el modo:

$(document).ready(function() {
  $('#fire').fire({mode:'anim'});
});

Parámetros globales

Estos parámetros afectan a todos los modos de funcionamiento ('anim','image' y 'background').

width Entero Por defecto:null

Ancho de la imagen o animación.

Si no se establece en la inicialización se cogerá el ancho del elemento HTML. Si no se establece el ancho ni en la inicialización ni en el elemento HTML, arrojará una excepción.

height Entero Por defecto:null

Alto de la imagen o animación.

Si no se establece en la inicialización se cogerá el alto del elemento HTML. Si no se establece el alto ni en la inicialización ni en el elemento HTML, arrojará una excepción.

maxPow Entero Por defecto:3

Valor entre 0 y 10 que determina la máxima potencia de fuego.

Cambiando este valor haremos que el fuego sea más o menos intenso y llegue más o menos alto.

minPow Entero Por defecto:1

Valor entre 0 y el valor del parámetro 'maxPow' que determina la mínima potencia de fuego.

Este valor sólo es apreciable si el parámetro maxPowZone no tiene el valor 'uniform', ya que determina la mínima intensidad del fuego en el resto de modos de dicho parámetro.

maxPowZone String Por defecto:'uniform'

Establece en que parte del ancho del efecto, estará la máxima y mínima potencia del fuego, establecidas con los parámetros maxPow y minPow, respectivamente.

Posibles valores:

  • 'uniform': Todas las partes aparecen a la máxima potencia.
  • 'left': La parte izquierda aparece a máxima potencia y la derecha a la mínima.
  • 'right': La parte derecha aparece a máxima potencia y la izquierda a la mínima.
  • 'center': La parte central aparece a máxima potencia y los lados a la mínima.
  • 'sides': La parte central aparece a mínima potencia y los lados a la máxima.
  • 'random': Cambia de modo aleatoriamente cada vez que se dibuja el fuego.

gravity Entero Por defecto:5

Valor entre 0 y 10 que determina la gravedad del planeta.

Afecta a la altura del fuego y a la forma de las llamas.

fireTransparency Entero Por defecto:0

Valor entre 0 y 100.

Incrementarlo permite que el nivel de transparencia de las llamas aumente conforme se van desvaneciendo. Este parametro no funciona en Internet Explorer 8.

Un valor de 0 deja el fondo totalmente negro.

globalTransparency Entero Por defecto:0

Valor entre 0 y 100.

El nivel de transparencia global asigna un nivel de transparencia a todo el efecto de fuego.

flameWidth Entero Por defecto:2

Valor entre 0 y 4.

Modifica el ancho de las llamas

flameHeight Entero Por defecto:2

Valor entre 0 y 4

Modifica la altura de las llamas.

fadingFlameSpeed Entero Por defecto:2

Valor entre 0 y 20.

La velocidad de desvanecimiento del fuego produce que las llamas se desvanezcan antes conforme se aumenta este valor.

yOffset Entero Por defecto:0

Recorta el fuego por debajo de la altura que se especifique.

plasm Booleano Por defecto:false

Cuando es true activa el modo plasma que hace que las llamas tengan un aspecto más granulado que en el modo normal.

Este modo consume ligeramente menos CPU.

cartoon Booleano Por defecto:false

Activado da aspecto de dibujo animado al fuego.

burnBorders Booleano Por defecto:true

Si establecemos el parámetro burnBorders a false, no aparecerá fuego en los bordes derecho e izquierdo.

Parámetros exclusivos del modo animación

mode:'anim'

speed Entero Por defecto:20

Valor mínimo 1.

Imágenes por segundo a las que se desea que trabaje.

Dependiendo principalmente del navegador, el tamaño establecido y el equipo en el que se ejecuta, puede que el valor real no alcance el deseado.

showFps Boolean Por defecto:false

Muestra, en la esquina superior derecha, el número real de imágenes por segundo a las que está funcionando.

mouseEffect Boolean Por defecto:true

Si está activado, aparece una llama cuando se mueve el ratón por encima.

mouseId String Por defecto:nada

Aquí puedes asignar un bloque que escuche los eventos del ratón diferente al del efecto de fuego, especificando el identificador. Esto es util cuando tienes un bloque semi-transparente sobre el efecto de fuego y quieres que funcione el efecto del ratón. Ejemplo:

  <div id="mouseListener" style="position:absolute;width:100px;height:100px;z-index:2">
    Texto sobre el efecto de fuego
  </div>
  <div id="fireEffect" style="position:absolute;width:100px;height:100px;z-index:1"></div>

  <script language="javascript">
    $('#fireEffect').fire({mouseId:mouseListener});
  </script>

Parámetros exclusivos de los modos imagen y fondo

mode:'image'

mode:'background'

steps Entero Por defecto:120

Cuando se inicializa el efecto en el modo animación, el fuego aparece desde abajo hasta que alcanza su máxima altura. Este parámetro indica el número de pasos que deben transcurrir antes de coger la imagen que se mostrará en el navegador.

Dependiendo de la configuración del resto de parámetros puede ser necesario modificar este valor para obtener la imagen deseada.

Cuanto más alto sea este valor, más tardará en aparecer el resultado.

showLoad Boolean Por defecto:true

Muestra el porcentaje de renderizado de la imagen, mientras ésta se calcula.

Opcionalmente se puede añadir un mensaje al lado de este porcentaje con el parámetro loadMessage.

LoadMessage String Por defecto:''

Establece el mensaje que se mostrará al lado del porcentaje de renderizado mientras se calcula la imagen. El parámetro showLoad debe ser true para que se muestre.

Funciones:

change

En el modo animación podemos cambiar cualquier parámetro del mismo, mientras se está visualizando mediante la función change. Ejemplo:

$('#fire').fire('change',{plasm:true}); 

play

En el modo animación, hace que esta continue si previamente se ha parado con la función stop. Ejemplo:

$('#fire').fire('play');

stop

En el modo animación, hace que esta se pare si se está moviendo.

$('#fire').fire('stop');

playStop

En el modo animación, hace que se pare si se está moviendo o que continue si está parada. Ejemplo:

$('#fire').fire('playStop');

getDataURI

En cualquiero modo, devuelve la imagen que está mostrando actualmente códificada con el esquema data:uri

$('#fire').fire('getDataURI');
Daiatron en Google+