Crear animaciones sucesivas, interactivas y que simulen escenas en un canvas en HTML5

5 de noviembre de 2016

Tu navegador no soporta canvas

Con CANVAS se pueden crear animaciones sucesivas, interactivas y que simulen escenas como en Adobe Flash. El código utilizado en este ejemplo es:

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Animaciones Sucesivas</title> <script> window.onload = function() { animacion_con_canvas(); } function animacion_con_canvas() { var mi_canvas = document.getElementById("canvas"); var contexto = mi_canvas.getContext("2d"); var xpos = 0; var img_fondo = new Image(); var img_palomita = new Image(); var img_encuesta = new Image(); var img_clima = new Image(); var img_fecha = new Image(); var img_participa = new Image(); img_fondo.src ="./i/canvas/00.png"; img_palomita.src ="./i/canvas/01.png"; img_encuesta.src ="./i/canvas/02.png"; img_clima.src ="./i/canvas/03.png"; img_fecha.src ="./i/canvas/04.png"; img_participa.src ="./i/canvas/05.png"; var intro_alpha =0; var alpha_velocidad = 0.0055555556; // velocidad para aparecer // requestAnimationFrame muestra 60 frames por segundo // 60 frames = 1 segundo // 600 frames = 10 segundos // 1 (alpha full) / 180 (frames _ 3 segundos) = 0.0055555556 var pausa_en_stage = 5000; // velocidad para quedarse en pantalla img_participa.addEventListener('load', iniciar_animacion, false); // valida que la imagen se haya cargado // ejecuta la función iniciar_animacion function iniciar_animacion() { intro_in(); // ejecuta la funcion intro_in } // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * // muestra fondo // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * function muestra_fondo() { contexto.fillStyle = "#ffffff"; // borra el fondo contexto.fillRect(0, 0, 450, 202); // crea un rectangulo para borrar el fondo contexto.drawImage(img_fondo, 0, 0); contexto.drawImage(img_palomita, 309, 21); } // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * // intro alpha in // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * function intro_in() { intro_in_fx = requestAnimationFrame(intro_in); muestra_fondo(); contexto.save(); // guarda el canvas como esta // aplicamos cambios contexto.globalAlpha = intro_alpha; contexto.drawImage(img_encuesta, 15, 63); contexto.drawImage(img_clima, -1, 102); intro_alpha = intro_alpha + alpha_velocidad; contexto.restore(); // despues de hacer los cambios // restauramos el canvas guardado if(intro_alpha > 1) { intro_alpha = 0; window.cancelAnimationFrame(intro_in_fx); // elimina la animación intro_estatica(); // muestra las cosas sin movimiento... } } // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * // intro estatica // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * function intro_estatica() { muestra_fondo(); contexto.drawImage(img_encuesta, 15, 63); contexto.drawImage(img_clima, -1, 102); timeout_intro_estatica = window.setTimeout(kill_timeout_intro_estatica, pausa_en_stage); // en 5 segundos se ejecutara kill_timeout_intro_estatica } // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * // kill_timeout_intro_estatica // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * function kill_timeout_intro_estatica() { window.clearTimeout(timeout_intro_estatica); // destruye el timeout fecha_in(); // ejecuta la siguiente función // durante n tiempo } // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * // intro fecha alpha in // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * function fecha_in() { fx_fecha_in = requestAnimationFrame(fecha_in); muestra_fondo(); contexto.save(); // guarda el canvas como esta // aplicamos cambios contexto.globalAlpha = intro_alpha; contexto.drawImage(img_fecha, 21, 44); intro_alpha = intro_alpha + alpha_velocidad; contexto.restore(); // despues de hacer los cambios // restauramos el canvas guardado if(intro_alpha > 1) { intro_alpha = 0; window.cancelAnimationFrame(fx_fecha_in); // elimina la animación fecha_estatica(); // muestra las cosas sin movimiento... } } // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * // intro fecha estática // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * function fecha_estatica() { muestra_fondo(); contexto.drawImage(img_fecha, 21, 44); timeout_fecha_estatica = window.setTimeout(kill_fecha_estatica, pausa_en_stage); // en 5 segundos se ejecutara kill_fecha_estatica // setTimeout(función a ejecutarse, en cuanto tiempo) } // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * // kill_fecha_estatica // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * function kill_fecha_estatica() { window.clearTimeout(timeout_fecha_estatica); // destruye el timeout participa_in(); // ejecuta la siguiente función // durante n tiempo } // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * // intro participa alpha in // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * function participa_in() { fx_participa_in = requestAnimationFrame(participa_in); muestra_fondo(); contexto.save(); // guarda el canvas como esta // aplicamos cambios contexto.globalAlpha = intro_alpha; contexto.drawImage(img_participa, 10, 74); intro_alpha = intro_alpha + alpha_velocidad; contexto.restore(); // despues de hacer los cambios // restauramos el canvas guardado if(intro_alpha > 1) { intro_alpha = 0; window.cancelAnimationFrame(fx_participa_in); // elimina la animación participa_estatica(); // muestra las cosas sin movimiento... } } // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * // intro participa_estatica // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * function participa_estatica() { muestra_fondo(); contexto.drawImage(img_participa, 10, 74); timeout_participa_estatica = window.setTimeout(kill_participa_estatica, pausa_en_stage); // en 5 segundos se ejecutara kill_fecha_estatica // setTimeout(función a ejecutarse, en cuanto tiempo) } // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * // kill_participa_estatica // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * function kill_participa_estatica() { window.clearTimeout(timeout_participa_estatica); // destruye el timeout intro_in(); // ejecuta la siguiente función } // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * // al hacer click... // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * function al_hacer_click(e) { window.location.href = 'http://www.alaingarcia.net/'; } mi_canvas.addEventListener("click", al_hacer_click, false); // crea el botón... // onMouseClick el nombre de la función a ejecutarse } </script> </head> <body> <canvas id="canvas" width="450" height="202" style="cursor:pointer; border:3px solid #ccc; cursor:pointer;"> Tu navegador no soporta canvas </canvas> </body> </html>

Este ejemplo es parte de un tutorial más completo que puede consultarse:


Comenta y opina este texto     Lee mi libro de visitas
© 1997-2019 Alain García Gómez
albegago@hotmail.com
Twitter: @feesgo
El vínculo a este documento es:

Compartir en facebook Compartir en twitter Compartir en whatsapp Rss

Puedes apoyar a este sitio invitándome a comer...

Este sitio utiliza cookies propias y de terceros para mejorar sus servicios. Si continua navegando, entendemos que acepta su uso. Política de Privacidad