Tutorial Canvas Animation: ease out motion

Your browser does not support Canvas. Update your browser to the latest version.

HTML code for this animation:

<!doctype html>
<html>
<head>
	<title>Canvas :: The uniform slow motion</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script src="js/service.js"></script>
	<script src="js/ball.js"></script>
	<script src="js/functions.js"></script>
</head>
<body> 
	<canvas id="easeout_motion" style="border: 1px solid;" width="636" height="288">
	Your browser does not support Canvas. Update your browser to the latest version.
	</canvas>
</body>
</html>

Javascript

$(document).ready(function() {
	easeOutMotion1();
});

function checkForCanvasSupport() {
  return !!document.createElement('some_canvas').getContext;
  }
  
function easeOutMotion1(){
var canvas = jQuery('#easeout_motion');
var context = canvas.get(0).getContext('2d');
//Make the Canvas element responsive for desktop, tablet and smartphone.
var parentWidth=jQuery(canvas).parent().width();
var canvasWidth = context.canvas.width  = parentWidth;
var canvasHeight = context.canvas.height  = 288;
var ball_5 = new Ball(-10,-10,20,'#f16529','#000',7);
//Coordinates of point ball moves towards = (targetX,targetY)
var targetX;
var targetY;
//if easing< 0 -->delay
//if easing> 0 -->acceleration
//var easing = 0.01;
var easing =0.01;

if (!checkForCanvasSupport) {
return;
}
(function drawFrame() {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0,0, canvasWidth,canvasHeight);

//Determine x and Y coordinates of the end point
targetX=canvasWidth-ball_5.radius-30;
targetY=canvasHeight-ball_5.radius-30;
//Determine the horizontal and vertical distance between start and end point
//Horizontal distance
dx=targetX-ball_5.x;
//Vertical distance
dy=targetY-ball_5.y;

//Determine the horizontal and vertical velocity between the beginning and end
// vx=horizontal velocity
vx = dx * easing;
// vy=vertical velocity
vy = dy * easing;

//Horizontal and vertical position
//Horizontal position
ball_5.x+=vx;
//Vertical position
ball_5.y+=vy;

ball_5.draw(context);
}());//end drawFrame 
}//end easeOutMotion1

Next tutorial

Leave a comment