ホームページ > 記事 > ウェブフロントエンド > JSモーションアニメーションの8つの知識_JavaScriptスキル
JSモーションアニメーションの8つの知識_JavaScriptスキル
- WBOYオリジナル
- 2016-05-16 16:10:09903ブラウズ
今日、私は単純に 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.opacity=alpha/100; //100で割るのを忘れないように注意してください
1. 緩衝運動とは、距離が大きくなると速度が大きくなり、距離が小さくなると速度が小さくなる、つまり速度が距離に関係することを意味します。
2. 上記のステートメントに従って、速度を再定義します。速度は最初は 0 でしたが、現在は次のようになります。
タイマーを再定義します:
この時点で速度が高すぎることがわかりました。次のようにすることができます:
3. この時、深刻な問題が発生します。画面の最小単位が px であるため、最後の左の値がターゲットではない iTarget が存在します。これは、Math の判断によって解決できます。ここでは切り捨てを行うfloor()と切り上げを行うMath.ceil()を紹介します。速度を定義した後、次のように書きます:
このようにして、速度がすべて整数であり、臨界値ではすべて 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 モーション アニメーションを学ぶのに役立つことを願っています。