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>
<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 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>
La famosa saga Cut the rope hace uso de animaciones oscilantes con aceleración.
