Using jQuery / HTML5 to animate a circle

Question

For a personal project, I use tyring to make a timer application (for managing poker secrets). I know that there are already several solutions on the market, but for reasons that are too long to go here, we need an individual system. Although the output pattern of the system will ultimately be determined by the end user, we would like to include a widget that shows a circle that animates when time is counted. Here is a working example illustration showing a yellow circle and what we would like to achieve (or something similar anyway):

My question is: how would I encode the animation as shown below using jQuery or raw HTML5 / CSS3 animations? This is for a web application using jQuery, so there are no other library options that I can use.

Thanks!

Answer 1

If you can use HTML5, the canvas is probably your best bet. Mozilla has some decent arc drawing guides . That should be enough to get you started.

var canvas = document.getElementById('canvasid'), width = canvas.width, height = canvas.height, ctx = canvas.getContext('2d'); function drawTimer(deg) { var x = width / 2, // center x y = height / 2, // center y radius = 100, startAngle = 0, endAngle = deg * (Math.PI/180), counterClockwise = true; ctx.clearRect(0, 0, height, width); ctx.save(); ctx.fillStyle = '#fe6'; // Set circle orientation ctx.translate(x, y); ctx.rotate(-90 * Math.PI/180); ctx.beginPath(); ctx.arc(0, 0, radius, startAngle, endAngle, counterClockwise); ctx.lineTo(0, 0); ctx.fill(); } setInterval(function() { // Determine the amount of time elapsed; converted to degrees var deg = (elapsedTime / totalTime) * 360; drawTimer(deg); }, 1000); 

Answer 2

You can achieve this with CSS3 and jQuery.

Check out my example here http://blakek.us/css3-pie-graph-timer-with-jquery/ , which with a few changes will make the timer look the way you want.

Answer 3

In HTML5, you can draw on canvas. For instance:

 // Create the yellow face context.strokeStyle = "#000000"; context.fillStyle = "#FFFF00"; context.beginPath(); context.arc(100,100,50,0,Math.PI*2,true); context.closePath(); context.stroke(); context.fill(); 

Link

Answer 4

You really have to check Processing !

Especially Processing.js . There were some interesting things done with it for the iPhone.

Answer 5

The first solution I can think of is html5 canvas . From the above example, it becomes clear that we are talking on a mobile phone, so what kind of support does canvas around mobile browsers, I can not say. developer.mozilla.org provides ample documentation . Using a canvas to achieve such a countdown should be a fairly simple task. Good luck.

Answer 6

HTML5 Canvas arc command (MDN) is probably what you are looking for. Just decrease the angle of rotation over time to reduce your timer.