Javascript 在仪表图表中设置指针移动动画

Javascript 在仪表图表中设置指针移动动画,javascript,jquery,jquery-animate,Javascript,Jquery,Jquery Animate,我用这个解画了一个速度计。这是用Flot图表构建的。我正试图给针的运动设置动画。我想让针从头到尾慢慢移动 这是我到目前为止所拥有的 updatePlot = function(actual_length){ var data = [[0,0],positionOnArc(actual_length * 100)]; $('.gauge-div').delay( 8000 ).plot([data], options); } //The

我用这个解画了一个速度计。这是用Flot图表构建的。我正试图给针的运动设置动画。我想让针从头到尾慢慢移动

这是我到目前为止所拥有的

updatePlot = function(actual_length){

        var data = [[0,0],positionOnArc(actual_length * 100)];
        $('.gauge-div').delay( 8000 ).plot([data], options);
    
    }

    //The logic: devide one move into 25 moves and add a delay between each move

    var diff_length = Math.abs(prev_move_length - move_length) / 25;

    for(var i=0; i<25; i++) {
        
        if (prev_move_length < move_length) {
            var actual_length = prev_move_length + i * diff_length;
        } else {
            var actual_length = prev_move_length - i * diff_length;
        }
        
        setTimeout(updatePlot(actual_length), 1000);
    }
updatePlot=函数(实际长度){
var数据=[[0,0],位置Arc(实际长度*100)];
$('.gauge div')。延迟(8000)。绘图([数据],选项);
}
//逻辑:将一个移动划分为25个移动,并在每个移动之间添加延迟
var diff_length=Math.abs(上一个移动长度-移动长度)/25;

对于(var i=0;i有一种聪明的方法可以使用jqueryanimate(find),方法是传入我们自己的step函数,在本例中,该函数将移动指针

示例代码:

var updatePlot = function(pos) {        
    var data = [[0,0],positionOnArc(pos)];
    $('#placeholder').plot([data], options);
};

// starting position   
updatePlot(0);

$({foo:0})              // from 0 to
.delay(1000)            // (wait for it..)
.animate({foo:100}, {   // 100
    step: updatePlot,
    duration: 4300      // in 4.3 seconds
}).animate({foo:0}, {   // and back to 0
    step: updatePlot,
    duration: 1000      // in 1 second
});

小提琴手:

谢谢你,丽安。我现在就试试这个!