为什么我的算法降低元件的高度不正常
问题描述:
我正在写一些软件读取来自PSI泵的压力。在前端,我想增加一个功能,当球体的压力上升到要测量的数值时球体会上升,当测试结束后,我希望相同的球体根据当前PSI下降到其起始位置值,这将看起来像一个视觉安全队列,这样操作员在压力仍然高的时候不会拔下阀门。为什么我的算法降低元件的高度不正常
我的上升算法完美地工作,随着压力的增加,球会上升一定的百分比,我通过计算球的起始位置并找到它从终点位置的偏移并找到期望的PSI值以及每次将新值传递给函数时的当前PSI值。
此图片应该有希望描述球是如何上升:
现在,你会认为运行这段代码反向这将是倒车算法简单,但是我已经试过了但即使PSI仍在8000左右,球也会下降到起始位置。
这里是我的depressure算法:
function depressure(value)
{
// Keep descending ball until it reaches 50, this is considered safe to remove the valve
if(value > 50)
{
// Calculate the depressure percentage
var offset = parseInt($("#golfBall").css('margin-top'));
var percent = value/HIGHEST_VAL * 100; // The highest recorded PSI for this test
// I compute the new height here, it returns values like 95% as
// I'd expect, but the ball still descends far too quickly
var newHeight = offset/100 * percent;
console.log("The new height is: " + newHeight)
console.log("Current % of pressure is: " + percent + ". Current height is: " + newHeight + "px");
$("#golfBall").animate({
marginTop: newHeight + "px"
}, 1, function(){
});
}
else
{
showResult();
}
};
什么我错在这里做的,这种方法被称为每秒10次,所以我猜这个值可能迅速贬值,但为什么我的上升法的工作?
崛起算法:
function rise()
{
if(HIGHEST_VAL > 200) {
// Difference between the destination element and golfBalls starting position
var offset = = $("#golfBall").offset().top - $("#progress .circleContainer").first().offset().top;
// Calculate the height for the ball to rise by - this is done by finding the percentage
// and then checking if that value is greater than the max progress, if so we then compute
// how many pixels we want to rise by
var percentage = (HIGHEST_VAL/TEST_VALUE) * 100;
if(percentage > CURR_PROGRESS)
{
CURR_PROGRESS = percentage;
totalHeight = (offset/100) * CURR_PROGRESS;
if (totalHeight >= labelOffset)
$("#message").animate({ opacity: 0 });
}
// track the total height that has been computed - we don't want to exceed the offset
if (totalHeight > offset)
totalHeight = offset;
// Make the ball rise.
$("#golfBall").animate({
marginTop: -totalHeight + "px"
}, 1, function(){
if(CURR_PROGRESS >= 100)
testPressure();
});
}
};
任何建议,将不胜感激
答
,我的算法是行不通的,因为每次我depressure()
方法被调用,我计算基于百分比的原因球电流从顶部偏移。这导致每次调用该方法时该值急剧下降。
为了解决这个我添加了一个全球TOP_POSITION_SET
然后每次计算的偏移百分比基于初始位置从顶部设置:
function depressure(value)
{
$("#message p").html("RELEASE PRESSURE");
console.log("DEPRESSURING")
// Get the amount to de-pressure the height by
if(value > 100)
{
// Set the initial top position
if(!TOP_POSITION_SET)
{
topPosition = parseInt($("#golfBall").css('margin-top'));
TOP_POSITION_SET = true
}
var percent = value/HIGHEST_VAL * 100;
console.log("Current percentage is: " + percent)
var newHeight = topPosition/100 * percent;
console.log("Current offset from top is: " + newHeight)
if(newHeight < oldHeight)
{
console.log("Current % of pressure is: " + percent + ". Current height is: " + newHeight + "px");
$("#golfBall").animate({
marginTop: newHeight + "px"
}, 100)
}
oldHeight = newHeight
}
else
{
showResult();
}
};
感谢所有的帮助
创建演示用足够的基本CSS来复制这个 – charlietfl