HTML5: Aplica acciones de stop y play

Cómo accionar y detener la animación con un evento del usuario.
LUN, 28 / NOV / 2016

Una vez creada la animación podemos también aplicar acciones de play y stop sobre esta. De esta forma podremos accionar y detener la animación con un evento del usuario, por ejemplo: haciendo clic sobre el elemento que posee la animación.

Para ejecutar la acción de play sobre el objeto de la animación podemos realizar el pedido de una nueva animación y detener la animación en curso en el canvas. Simplemente no realizaremos el pedido de un nuevo cuadro de animación.

A continuación veremos un ejemplo de código en el cual aplicaremos la acción de detener haciendo clic sobre el elemento de la animación y con un segundo clic sobre el nuevo elemento:

<body>

<canvas id=”NuevoCanvas” width=”578″ height=”200″></canvas>

<script>

window.requestAnimFrame = (function(callback) {

return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||

function(callback) {

window.setTimeout(callback, 1000 / 60);

};

})();

function drawRect(myRectangle, context) {

context.beginPath();

context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);

context.fillStyle = ‘#8ED6FF’;

context.fill();

context.lineWidth = myRectangle.borderWidth;

context.strokeStyle = ‘black’;

context.stroke();

}

function animate(lastTime, myRectangle, runAnimation, canvas, context) {

if(runAnimation.value) {

// Actualización

var time = (new Date()).getTime();

var timeDiff = time – lastTime;

// pixeles por second

var linearSpeed = 100;

var linearDistEachFrame = linearSpeed * timeDiff / 1000;

var currentX = myRectangle.x;

if(currentX < canvas.width – myRectangle.width – myRectangle.borderWidth / 2) {

var newX = currentX + linearDistEachFrame;

myRectangle.x = newX;

}

// Borrar

context.clearRect(0, 0, canvas.width, canvas.height);

// Dibujar

drawRect(myRectangle, context);

// Pedir un nuevo cuadro

requestAnimFrame(function() {

animate(time, myRectangle, runAnimation, canvas, context);

});

}

}

var canvas = document.getElementById(‘myCanvas’);

var context = canvas.getContext(‘2d’);

var myRectangle = {

x: 0,

y: 75,

width: 100,

height: 50,

borderWidth: 5

};

var runAnimation = {

value: false

};

// Agrega un click listener al canvas

document.getElementById(‘myCanvas’).addEventListener(‘click’, function() {

// flip flag

runAnimation.value = !runAnimation.value;

if(runAnimation.value) {

var date = new Date();

var time = date.getTime();

animate(time, myRectangle, runAnimation, canvas, context);

}

});

drawRect(myRectangle, context);

</script>

</body>

figura-7

En el sitio web www.redusers.com/u/5j6 podemos ver un ejemplo muy simple de un juego donde se aplican animaciones con acciones, aceleración y oscilación.

Conclusión

En este capítulo aprendimos aplicar aceleración, oscilación y acciones de play y stop en las animaciones creadas dentro del elemento canvas de HTML5. Con esto, hemos llegado al final de esta serie de artículos que nos permiten tener conocimientos básicos sobre las distintas posibilidades que no brinda la etiqueta canvas.

¡Comparte esta noticia!

Últimos lanzamientos Ver más