javascript 使用 jQuery / HTML5 制作圆形动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5755765/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using jQuery / HTML5 to animate a circle
提问by BenM
For a personal project, I'm tyring to make a timer application (for controlling Poker blind schedules). I know there are several solutions already on the market, but for reasons which are too lengthy to go into here, we need a bespoke system. Although the output template of the system will ultimately be definable by the end user, we would like to include a widget which shows a circle that gets animated as the time counts down. Here's an illustration of a working example, showing the yellow circle and what we'd like to achieve (or something similar, anyway):
对于个人项目，我正在制作一个计时器应用程序（用于控制扑克盲人时间表）。我知道市场上已经有几种解决方案，但由于篇幅太长无法在这里介绍的原因，我们需要一个定制的系统。虽然系统的输出模板最终将由最终用户定义，但我们希望包含一个小部件，该小部件显示一个随着时间倒计时而动画化的圆圈。这是一个工作示例的说明，显示了黄色圆圈以及我们想要实现的目标（或类似的东西，无论如何）：
My question is, how would one code the animation as shown below using either jQuery or raw HTML5 / CSS3 animations? This is for a web application using jQuery, so there are no other library options I can use.
我的问题是，如何使用 jQuery 或原始 HTML5/CSS3 动画对如下所示的动画进行编码？这是针对使用 jQuery 的 Web 应用程序，因此我无法使用其他库选项。
Advanced thanks!
高级谢谢！
采纳答案by scurker
If you can use HTML5, canvas is probably your best bet. Mozilla has some decent tutorialson drawing arcs. This should be enough to get you started.
如果您可以使用 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);
回答by Kus
You can achieve this with CSS3 and jQuery.
您可以使用 CSS3 和 jQuery 来实现这一点。
Check out my example here http://blakek.us/css3-pie-graph-timer-with-jquery/which with slight modification you could make the timer look how you want it.
在此处查看我的示例http://blakek.us/css3-pie-graph-timer-with-jquery/稍加修改，您就可以使计时器看起来像您想要的那样。
回答by Baldur
You should really check out Processing!
你真的应该看看Processing！
Especially Processing.js. There have been some interesting thingsmade with it for iPhone
特别是Processing.js。用它为 iPhone 做了一些有趣的事情
回答by Icebob
回答by ballpointcarrot
回答by Z. Zlatev
First solution i can think of is html5 canvasimplementation. From the example above it becomes clear we're talking mobile, so what support does canvas get around mobile browsers i can't tell. developer.mozilla.org provides sufficient documentation. Using canvas to achieve such count down should be pretty simple task. Good luck.
我能想到的第一个解决方案是html5 canvas实现。从上面的例子可以清楚地看出我们在谈论移动，所以我不知道画布对移动浏览器有什么支持。developer.mozilla.org 提供了足够的文档。使用画布来实现这样的倒计时应该是非常简单的任务。祝你好运。
