kendo-ui - 剑道 UI 仪表动画

Question

每当数据发生变化时，我想实时为我的 kendoUI 仪表设置动画。我目前可以通过直接设置仪表指针的值并刷新来做到这一点，但是当我这样做时，它会直接跳转到新值而不是优雅地为其设置动画。如何添加动画，就像 Gauge 控件在它第一次启动时所做的那样？

Answer 1

您不需要刷新它，只需使用设置新值value，它就会得到更新和动画。

示例：定义了一个input我用 Kendo 数字文本框装饰的 HTML。每次我更新值时，径向和线性仪表都会更新。

HTML 代码：

<div>
    <input id="gauge-value" value="65">
</div>
<div id="gauge-container">
    <div id="gaugeR"></div>
    <div id="gaugeL"></div>
</div>

JavaScript（仪表初始化）：

var gaugeR = $("#gaugeR").kendoRadialGauge({
    pointer: {
        value: value.value()
    },
    scale  : {
        minorUnit : 5,
        startAngle: -30,
        endAngle  : 210,
        max       : 180
    }
}).data("kendoRadialGauge");

var gaugeL = $("#gaugeL").kendoLinearGauge({
    pointer: {
        value: value.value(),
        shape: "arrow"
    },
    scale  : {
        majorUnit: 20,
        minorUnit: 5,
        max      : 180
    }
}).data("kendoLinearGauge");

并NumericTextBox使用更新事件处理程序gauges：

var value = $("#gauge-value").kendoNumericTextBox({
    min   : 0,
    max   : 180,
    change: function () {
        var v = $("#gauge-value").val();
        gaugeR.value(v);
        gaugeL.value(v);
    }
}).data("kendoNumericTextBox");

JSFiddle中的示例