Skip to content

Instantly share code, notes, and snippets.

@abernier
Created July 18, 2012 14:52
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save abernier/3136666 to your computer and use it in GitHub Desktop.
Save abernier/3136666 to your computer and use it in GitHub Desktop.
animation frame
canvas {border:1px solid;}​
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Antoine BERNIER (abernier)</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<form>
<p>
<label for="duration">Duration</label>
<input id="duration" type="range" min="100" max="10000" value="1000">
</p>
<p>
<button id="start">Play</button>
<button id="stop">Stop</button>
</p>
</form>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="index.js"></script>
<body>
(function () {
var animation = (function () {
//
// Our animation module
//
var canvas, ctx, size,
animating;
window.requestAnimFrame = (function (){
//
// requestAnim shim layer by Paul Irish
//
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
//
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function */ callback, /* DOMElement */ element) {
window.setTimeout(callback, 1000 / 60);
};
}());
window.cancelRequestAnimFrame = (function () {
//
// cancelRequestAnim shim layer by Jerome Etienne
//
// http://notes.jetienne.com/2011/05/18/cancelRequestAnimFrame-for-paul-irish-requestAnimFrame.html
//
return window.cancelAnimationFrame ||
window.webkitCancelRequestAnimationFrame ||
window.mozCancelRequestAnimationFrame ||
window.oCancelRequestAnimationFrame ||
window.msCancelRequestAnimationFrame ||
clearTimeout
}());
function init(options) {
size = options.size || 256;
canvas = document.createElement('canvas');
canvas.width = canvas.height = size;
ctx = canvas.getContext('2d');
$('body').prepend(canvas);
draw(0);
return this;
}
function play(duration) {
var start = (new Date).getTime(),
finish = start + duration;
if (animating) {
//
// Ensure the animation is not already being performed
//
return;
}
console && console.log("[%s] Let's animate while %sms!", start, duration);
/*
Old fashion way
-----------------
animating = setInterval(function () {
var time = (new Date).getTime(),
pos = time > finish ? 1 : (time - start) / duration; // [0, 1]
pos = ease(pos);
draw(pos);
if (time > finish) {
console && console.log("[%s] That was fun!", finish);
stop();
}
}, 10);*/
(function animloop(time) {
var pos = time > finish ? 1 : (time - start) / duration; // [0, 1]
pos = ease(pos);
draw(pos);
animating = requestAnimFrame(animloop);
if (time > finish) {
console && console.log("[%s] That was fun!", finish);
stop();
}
}(start)); // Notice the start argument as first time value
}
function stop() {
//clearInterval(animating);
cancelRequestAnimFrame(animating);
animating = null;
draw(0);
}
function ease(pos) {
//
// Easing ('bounce' here for example)
//
// Notice easing just deal with <pos>
//
if (pos < (1 / 2.75)) {
return (7.5625 * pos * pos);
} else if (pos < (2 / 2.75)) {
return (7.5625 * (pos -= (1.5 / 2.75)) * pos + .75);
} else if (pos < (2.5 / 2.75)) {
return (7.5625 * (pos -= (2.25 / 2.75)) * pos + .9375);
} else {
return (7.5625 * (pos -=(2.625 / 2.75)) * pos + .984375);
}
}
function draw(pos) {
//
// Draw a red dot along a <r> radius circle
//
// The function takes a position [0, 1] to
// determine the dot position along the circle
//
var a = 10,
r = size / 2 - a,
teta = 2 * Math.PI * pos, // 2π * [0, 1] = [0, 2π]
x = r * Math.cos(teta) + size / 2,
y = r * Math.sin(teta) + size / 2;
console && console.log(x, y);
// Clean the board
ctx.clearRect(0, 0, size, size);
// Take your pencil and draw the shape (a red circle)
ctx.fillStyle = 'rgb(255, 0, 0)';
ctx.beginPath();
ctx.arc(x, y, a, 0, 2 * Math.PI, true);
ctx.closePath();
ctx.fill();
}
// Public API
return {
init: init,
play: play,
stop: stop
};
}()).init({
size: 100
});
(function () {
//
// Bind some module's actions on controls
//
$('#start').click(function (event) {
event.preventDefault();
animation.play(+$('#duration').val());
});
$('#stop').click(function (event) {
event.preventDefault();
animation.stop();
});
}());
}());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment