仪表盘中的动画针运动
Animate needle movement in Gauge chart
我正在使用解决方案 here 绘制速度计。这是用 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);
}
如您所见,我正在尝试使用 setTimeout
和 delay
延迟循环迭代。但是我无法为针的运动设置动画。
你能帮我解决这个问题吗?
提前致谢。
有一种使用 jquery animate(发现 here)的巧妙方法,方法是传入我们自己的步进函数,在这种情况下会移动指针。
示例代码:
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
});
Fiddle: http://jsfiddle.net/YGcYJ/217/
我正在使用解决方案 here 绘制速度计。这是用 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);
}
如您所见,我正在尝试使用 setTimeout
和 delay
延迟循环迭代。但是我无法为针的运动设置动画。
你能帮我解决这个问题吗?
提前致谢。
有一种使用 jquery animate(发现 here)的巧妙方法,方法是传入我们自己的步进函数,在这种情况下会移动指针。
示例代码:
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
});
Fiddle: http://jsfiddle.net/YGcYJ/217/