使用css3制作半圆规的动画

Question

我目前正在制作仪表板的仪表系统，并且发现css动画是性能的最佳方式。

仪表是半圆，允许进入整个半圆。因此，仪表系统由两个

组成

我当前的方法使用圆形的边框半径，同时使用包装div剪切和隐藏。

以下是我目前的镜头：http://codepen.io/kamante/pen/eIdwC

将useMax变量设置为false会使测量仪具有随机值动画

问题在于我希望测量仪在-90度的圆圈处达到最大（半圆），但现在我将它设置为-88deg进行伪装。

我必须承认，我真的不明白为什么我需要分解

任何人都有制作半圆规的解决方案，或者可以帮我指出正确的方向吗？

更新

使用css过渡，使用两个使用随机值设置动画的量表，查看http://codepen.io/kamante/pen/eIdwC的工作解决方案。

使用变量gauwidth（borderSize）和radius的变量。

我真的认为使用css动画构建库是有原因的，如果我有时间的话，我很想自己构建它。

从我的角度来看，那里唯一好的指标是

justgage.com和bernii.github.io/gauge.js

但是他们中的任何一个都没有在我的nexus 5上表现得很好。

无论如何，希望这有助于其他人。

Answer 1

我找到了一个我喜欢在需要时使用的插件。你可以在http://anthonyterrien.com/knob/

看到它

基于画布;没有png或jpg精灵。触摸，鼠标和鼠标滚轮，实现键盘事件。向下兼容;重载输入元素。

Answer 2

你在微积分中有一个小错误

.gauge2 .box {
    border: 18px solid #0000ff;
    width: 150px;
    height: 150px;
    clip: rect(0, 225px, 90px, 0px);
}

如果计算框的最终尺寸，则宽度= 150px + border = 18px + border = 18px = 186px。

所以，如果你想要半圈，你必须剪辑为186px / 2 = 93px。但是你在90 px时剪裁。

所以，你必须设置

    clip: rect(0, 225px, 93px, 0px);