Tutorial Canvas Animation: ease in 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 :: Uniformly accelerated 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="easein_motion" style="border: 1px solid;" >
	Your browser does not support Canvas. Update your browser to the latest version.
	</canvas>
</body>
</html>

Javascript

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

function checkForCanvasSupport() {
  return !!document.createElement('some_canvas').getContext;
  }
  
function easeInMotion1(){
  var canvas = jQuery('#easein_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 easing = .05;
  var ball_6 = new Ball(20,20,20,'#f16529','#000',7);
  var speedfactor = .5;
  var degrees = 15;
  var angle = degrees * Math.PI/ 180;
  var vx = Math.cos(angle) * speedfactor;
  var vy  = Math.sin(angle) * speedfactor;
  
  if (!checkForCanvasSupport) {
  return;
  }
  (function drawFrame() {
  
  window.requestAnimationFrame(drawFrame, canvas);
  context.clearRect(0,0, canvasWidth,canvasHeight);
  
  if (vx < 20 && vx > -20 ){
  vx = vx + ( vx*easing);
  vy = vy + ( vy*easing);
  }else{
  vx = vx;
  vy = vy;
  }
 if(ball_6.x - ball_6.radius< 0 || ball_6.x + ball_6.radius>parentWidth) 
  {
  vx=-vx;
  }
  if( ball_6.y - ball_6.radius< 0 || ball_6.y + ball_6.radius>288)
  { 
  vy=-vy;
  }
  ball_6.x += vx;
  ball_6.y += vy;
  ball_6.draw(context);
  }());
  //end drawFrame 
}
//end easeInMotion

Next tutorial

Leave a comment