HTML Canvas Animation Spring
<!doctype html> <html> <head> <meta charset="utf-8"> </head>//from w w w .j a v a 2 s . c om <body> <canvas id="canvas" width="400" height="400"></canvas> <script> class Ball { constructor() { this.x = 0; this.y = 0; this.radius = 4; this.vx = 0; this.vy = 0; this.rotation = 0; this.scaleX = 1; this.scaleY = 1; this.color = 'blue'; this.lineWidth = 1; } draw(context) { context.save(); context.translate(this.x, this.y); context.rotate(this.rotation); context.scale(this.scaleX, this.scaleY); context.lineWidth = this.lineWidth; context.fillStyle = this.color; context.beginPath(); //x, y, radius, start_angle, end_angle, anti-clockwise context.arc(0, 0, this.radius, 0, Math.PI * 2, true); context.closePath(); context.fill(); if (this.lineWidth > 0) { context.stroke(); } context.restore(); } getBounds() { return { x: this.x - this.radius, y: this.y - this.radius, width: this.radius * 2, height: this.radius * 2 }; } } window.onload = function () { var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'), ball = new Ball(), spring = 0.03, targetX = canvas.width / 2, vx = 0; ball.y = canvas.height / 2; (function drawFrame () { window.requestAnimationFrame(drawFrame, canvas); context.clearRect(0, 0, canvas.width, canvas.height); var dx = targetX - ball.x, ax = dx * spring; vx += ax; ball.x += vx; ball.draw(context); }()); }; </script> </body> </html>