まず、前の均一な動きのコードを見てみましょう。速度を変更した後、どのようなバグが発生します。テスト用の2つのベンチマークを次に示します
コードコピーは次のとおりです。
<style type = "text/css">
#div1 {
幅:100px;
高さ:100px;
位置:絶対;
背景:赤;
トップ:50px;
左:600px;
}
#div2 {
幅:1px;
高さ:300px;
位置:絶対;
左:300px;
上:0;
背景:黒;
}
#div3 {
幅:1px;
高さ:300px;
位置:絶対;
左:100px;
上:0;
背景:黒;
}
</style>
<script type = "text/javascript">
var time = null;
function startmove(itarget){
var odiv = document.getElementById( "div1");
ClearInterval(時間);
time = setInterval(function(){
var速度= 0;
if(odiv.offsetLeft <itarget){
速度= 7;
} それ以外 {
速度= -7;
}
//実際、この状況に問題があります
odiv.style.left = odiv.offsetLeft + speed + 'px';
}、30)
}
</script>
</head>
<body>
<入力型= "button" id = "btn" value = "to 100" onclick = "startmove(100)" />
<入力型= "button" id = "btn" value = "to 300" onclick = "startmove(300)" />
<div id = "div1">
</div>
<div id = "div2">
</div>
<div id = "div3">
</div>
</body>
実際、そのようなコードが速度を7のような奇数数に変更し、ターゲットポイントに到達する場合、それは整数であり、ターゲットポイントに到達できないか、ターゲットポイントを超えるバグを引き起こします。
では、なぜこれが起こるのですか?
実際、ターゲットポイントに到達すると、ターゲットポイントに正確に到達することはできません。ターゲットポイントが100の場合、この時点で毎回7つの歩行の場合、彼はターゲットポイントを通過するか失敗します。
ターゲットポイントに到達しないでください。実際、それは以前のバッファリングを助けるのに少し似ています。
では、ターゲットポイントに到達したことをどのように計算しますか?
たとえば、タクシーを特定の場所に連れて行くと、運転手は間違いなく10メートルと20メートル離れて停止します。車にその場所に貼り付けて停止するように頼むことは不可能です。
したがって、実際、プログラムは同じです。オブジェクトとターゲットポイントの間の距離がある程度近い限り、近づく必要はなく、到達したと思います。
変更されたコードを見てみましょう:
コードコピーは次のとおりです。
<script type = "text/javascript">
var time = null;
function startmove(itarget){
var odiv = document.getElementById( "div1");
ClearInterval(時間);
time = setInterval(function(){
var速度= 0;
if(odiv.offsetLeft <itarget){
速度= 7;
} それ以外 {
速度= -7;
}
if(math.abs(itarget -odiv.offsetLeft)<= 7){
ClearInterval(時間);
odiv.style.left = itarget+'px';
} それ以外 {
odiv.style.left = odiv.offsetLeft + speed + 'px';
}
}、30)
}
</script>
説明させてください:なぜここで絶対値を取得するためにMath.absを使用する必要があるのですか?
速度が正または負になる可能性があるため、理由は単純です。
次に、ターゲットとオブジェクトの間の距離を7と同じくらい小さくし、それからそこにあります。なぜ7?彼は次回は7回未満のエクササイズを持っているからです。この時点で、ターゲットポイントに到達しました。
今、問題は再び来ており、彼はこのように書面でターゲットポイントで正確に停止しませんでした。そこで、簡単な文を追加し、左の左にターゲットポイントを直接等しくしました。 odiv.style.left = itarget+'px';
実際、前回は7人未満でしたが、プログラムが速すぎて人間の目がそれを見ることができないことを誰もが知っています。暖かい笑顔
現時点では問題はありません。まばたき
これは、均一な動きの停止条件です。それから友人は、なぜバッファリングエクササイズがそれほど面倒ではないのですか?
彼の速度は変化し、それが小さくなり、最後まで彼は1に達するまで、そして段階的に前進するとき、間違いなくそのような問題はありません。