使用jQuery/HTML5为圆圈设置动画

Question

对于个人项目,我正在制作一个计时器应用程序(用于控制扑克盲人时间表).我知道市场上已经有几种解决方案,但由于原因太长而无法进入,我们需要一个定制的系统.尽管最终用户最终可以定义系统的输出模板,但我们希望包含一个小部件,该小部件显示一个随着时间倒计时动画的圆圈.这是一个工作示例的图示,显示了黄色圆圈以及我们想要实现的目标(或者类似的东西):

我的问题是,如何使用jQuery或原始HTML5/CSS3动画编码动画如下所示？这是使用jQuery的Web应用程序,因此我没有其他库选项可供使用.

高级谢谢!

Answer 1

如果您可以使用 HTML5，canvas 可能是您最好的选择。Mozilla 有一些关于绘制弧线的不错的教程。这应该足以让您开始。

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);