JSモーションアニメーションの8つの知識_JavaScriptスキル

今日、私は単純に js モーション アニメーションを学び、自分の経験を記録し、それをみんなと共有しました。

以下は私がまとめた結果です。

知識ポイント 1: アニメーションの速度を向上させます。

1. 最初のステップは、スピード モーション アニメーションを実装し、関数をカプセル化することです。使用される知識は setInterval(function(){

) です。

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

oDiv.style.left=oDiv.offsetLeft 10 "px";
},30).

ここで offsetLeft が使用されている理由については、特に検索して得た有益な情報は次のとおりです。

a.offsetLeft と left の類似点は、親ノードに対する子ノードの左位置を表すことです。
b. ただし、left は読み取りと書き込みが可能ですが、offsetLeft は読み取り専用です。 c. そして offsetLeft には単位がなく、子ノードの位置を取得するときにその後ろに px がありません。

このブロガー

http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201372885729561/ のおかげで、追加の知識が得られます。

2. 移動中のノードを停止します。ここでは if ステートメントを使用して検証を行います。offsetLeft==0、clearInterval (タイマー) の場合、ここでのタイマーは事前に初期化 = null にし、前のモーション アニメーションを割り当てます。それに。

3. ここで問題があります。動作が終了する前に再度動作がトリガーされると、動作全体が開始される前に、clearInterval (タイマー) が使用される限り、動作の速度が蓄積されます。大丈夫ですよ。

4. 移動効果と除去効果を設定し、移動のパラメータを設定します。1 つは速度、もう 1 つは目標位置 iTarget の位置によっても速度を判断できることがわかりました。したがって、必要なパラメータは 1 つだけです。

知識ポイント 2: 透明度のグラデーション

1. 実際には、ITarget の値が透明性であること、およびタイマーをクリアしてからタイマーを開いて判断するプロセスなどを除いて、以前とほぼ同じです。

2. パラメーター alpha = 透明度を定義します。タイマーは次のように記述する必要があることに注意してください。

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

アルファ =速度；

oDiv.style.filter='alpha(opacity:' alpha ')' //これは非常に重要なメソッドなので、このように記述されていることに注意してください
oDiv.style.opacity=alpha/100; //100で割るのを忘れないように注意してください

3. 上記はすべてインラインスタイルです。

知識ポイント 3: 動作のバッファリング

1. 緩衝運動とは、距離が大きくなると速度が大きくなり、距離が小さくなると速度が小さくなる、つまり速度が距離に関係することを意味します。

2. 上記のステートメントに従って、速度を再定義します。速度は最初は 0 でしたが、現在は次のようになります。

コードをコピーします コードは次のとおりです: varspeed=iTarget-oDiv.offsetLeft;

タイマーを再定義します:

コードをコピーします コードは次のとおりです: oDiv.style.left=oDiv.offsetLeft 速度 'px';

この時点で速度が高すぎることがわかりました。次のようにすることができます:

コードをコピーします コードは次のとおりです: varspeed=(iTarget-oDiv.offsetLeft)/10;

3. この時、深刻な問題が発生します。画面の最小単位が px であるため、最後の左の値がターゲットではない iTarget が存在します。これは、Math の判断によって解決できます。ここでは切り捨てを行うfloor()と切り上げを行うMath.ceil()を紹介します。速度を定義した後、次のように書きます:

コードをコピーします コードは次のとおりです: Speed=speed>0?Math.ceil(speed):Math.floor(speed);

このようにして、速度がすべて整数であり、臨界値ではすべて 0 であることが完全に保証されます。

知識ポイント 4: マルチオブジェクトのモーション

1. まずすべてのオブジェクトを取得して配列を形成し、次に for ループを使用してそれを実行し (この方法は実に古典的です!)、for ループにノード イベントを追加し、これを使用して現在のノードを置き換えます。関数 、例: startMove(this, iTarget)、関数 startMove(obj, iTarget) を定義する場合。

2. 現在の幅 offsetWidth を取得するときは、obj の値を使用する必要があります。

3. マウスが非常に速く移動すると、ノードの幅を元の状態に戻すことができなくなります。これは、タイマーが全員に共通のタイマーであるため、前のノードが戻る前に次のノードがタイマーをクリアしてしまうためです。解決策は、各ノードにインデックスを追加することです。つまり、上記の for ループに aDiv[i].timer=null; を追加し、定義された関数の timer を obj.timer に置き換えます。したがって、共有タイマーに何かが起こることに注意する必要があります。

4. 透明度の移動では、アルファが速度の代わりになりますが、タイマーが共有されていない場合でも、複数のオブジェクトの移動では問題が発生します。これは、アルファが共有されるため、各オブジェクトが互いに引き裂かれてしまいます。解決策は、タイマーのような for ループ内の各ノードにアルファを割り当てるように使用することです。

概要: 競合を解決するには、初期化するか個人化します。

知識ポイント 5. スタイルを取得する

1. ノードの幅を変更するタイマー(移動時は大、削除時は小)で、ノードにボーダーを追加すると、移動時は対象ノードより小さく、移動時は対象ノードより大きくなります。移動時の対象ノード。幅パディング スクロールバー (スクロール バー) の境界線に注意してください。その理由は、各オフセットが境界線*2- (タイマーのたびに値が減少する) が増加するためです。

2. 上記の問題を解決する方法は、width を行内に記述し、offsetLeft の代わりに parseInt(oDiv.style.width) を使用することですが、必ずしも行内に記述できるわけではないので、その値を取得する関数を定義します。リンクスタイル:

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

function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr] //つまりブラウザ
; }
else{
return getComputerStyle(obj,false)[attr] //その他のブラウザ
}
}

3. font-size については、js で fontSize を記述する方法は 1 つだけです。

知識ポイント 6: 任意の属性値

1. すべてのオフセットタイプには小さなバグがあります。getStyle 関数を使用する必要があります。この関数は parseInt() と一緒に使用されることが多く、通常は変数に保存されます。

2. style.width を記述するときに、style['width'] と記述することもできます。

3. 複数のオブジェクトの属性値を調整するために、スタイルをパラメータとしてカプセル化して、マルチオブジェクト属性関数に 3 つの属性値 (obj、attr、iTarget) が含まれるようにすることができます。

4. 上記のモーション フレームは透明度の変更には適していません。透明度は 10 進数であるためです。1 つ目は parseInt、2 つ目は attr=...px です。ここでは、Use if 解釈を使用して処理できます。透明度を個別に設定し、parseInt を parseFloat に置き換え、px を削除します。

5. コンピューター自体にバグがあるため、0.07*100 は 7 に等しくないため、四捨五入された値である Math.round() という関数を導入します。

知識ポイント 7: チェーンモーション

1. move.js フレームワークを導入します。

2. コールバック関数 fn() を渡し、if で判定し、fn() がある場合は fn() を実行します。

知識ポイント 8: 同時動作

1. 同時モーションを制御するモーション関数を 2 つ記述すると、関数カバレッジが発生します。

2. jsonの知識点を利用します。jsonのループはfor(jsonのi)を使用し、モーション関数のパラメータはobj,json,fnです。

3. iTarget 値はもう存在せず、json[attr] に置き換えられます。

これを書いている時点で、皆さんに気に入っていただけると幸いです。また、皆さんが JS モーション アニメーションを学ぶのに役立つことを願っています。