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

Question

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

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

高级谢谢！

Answer 1

如果你可以使用HTML5，画布可能是你最好的选择。 Mozilla在绘制弧上有一些不错的tutorials。这应该足以让你入门。

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

您可以使用CSS3和jQuery实现此目的。

在这里查看我的示例http://blakek.us/css3-pie-graph-timer-with-jquery/，稍加修改即可让计时器看起来如你所愿。

Answer 3

在HTML5中，您可以在画布中绘图。 例如：

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

你应该看看Processing！

特别是Processing.js。用iPhone制作了一些interesting things

Answer 5

我能想到的第一个解决方案是html5 canvas实施。从上面的例子可以清楚地看到我们正在谈论移动，所以画布在移动浏览器中得到了什么支持我无法分辨。 developer.mozilla.org提供sufficient documentation。使用canvas来实现这样的倒计时应该是非常简单的任务。祝你好运。

Answer 6

HTML5 Canvas arc命令(MDN)可能就是你要找的东西。只需减少结束角度即可使计时器减少。