Tutorial Canvas Animation: the uniform linear motion

A uniform linear motion is a movement in a straight line at constant speed. The direction of movement can be in the x-direction (horizontal), the y-direction (vertical), or in both directions.

Check this example in your browser

De HTML5 code voor deze animatie:

<!doctype html>
<html>
<head>
    <title>Uniform linear motion</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="js/functions.js"></script>
</head>
<script>
    jQuery(document).ready(function(){
    circulairMotion1();
    });	>
</script>
<body>	
	<canvas id="lineair_motion1" style="border: 1px solid;"></canvas>
</body>
</html>

De Javascript code in functions.js:

/**
* Normalize the browser animation API for all applications. 
* This asks the browser make a a schedule for redrawing an initial situation 
* of the screen for the next animation frame .
* Checks for cross-browser support, and, if not present,
* defines a fallback to the clearTimeout function. * @param {function} callback. Function to call when it's time to update * the animation for the next redesign. * @param {HTMLElement} element Optional parameter that specifies the * element which defines the entire animation. * @return {number} Animation frame request. */ if (!window.requestAnimationFrame) { window.requestAnimationFrame = (window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function (callback) { return window.setTimeout(callback, 17 /*~ 1000/60*/); }); } /** * Cancels a request for an animation frame. * Checks for cross-browser support, with a fallback to the clearTimeout function * @param {number} Animation frame request. */ if (!window.cancelRequestAnimationFrame) { window.cancelRequestAnimationFrame = (window.cancelAnimationFrame || window.webkitCancelRequestAnimationFrame || window.mozCancelRequestAnimationFrame || window.msCancelRequestAnimationFrame || window.oCancelRequestAnimationFrame || window.clearTimeout); } function lineairMotion1(); var canvas = jQuery("#lineair_motion1"); 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; //Bepaal de beginpositie van de bal var x=30; var y=30; var radius=20; //Determine the velocity //vertical velocity; var dx=5; //vertical velocity var dy=5; if (!checkForCanvasSupport) { return; } (function drawFrame () { window.requestAnimationFrame(drawFrame, canvas); context.clearRect(0,0,parentWidth,288); context.beginPath(); context.fillStyle="#f16529"; context.lineWidth=7; context.strokeStyle="black"; // Draw a circle with radius 20 and coordinates (100,200) on the canvas context.arc(x,y,radius,0,Math.PI*2,true); context.closePath(); context.fill(); context.stroke(); if( x < radius || x>parentWidth-radius) { dx=-dx; } if( y < radius || y>288-radius) { dy=-dy; } x+=dx; y+=dy; }());//end drawFrame }//end lineairMotion1
For only a horizontal movement we set dy to 0
For only a vertical movement we set dx to 0;

Next tutorial

Leave a comment