Busca el tema de tu interés

viernes, 1 de abril de 2016

Gifs con javascript

Los gifs son populares en google+, twitter y otras redes sociales ya que de alguna manera una animación de imágenes o fotografía bien hecha capta la atención de los espectadores ya que es como si las imágenes cobrarán vida, nuestros sentidos captan las imágenes en el gif como si esta se estuvieran moviendo y esto no está más lejos de la realidad, ya que es nuestro cerebro quién percibe este movimiento por que las fotos e imágenes no se mueven, lo que sucede es que las imágenes en un gif son cambiada en un mismo marco y la velocidad con la que percibimos que se mueve el gif es la rapidez con la que son intercambiadas las fotos del gif.
Mientras menor es el tiempo que escogemos para que la fotos se intercambien mayor será la velocidad con que percibiremos el movimiento de las imágenes.
¿Qué es un gif?
Desde mi humilde punto de vista un gif es un conjunto de fotos o imágenes con un ancho y un alto de cada imágen igual que se alternan o intercambian en un intervalos de tiempo determinado.
Para crear un gif para uso en un blog o página web sin tener que usar alguna aplicación en internet que genere el gif a partir de las imágenes o fotos predeterminadas lo podemos hacer usando el lenguaje de programación javascript.
Esta imagen generada a continuación es un gif creado con el lenguaje de programación javascript.

1--Para crear un gif con javascript lo primero que haremos es elegir las url de las imágenes o fotos que queremos que compongan nuestro gif y si estas imágenes tienen el mismo ancho y la misma altura mucho mejor, aunque se puede hacer con imágenes de diferentes anchos y alturas.
2--Segundo hacemos una array o una matriz con una variable con estas url de cada imagen
3--Luego colocamos estas fotos en una etiqueta div otorgándole un id a esta etiqueta en nuestro caso el id va a ser id="gifsconjavascript", pero esto lo haremos por programación, pero debe haber una de las imágenes que vamos a utilizar en el gifs cuando carguemos la pagina en el blog o en nuestra pagina web.
<div id = "gifsconjavascript">
<img href = "https://2.bp.blogspot.com/-Vq8zTu564qc/VvBXx0C4f6I/AAAAAAAAE2g/MFRjSfSs-FA99NklB3dUwglhOXCQjTktw/s1600/gifconjavascript1.gif" />
</div>
4- Vamos a alternar de manera ordenadas las fotos para nuestro gifs para esto utilizaremos los siguientes códigos
Ejemplo estos códigos son lo que hacen parecer que el tigre parezca moverse en la imagen de más arriba
<script type = "text/javascript">
<!--
 var i = 0 ;
