JavaScriptによる等速運動と可変速（バッファリング）運動の詳しい紹介_基礎知識

div の移動は、実際には div とブラウザの境界線の間の距離の変化です。変化率が一定の場合は等速運動、変化率が一定でない場合は可変速運動です。変化率がブラウザの境界線からの距離に比例する場合、div はバッファリング動作を行っていると言えます。
実際には、これは非常に簡単です。タイマーを使用して、div とブラウザの境界線の間の距離を時々変更するだけです。

たとえば、一定の速度で移動する:

タイマーを入力します: (30 ミリ秒ごとに実行)
if (終点に到達するかどうか)
{タイマーを停止}
else do{距離を変更}

距離を変更する方法により、一定速度で移動するか可変速度 (バッファリング) で移動するかが決まります。

例:

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

var timer=null;
function startMove()
{

var oDiv=document.getElementById('div1');
clearInterval(timer); 🎜>timer =setInterval(function () {
var iSpeed=1;

if(oDiv.offsetLeft>=300)
{
clearInterval(timer);
}
else
{
oDiv.style.left=oDiv.offsetLeft iSpeed
}
},30); 🎜>

バッファの移動:

コードをコピー

コードは次のとおりです: var timer=null; function startMove()

{

var iTarget=300;

var oDiv=document.getElementById('div1');

clearInterval(timer);
timer=setInterval(function () {
var iSpeed=(iTarget-oDiv.offsetLeft)/8;

iSpeed=iSpeed>0? Math.ceil(iSpeed):Math .floor(iSpeed);

iSpeed=Math.ceil(iSpeed);
if(oDiv.offsetLeft==iTarget)
{
clearInterval(タイマー);
}
else
{
oDiv.style.left=oDiv.offsetLeft iSpeed 'px';
}
document.title=oDiv.style.left ' ' iSpeed;
},30 );


このようにしてモーションフレームワークが記述されます。原理は単純ですが、まだ完成させる必要があります。ゆっくりしてください！