使用jQuery/HTML5动画圆形

Question

我正在尝试制作一个计时器应用程序（用于控制扑克盲注表），这是一个个人项目。我知道市场上已经有几个解决方案了，但由于种种原因，在这里不便详述，我们需要一个定制的系统。虽然系统的输出模板最终将由最终用户定义，但我们希望包括一个小部件，显示一个圆圈，在时间倒数时得到动画效果。以下是一个工作示例的插图，显示黄色圆圈和我们想要实现的效果（或类似的东西）：

我的问题是，如何使用jQuery或原始的HTML5 / CSS3动画来编写下面所示的动画？这是一个使用jQuery的Web应用程序，因此我不能使用其他库选项。

提前感谢！

- BenM

Answer 1

如果您能使用HTML5，canvas可能是最好的选择。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);

- scurker

---

谢谢，这是一个很好的开端！ - BenM

Answer 2

你可以通过使用CSS3和jQuery来实现这一点。

在这里查看我的示例 http://blakek.us/css3-pie-graph-timer-with-jquery/，稍微修改一下就可以使计时器的外观符合你的要求。

- Kus

---

你用Jquery制作的饼图计时器正是我为一个项目所寻找的，非常感谢你的分享！ - Ila

太好了！Kus，这个项目真是太棒了！我们将会大量使用它。但愿我有更多的积分来支持它。 - AbigailW

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

链接

- Icebob

Answer 4

你真的应该看看Processing！

特别是Processing.js。有一些有趣的事情用它为iPhone制作。

- Baldur

Answer 5

我能想到的第一个解决方案是使用HTML5画布实现。从上面的例子可以清楚地看出我们正在谈论移动设备，那么画布在移动浏览器中的支持情况我无法确定。developer.mozilla.org提供了充足的文档支持。使用画布来实现这样的倒计时应该是一个相当简单的任务。祝你好运。

- Z. Zlatev

Answer 6

HTML5 Canvas的arc命令(MDN)可能是您正在寻找的。只需随着时间减少结束角度，即可使计时器减少。

- ballpointcarrot