Uso de jQuery/HTML5 para animar un círculo

Question

Para un proyecto personal, estoy a punto de hacer una aplicación de temporizador (para controlar los horarios de ciegas de Poker). Sé que ya hay varias soluciones en el mercado, pero por razones que son demasiado largas para entrar aquí, necesitamos un sistema a medida. Aunque la plantilla de salida del sistema finalmente será definible por el usuario final, nos gustaría incluir un widget que muestre un círculo que se anima cuando el tiempo cuenta atrás. He aquí una ilustración de un ejemplo de trabajo, mostrando el círculo amarillo y lo que nos gustaría lograr (o algo similar, de todos modos):

Mi pregunta es, ¿cómo sería un código de la animación como se muestra a continuación utilizando jQuery o animaciones en bruto HTML5/CSS3? Esto es para una aplicación web que utiliza jQuery, por lo que no hay otras opciones de biblioteca que pueda usar.

¡Gracias avanzada!

Answer 1

Si puede usar HTML5, el lienzo es probablemente su mejor opción. Mozilla tiene algunos decentes tutorials en dibujar arcos. Esto debería ser suficiente para comenzar.

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

La primera solución que puedo pensar es la implementación html5 canvas. En el ejemplo anterior, se hace evidente que estamos hablando de dispositivos móviles, por lo que no puedo saber qué soporte ofrece Canvas a los navegadores móviles. developer.mozilla.org proporciona sufficient documentation. El uso del lienzo para lograr dicha cuenta regresiva debe ser una tarea bastante simple. Buena suerte.

Answer 3

En HTML5 puede dibujar en un lienzo. Por ejemplo:

// 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

Canvas de HTML5 orden arc (MDN) es probablemente lo que usted está buscando. Simplemente disminuya el ángulo final con el tiempo para que disminuya su temporizador.

Answer 5

Puede lograr esto con CSS3 y jQuery.

Eche un vistazo a mi ejemplo aquí http://blakek.us/css3-pie-graph-timer-with-jquery/ que con pequeñas modificaciones podría hacer que el temporizador se vea como usted lo desee.

Answer 6

Realmente debería ver Processing!

Especialmente Processing.js. Ha habido algunos interesting things hechos con él para el iPhone