使用 jQuery / HTML5 为圆形制作动画答案

【问题标题】：Using jQuery / HTML5 to animate a circle使用 jQuery / HTML5 为圆形制作动画
【发布时间】：2011-08-10 23:26:49
【问题描述】：

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

我的问题是，如何使用 jQuery 或原始 HTML5/CSS3 动画对动画进行编码，如下所示？这是针对使用 jQuery 的 Web 应用程序，因此我无法使用其他库选项。

高级感谢！

【问题讨论】：

标签： javascript jquery html animation css

【解决方案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);

【讨论】：

谢谢，这是一个很好的开始！

【解决方案2】：

您可以使用 CSS3 和 jQuery 实现这一点。

在这里查看我的示例http://blakek.us/css3-pie-graph-timer-with-jquery/，稍作修改，您就可以使计时器看起来像您想要的那样。

【讨论】：

您使用 Jquery 的饼图计时器正是我正在寻找的项目，非常感谢您的分享！
确实！优秀的项目，库斯！会从中得到很多用处。希望我有更多的积分来修改这个。

【解决方案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

【讨论】：

【解决方案4】：

你真的应该看看Processing！

尤其是Processing.js。已经有一些interesting things 用它为 iPhone 制作了

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

【讨论】：