3

我目前正在为仪表板开发仪表系统，并发现 css 动画是提高性能的最佳方式。

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

我目前的方法使用圆的边界半径，同时使用包装器 div 进行剪切和隐藏。

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

将 useMax 变量设置为 false 会使仪表以随机值进行动画处理

问题是我希望仪表在-90度圆处达到最大（半圆），但现在我将它设置为-88度来伪造它。

我必须承认我真的不明白为什么我需要考虑

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

更新：

请参阅http://codepen.io/kamante/pen/eIdwC了解使用两个带有随机值动画的仪表的工作解决方案，使用 css 转换。

摆弄改变gaugewidth（borderSize）和半径的变量。

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

从我的角度来看，唯一好的衡量标准是

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

但它们都没有真正在我的nexus 5上表现良好。

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

4

2 回答 2

2

我找到了一个我喜欢在需要完成此操作时使用的插件。你可以在这里看到它http://anthonyterrien.com/knob/

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

于 2014-03-31T16:18:39.397 回答
1

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

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

如果计算盒子的最终尺寸，就是宽度=150px + 边框=18px + 边框=18px = 186px。

所以，如果你想得到半个圆，你必须在 186px / 2 = 93px 处进行剪辑。但是你剪裁为 90 像素。

所以，你必须设置

    clip: rect(0, 225px, 93px, 0px);
于 2014-03-31T17:20:37.043 回答