window.onload = function(){gif();} ;
function gif()
{

var x = ["http://2.bp.blogspot.com/-Vq8zTu564qc/VvBXx0C4f6I/AAAAAAAAE2g/MFRjSfSs-FA99NklB3dUwglhOXCQjTktw/s1600/gifconjavascript1.gif",
"http://4.bp.blogspot.com/-VUjSKqTZB3Y/VvBX7kNzYnI/AAAAAAAAE2o/HiQwX3d_kNcQvmSmvKORIZmKq_5PHTC4A/s1600/gifconjavascript2.gif",
 "http://3.bp.blogspot.com/-H56wk11g8tQ/VvBYCfvnkNI/AAAAAAAAE2w/mnO5cns6fE8mIGjf-WOczZuxya173yo4g/s1600/gifconjavascript3.gif",
"http://1.bp.blogspot.com/-CU18J9wP9mU/VvBYJlgcqFI/AAAAAAAAE24/2lUBUajzn60mBRPDN56mGJaqkzl9G67Og/s1600/gifconjavascript4.gif",
"http://2.bp.blogspot.com/-etSQmO3IirA/VvBYTCVb7SI/AAAAAAAAE3A/eGB9pDjQldQqj9iRxTrX0WN6qeaGxgTYg/s1600/gifconjavascript5.gif",
"http://4.bp.blogspot.com/-WKdOPw67f1s/VvBYYijfRPI/AAAAAAAAE3I/EWIBDnxE7V07ps5qtzef5OoylN0AbOyig/s1600/gifconjavascript6.gif",
"http://4.bp.blogspot.com/-WKdOPw67f1s/VvBYYijfRPI/AAAAAAAAE3I/EWIBDnxE7V07ps5qtzef5OoylN0AbOyig/s1600/gifconjavascript6.gif",
"http://4.bp.blogspot.com/-WKdOPw67f1s/VvBYYijfRPI/AAAAAAAAE3I/EWIBDnxE7V07ps5qtzef5OoylN0AbOyig/s1600/gifconjavascript6.gif",
"http://4.bp.blogspot.com/-WKdOPw67f1s/VvBYYijfRPI/AAAAAAAAE3I/EWIBDnxE7V07ps5qtzef5OoylN0AbOyig/s1600/gifconjavascript6.gif",
"http://4.bp.blogspot.com/-WKdOPw67f1s/VvBYYijfRPI/AAAAAAAAE3I/EWIBDnxE7V07ps5qtzef5OoylN0AbOyig/s1600/gifconjavascript6.gif" ];
// la variable somo representa la
// etiqueta con id "gifsconjavascript"
var somo = document.getElementById("gifsconjavascript");
// Si ya se han presentado 9 imágenes entonces
// volvemos a imagen 1 osea x[0]
 if(i == 10) i = 0 ;
// cambiamos el atributo src para presentar
// una imagen nueva en la etiqueta con id 
// gifsconjavascript
somo.setAttribute("src",x[i]);

// incrementamos en 1 el valor de i
i += 1;
// Esta código ejcuta la función gif
// cada 300 milisegundos
setTimeout("gif()", '300');
}
-->
</script>
Declaramos la variable i = 0 fuera de la función gif() ya que esto permite que esta variable tenga un alcance global, que irá cambiando desde 0 hasta 9 accediendo a distintas imágenes cada vez que la función gif() es llama por medio del código [setTimeout("gif()",'300');].
window.onload = function(){gif();} ;
El código [window.onload = function{gif():};], permite que podamos ejecutar los códigos en la function gif() cuando carguemos nuestra página.
var i = 0 ;
window.onload = function(){gif();} ;
La variable [x] es la que almacena las url de las imágenes que usamos en el gif, por lo que si usted quiere crear su gif personalizado con estos códigos solo cambie las url que contiene la variable x.
// var x = []; Esta variable almacena las url del gif
//--
var x = ["http://2.bp.blogspot.com/-Vq8zTu564qc/VvBXx0C4f6I/AAAAAAAAE2g/MFRjSfSs-FA99NklB3dUwglhOXCQjTktw/s1600/gifconjavascript1.gif",
"http://4.bp.blogspot.com/-VUjSKqTZB3Y/VvBX7kNzYnI/AAAAAAAAE2o/HiQwX3d_kNcQvmSmvKORIZmKq_5PHTC4A/s1600/gifconjavascript2.gif",
 "http://3.bp.blogspot.com/-H56wk11g8tQ/VvBYCfvnkNI/AAAAAAAAE2w/mnO5cns6fE8mIGjf-WOczZuxya173yo4g/s1600/gifconjavascript3.gif",
"http://1.bp.blogspot.com/-CU18J9wP9mU/VvBYJlgcqFI/AAAAAAAAE24/2lUBUajzn60mBRPDN56mGJaqkzl9G67Og/s1600/gifconjavascript4.gif",
"http://2.bp.blogspot.com/-etSQmO3IirA/VvBYTCVb7SI/AAAAAAAAE3A/eGB9pDjQldQqj9iRxTrX0WN6qeaGxgTYg/s1600/gifconjavascript5.gif",
"http://4.bp.blogspot.com/-WKdOPw67f1s/VvBYYijfRPI/AAAAAAAAE3I/EWIBDnxE7V07ps5qtzef5OoylN0AbOyig/s1600/gifconjavascript6.gif",
"http://4.bp.blogspot.com/-WKdOPw67f1s/VvBYYijfRPI/AAAAAAAAE3I/EWIBDnxE7V07ps5qtzef5OoylN0AbOyig/s1600/gifconjavascript6.gif",
"http://4.bp.blogspot.com/-WKdOPw67f1s/VvBYYijfRPI/AAAAAAAAE3I/EWIBDnxE7V07ps5qtzef5OoylN0AbOyig/s1600/gifconjavascript6.gif",
"http://4.bp.blogspot.com/-WKdOPw67f1s/VvBYYijfRPI/AAAAAAAAE3I/EWIBDnxE7V07ps5qtzef5OoylN0AbOyig/s1600/gifconjavascript6.gif",
"http://4.bp.blogspot.com/-WKdOPw67f1s/VvBYYijfRPI/AAAAAAAAE3I/EWIBDnxE7V07ps5qtzef5OoylN0AbOyig/s1600/gifconjavascript6.gif" ];
Cuando la función gif es llamada por primera vez al cargar la página o entrada de blog se cargará el contenido en x[i], como i=0 entonces x[0], luego cuando la función vuelve a ejecutarse en un tiempo 300 milisegundo se accede al contenido de x[1], luego x[2],...,x[9].
el código encargado de hacer el cambio de imágenes cada vez que se llama la función gif() es.
somo.setAttribute("src",x[i]);
Bueno y la variable "somo" es la encargada de identificar la etiqueta de la imagen img , a la que accedemos cambiando el atributo[attribute] "src", mediante el código.
somo.setAttribute("src",x[i]);
Y el código responsable de que se produzca una alternación de imágenes cada 300 milisegundos es.
setTimeout("gif()", '300');
Vea también
Copiar, pegar y guardar un texto o imagen
Como convertir una foto al formato ico
Ejemplos de tipos de códigos para crear una función de visual basic
Solución de operaciones fraccionarias (Aplicación)
Juego de matemática (Aplicación)

No hay comentarios.:

Publicar un comentario

Por favor haga sus preguntas y comentarios relacionados con los temas de este blog de manera moderada sin lenguaje inapropiado . Gracias