HTML5: Genera animaciones oscilantes

La siguiente es la ecuación:

x(t) = amplitude * sin(t * 2PI / period) + x0

Veamos un ejemplo de código de una animación oscilante

<body>

window.requestAnimFrame = (function(callback) {

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

function(callback) {

window.setTimeout(callback, 1000 / 60);

};

})();

function drawRectangle(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(myRectangle, canvas, context, startTime) {

// Actualizar

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

var amplitude = 150;

// in ms

var period = 2000;

var centerX = canvas.width / 2 – myRectangle.width / 2;

var nextX = amplitude * Math.sin(time * 2 * Math.PI / period) + centerX;

myRectangle.x = nextX;

// Borrar

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

// Dibujar

drawRectangle(myRectangle, context);

// Pedir un nuevo cuadro

requestAnimFrame(function() {

animate(myRectangle, canvas, context, startTime);

});

}

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

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

var myRectangle = {

x: 250,

y: 70,

width: 100,

height: 50,

borderWidth: 5

};

drawRectangle(myRectangle, context);

// Esperar un segundo antes de que comience la animación

setTimeout(function() {

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

animate(myRectangle, canvas, context, startTime);

}, 1000);

</script>

</body>