Я хотел бы анимировать свои датчики kendoUI в реальном времени при изменении данных. В настоящее время я могу сделать это, установив значения указателя датчика напрямую и обновив, но когда я это сделаю, он перейдет прямо к новому значению, а не будет изящно к нему анимироваться. Как добавить анимацию, как это делает элемент управления Gauge при первом запуске?

1
GodsCrimeScene 2 Май 2013 в 00:25

1 ответ

Лучший ответ

Обновлять его не нужно, просто установите новое значение с помощью value, он обновляется и анимируется.

Пример: определен HTML-код input, который я украшаю цифровым текстовым полем Kendo. Каждый раз, когда я обновляю значение, обновляются и радиальный, и линейный датчик.

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

3
animuson 30 Янв 2014 в 02:58
Это то, что ты искал?
 – 
OnaBai
4 Май 2013 в 02:57
Спасибо, OnaBai, я неправильно обновлял значение. Если бы я мог задать дополнительный вопрос. Что, если бы я хотел изменить цвет указателя, если он попадает в определенный диапазон без перерисовки элемента управления?
 – 
GodsCrimeScene
8 Май 2013 в 01:00
Мы говорим о радиальном или линейном датчике?
 – 
OnaBai
8 Май 2013 в 01:33
Единственный известный мне способ - это вызвать redraw. Я не знаю, что вы имеете в виду, когда перерисовываете элемент управления. Проверьте здесь jsfiddle.net/OnaBai/vnGNj/2 и попробуйте поиграть с другими значениями.
 – 
OnaBai
8 Май 2013 в 02:10