使用HTML，CSS或javascript的动画循环倒数计时器

我想创建一个分为4个部分的圆，然后将每个部分细分为多个部分。每个季度都会有不同的背景颜色（或背景图像）。

圆圈将作为倒数计时器，每个片段将持续大约5秒钟（请参阅附加图像了解我在寻找什么）。定时器只有在发出javascript命令时才会启动（它也应该可以暂停和倒回定时器）。使用HTML，CSS或javascript的动画循环倒数计时器

enter image description here

在段之间的过渡区不必须是平滑的动画（即，转变到段可以简单地涉及先前的段的背景颜色变为白色）

有几个注意事项：
- 该数目在每个象限段可以改变，所以每个段的尺寸必须灵活
- 该顺序象限中可以改变（即instea d）蓝色，橙色，红色，绿色...我们可以有橙色，红色，紫色等等）
- 它必须在iPhone和现有的Android手机上工作（我在看Raphael和SVG，似乎不支持在Android上。）

我对如何最好地解决这个问题感到茫然，所以将不胜感激听到建议，甚至看到的例子（虽然我还没有能够源任何）

来源

2011-11-15 Peter

我认为实现你想要的结果的最好方法是使用一个元素并通过使用javascript对其进行绘制，或者使用动画图像以及静态图像和一些JS在这两种类型之间切换。

来源

2011-11-15 13:06:36 AlQafir

可能。这太糟糕了，有没有类似的东西可以启动我:)（我可以找到我最想做的事是http://m.brujula.net/util/abstracttimer/） – Peter

@Peter使用画布元素，三角形和一些基本的三角函数来获得类似的东西并不难。在学习用三角形学习之后，你可以用弧线挑战自己，并且完成工作。详情请参阅[HTML5 Canvas]（http://dev.w3.org/html5/2dcontext/）规格.. – AlQafir

方便的网页...将查看此内容。 – Peter

-1

你见过Raphaël JS？它非常适合图形。我不确定具体情况，但这应该让你开始。

来源

2011-11-15 12:59:41

是的，正如我刚才提到的那样，我在看拉斐尔和SVG，但他们似乎并没有在Android中工作 – Peter

使用HTML，CSS或javascript的动画循环倒数计时器

回答

相关问题