JSモーションフレームワークのカプセル化処理（サンプルコード）

質問をさせてください。出発地 A から目的地 B まで歩くのに合計 1000 ミリ秒かかりました。それぞれの時間は 30 ミリ秒です。そこからどのような情報が得られますか?

どんな情報があるの？

1 つ目、合計時間は 1000 ミリ秒です。

2 つ目、歩くのにどれくらいの頻度がかかりますか? 30ミリ秒

3番目、総歩行数: 1000/30

4番目、距離: B-A

5番目、歩幅: 距離/合計回数

モーションフレームワークの実装アイデア:つまり、一定時間内に左、上、幅、高さを変更し、目的地に到着したら停止します。

まず考えてください、ページ上で div を移動させる方法?

次のように考えてください: 1. div を設定するときは絶対配置されます。これは、絶対配置後にのみ左、上、その他の値がページに表示されるためです。そうしないと、div がページ上に表示されなくなります。 ️ div のクリック イベントを設定し、関数で合計ステップ数、合計距離 dis、速度 step=dis/count を定義することもできます。また、現在のステップ番号を設定し、それを n = 0 に初期化する必要があります

。

3. 次に、タイマー setInterval() を使用して div の現在の距離を取得し、div を移動させます。

具体的なコードは次のとおりです。 oDiv.onclick = function( ){

var count = parseInt(10) 00/30);

//総歩数

var dis = 500-0;

//

距離

var step = dis/count;//
var n = 0 //現在の歩数
n + }

実際には、ほんの数行のコードで div を移動させるのは非常に簡単です。 しかし、div は停止せずに動き続けます。これは、移動の終了条件が設定されていないためです。上記のコードでは、現在のステップ数と合計ステップ数を設定し、現在のステップ数と合計ステップ数が一致した場合にタイマーをクリアすると、div を停止できますか?

ステップ数が500に達すると、divは500で停止します。

改善されたコードは次のとおりです:

window.onload = function(){

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

var timer;

oDiv.onclick = function(){

var count = parseInt(1000/30);

//総歩数

var dis = 500-0;

//距離

var step = dis/count;

//速度 oDiv.style.left = n*step +'px';
断 判 // 判定条件、現在のステップ数と総ステップ数が同じ場合、div は停止可能

if (n == Count) { Clearinterval (Timer)}} }, 30) }; }} L & lt;/script & gt;
関数を使用して移動プロセスをカプセル化できます

& lt; script type = "text/javascript" & gt; odiv = d = D.ocument .getElementById('div1'); obj,name,target,dur){
var count = parseInt(dur/30); var start = obj.offsetLeft;変数
のページ上の div var dis = target - Start; n++;

// 条件を判断すると、現在のステップ数と合計ステップ数が同じ場合、div は停止できます (n == count）{

clearInterval（タイマー）}}、30）

odiv.onclick = function（）{続き以来...

以上がJSモーションフレームワークのカプセル化処理（サンプルコード）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。