使用jQuery / HTML5为圆圈设置动画
对于个人项目，我正在制作一个计时器应用程序（用于控制扑克盲人时间表）。 我知道市场上已经有几种解决方案，但由于原因太长而无法进入，我们需要一个定制的系统。 尽管最终用户最终可以定义系统的输出模板，但我们希望包含一个小部件，该小部件显示随着时间倒计时动画的圆圈。 这是一个工作示例的说明，显示了黄色圆圈以及我们想要实现的目标（或者类似的东西）：
我的问题是，如何使用jQuery或原始HTML5 / CSS3动画编码动画如下所示？ 这是使用jQuery的Web应用程序，因此我没有其他库选项可供使用。
高级谢谢！
如果你可以使用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); 你可以用CSS3和jQuery实现这一点。
看看我的例子http://blakek.us/css3-pie-graph-timer-with-jquery/稍作修改就可以让计时器看起来如你所愿。
在HTML5中，您可以在canvas中绘图。 例如：
// 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();
链接
你应该看看加工 ！
特别是Processing.js 。 用iPhone制作了一些有趣的东西
我能想到的第一个解决方案是html5 canvas实现。 从上面的例子可以清楚地看到我们正在谈论移动，所以canvas在移动浏览器中得到了什么支持我无法分辨。 developer.mozilla.org提供了足够的文档 。 使用canvas来实现这样的倒计时应该是非常简单的任务。 祝好运。
HTML5 Canvas arc命令（MDN）可能就是你要找的东西。 只需减小结束角度即可减少计时器。