Javascriptの等速運動の停止条件について簡単に解説

まず、以前の等速モーションのコードを見て、速度を変更した後にどのようなバグが発生するかを見てみましょう。テスト用に 2 つのベンチマークがここに追加されます

コードをコピーコードは次のとおりです:

        <スクリプトタイプ="text/javascript">
            var time = null;
            function startMove(iTarget) {
                var oDiv = document.getElementById("div1");
                clearInterval(時間);
                time = setInterval(function() {
                    var 速度 = 0;
                    if (oDiv.offsetLeft < iTarget) {
                        速度 = 7;
                    } else {
                        速度 = -7;
                    }
                    // この状況は有问题の
                    oDiv.style.left = oDiv.offsetLeft 速度 'px';

                }、30)
            }

実際、このようなコードの速度が 7 などの奇数に変更されても、到達目標点が整数の場合、目標点に到達できなかったり、目標点を超えて前後に揺れたりするバグが発生します。目標点

では、なぜこのようなことが起こるのでしょうか?

実際、目標点に到達するとき、目標点を 100 として、毎回 7 回歩く場合、その時点で目標点を通過するか、通過するかのどちらかです。渡さないでください。

決して目標地点に到達しないでください。実際、これは前のバッファと少し似ています。

それでは、目標点に到達したことをどのように計算するのでしょうか?

例: タクシーで特定の場所に行くとき、運転手はあなたがいる場所から約 10 ～ 20 メートル離れたところで停止し、その後あなたは到着します。車にその場所に止まってくださいと言うのは不可能です。

つまり、実際には、オブジェクトと目標点の間の距離が一定レベルに近い限り、近づく必要はなく、完了したと考えられます。

変更されたコードを見てみましょう:

コードをコピーしますコードは次のとおりです: <スクリプトタイプ="text/javascript">

var time = null;

関数 startMove(iTarget) {
var oDiv = document.getElementById("div1"); クリア間隔 (時間)

time = setInterval(function() {
var 速度 = 0;
If (oDiv.offsetLeft < iTarget) {
速度 = 7;
} else {
速度= -7;
}
If (Math.abs(iTarget - oDiv.offsetLeft) oDiv.style.left=iTarget 'px';
} else {
oDiv.style.left = oDiv.offsetLeft 速度 'px';
}
}、30)
}

説明: ここで絶対値を取得するために Math.abs を使用するのはなぜですか?

理由は簡単で、速度はプラスにもマイナスにもなり得るからです。

次に、ターゲットとオブジェクトの間の距離を 7 未満にします。これで完了です。なぜ 7 なのでしょうか? なぜなら、彼の次の練習は7回未満だからです。この時点で、彼は目標点に到達したものとしてカウントされます。

このように書いていると、また問題が発生します。彼は目標地点で正確に停止しませんでした。そこで、簡単な文を追加して、左を直接目標点に等しくしました。 oDiv.style.left=iTarget 'px';

実際、前回残ったのは 7 人未満でしたが、プログラムの実行速度が速すぎて人間の目には見えないことは誰もが知っています。温かい笑顔

現時点では問題ありません。ウインク

等速運動の停止条件です。そこで何人かの友人が、なぜ緩衝運動はそれほど面倒ではないのかと尋ねました。

彼のスピードはどんどん小さくなって、最終的には1に達するまで変化するので、一歩ずつ前進していれば、間違いなくそのような問題はありません。