css - 使用 css3 动画半圆规

Question

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

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

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

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

将 useMax 变量设置为 false 使仪表以随机值动画

问题是我希望仪表在 -90 度圆处达到最大值(半圆)，但现在我将其设置为 -88 度以假装它。

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

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

更新:

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

摆弄变量以改变 gaugewidth (borderSize) 和 radius。

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

从我的 Angular 来看，唯一好的仪表是

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

但它们在我的 nexus 5 上都表现不佳。

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

Answer 1

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

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