Jquery1.9.1 ソースコード解析シリーズアニメーション処理番外編-jsチュートリアル-php.cn

この記事は主にJquery1.9.1のソースコード解析シリーズ(15)アニメーション処理の関連情報を紹介します。必要な友人は参考にしてください

aアニメーションはTween.propHooksと互換性があります

Tween.propHooks は、特殊な状況下で css 特徴値を設定および取得するためのメソッドを提供します。構造は次のとおりです

Tween.propHooks = {
  _default: {
    get: function(){...},
    set: function(){...}
  },
  scrollTop: {
    set: function(){...}
  }
  scrollLeft: {
    set: function(){...}
  }
}

ログイン後にコピー

Tween.propHooks.scrollTop と Tween.propHooks.scrollLeft は、ie8 がオフラインの場合の混乱が主な原因です。 . css特徴量をノードに保存します

set: function( tween ) {
  if ( tween.elem.nodeType && tween.elem.parentNode ) {
    tween.elem[ tween.prop ] = tween.now;
  }
}

ログイン後にコピー

Tween.propHooks._defaultのgetメソッドは、css tween.prop特徴量をノードから直接取得しようとしますが、取得できない場合はjQueryを使用します。 css()メソッドで取得します。このメソッドの処理では、「10px」などの単純な値は浮動小数点数として解析され、「回転(1rad)」などの複雑な値はそのまま返されます。そして、返された結果を処理します。空の

文字列、null、未定義、および「auto」はすべて 0 に変換され、他の条件は変更されません。

get: function( tween ) {
  var result;
  if ( tween.elem[ tween.prop ] != null &&
    (!tween.elem.style || tween.elem.style[ tween.prop ] == null) ) {
    return tween.elem[ tween.prop ];
  }
  //传递一个空字符串作为第三个参数的.css会自动尝试parseFloat，
  //并返回到一个字符串，如果解析失败的话。
  //所以，简单的值，如“10px”会被被解析为浮点数。复杂的值，如“旋转（1rad）”返回原样。
  result = jQuery.css( tween.elem, tween.prop, "" );
  // 空字符串, null, undefined 和 "auto"都转化为0
  return !result || result === "auto" ? 0 : result;
}

ログイン後にコピー

Tween.propHooks._default の set メソッドは、最初に jQuery.fx.step[ tween.prop ] を試して下位互換性を設定します。それ以外の場合は、jQuery.style を使用して CSS 機能値を設定します。最も極端なケースでは、特徴値をノードに直接保存します

set: function( tween ) {
  //使用step hook向下兼容 - 使用cssHook如果他存在 - 使用.style如果可用的话
  //使用直接的特征值如果可用可用的话
  if ( jQuery.fx.step[ tween.prop ] ) {
    jQuery.fx.step[ tween.prop ]( tween );
  } else if ( tween.elem.style && ( tween.elem.style[ jQuery.cssProps[ tween.prop ] ] != null || jQuery.cssHooks[ tween.prop ] ) ) {
    jQuery.style( tween.elem, tween.prop, tween.now + tween.unit );
  } else {
    tween.elem[ tween.prop ] = tween.now;
  }
}

ログイン後にコピー

b. アニメーション固有のオブジェクト jQuery.fx

jQuery.fx は、アニメーションアクションを実行するためのいくつかの関数をカプセル化します。構造は以下の通りです

jQuery.fx = {
  tick = function () {...},//每个时间点都会执行的函数外壳，会取出jQuery.timers中的函数执行
  timer = function ( timer ) {...},//执行参数中的函数并启动计时
  interval = 13, //计时步长
  start = function () {...},//启动计时
  stop = function () {...},//停止计时
  speeds = {slow: 600,fast: 200,_default: 400},//动画速度（完整动画执行时间）
  step = {}//向下兼容<1.8扩展点
}

ログイン後にコピー

詳細なソースコード解析は以下の通りです

jQuery.fx = Tween.prototype.init;
//每个时间点都会执行的函数外壳，会取出jQuery.timers中的函数执行
jQuery.fx.tick = function() {
  var timer,
  timers = jQuery.timers,
  i = 0;
  fxNow = jQuery.now();
  for ( ; i < timers.length; i++ ) {
    timer = timers[ i ];
    // Checks the timer has not already been removed
    if ( !timer() && timers[ i ] === timer ) {
      timers.splice( i--, 1 );
    }
  }
  if ( !timers.length ) {
    jQuery.fx.stop();
  }
  fxNow = undefined;
};
//执行参数中的函数并启动计时
jQuery.fx.timer = function( timer ) {
  if ( timer() && jQuery.timers.push( timer ) ) {
    jQuery.fx.start();
  }
};
//计时步长
jQuery.fx.interval = 13;
//启动计时
jQuery.fx.start = function() {
  if ( !timerId ) {
    timerId = setInterval( jQuery.fx.tick, jQuery.fx.interval );
  }
};
//停止计时
jQuery.fx.stop = function() {
  clearInterval( timerId );
  timerId = null;
};
//动画速度（完整动画执行时间）
jQuery.fx.speeds = {
  slow: 600,
  fast: 200,
  // Default speed
  _default: 400
};
//向下兼容<1.8扩展点
jQuery.fx.step = {}; 
　　这里其中执行动画的关键源码是
//动画入口函数function Animation( elem, properties, options ){
　　...
　　jQuery.fx.timer(
　　　　jQuery.extend( tick, {
　　　　　　elem: elem,
　　　　　　anim: animation,
　　　　　　queue: animation.opts.queue
　　　　})
　　);
　　...
}
//执行参数中的函数并启动计时
jQuery.fx.timer = function( timer ) {
  if ( timer() && jQuery.timers.push( timer ) ) {
    jQuery.fx.start();
  }
};
//计时步长
jQuery.fx.interval = 13;
//启动计时
jQuery.fx.start = function() {
  if ( !timerId ) {
    timerId = setInterval( jQuery.fx.tick, jQuery.fx.interval );
  }
};

ログイン後にコピー

変数jQuery.timers = [];に対して実行する必要がある関数のリストを保存するために使用されます。各ティック。一般的に言えば、関数は 1 つだけあり、それはアニメーション関数で定義された Tick 関数です。 jQuery.fx.interval を使用して、アニメーションの 2 フレームごとの時間間隔を設定できます。デフォルトは 13 ミリ秒です。

アニメーションの分析は以上です。以下はアニメーション関連の API のリストです

jQuery.fn.show([duration ] [, easing ] [, complete ] | options ) (一致する要素をすべて表示します。また、トランジションアニメーション効果を指定することもできます)要素自体が表示されている場合、要素は変更されません。この関数の反対は、一致するすべての要素を非表示にするために使用される Hide() 関数です。

jQuery. fn.hide([duration ] [, easing ] [, complete ] | options) (一致する要素をすべて非表示にします。さらに、要素の非表示の遷移アニメーション効果を指定することもできます。要素自体が非表示の場合、アクションは実行されません。表示されている場合は要素を非表示にします)

jQuery.fn.toggle([duration] [, easing ] [, complete ] | options) (一致するすべての要素を切り替えます。さらに、要素切り替えのトランジションアニメーション効果を指定することもできます。いわゆる「切り替え」とは、要素が現在表示されている場合は非表示になり、要素が現在非表示になっている場合は表示 (表示) されることを意味します。

ここで紹介するtoggle()関数は要素の表示/非表示を切り替えるために使用します。 jQuery には、同じ名前のイベント関数 toggle() もあります。これは、クリックイベントをバインドし、トリガーされたときに異なる

イベント処理

関数を順番に実行するために使用されます。 jQuery.fn.slideDown([duration] [, easing ] [, complete ] | options) (下方向にスライドするアニメーション効果を使用して、一致するすべての要素を表示します。下方向にスライドするアニメーション効果は、要素が表示されることを意味します。領域は 0 から元の高さまで徐々に増加します (徐々に下に拡張します)。要素自体が表示されている場合、要素は変更されません。要素が非表示の場合は、その要素を表示します。これは、関数の逆です。、上向きのスライドトランジションアニメーション効果ですべての一致する要素を非表示にするために使用されます)

jQuery.fn.slideUp([duration ] [, easing ] [, complete ] | options) (上向きのスライドトランジションですべての一致する要素を非表示にします)上向きにスライドするアニメーション効果は、要素の表示領域の高さが元の高さから 0 まで徐々に減少することを意味します (要素自体が非表示の場合は、何も変更しないでください)。要素が表示されている場合は非表示にします)

jQuery.fn.slideToggle([ period ] [, easing ] [, complete ] | options) (一致するすべての要素を切り替えます。また、スライド遷移アニメーション効果、いわゆる「switch」は、要素が現在表示されている場合は非表示 (上にスライド)、要素が現在非表示の場合は表示 (下にスライド) することを意味します) 、イージング ] [、完全 ] | オプション) (フェードイントランジションアニメーション効果を使用して一致する要素をすべて表示します。フェードインアニメーション効果は、要素の不透明度の比率が 0% から 100% まで徐々に増加します。要素自体は表示されますが、変更は行われません。この関数の反対は、フェードアウトトランジションアニメーション効果を使用して、一致するすべての要素を非表示にするために使用されます。

jQuery.fn.fadeOut([ duration ] [, easing ] [, complete ] | options) (フェードアウト遷移アニメーション効果で一致する要素をすべて非表示にします。いわゆる「フェードアウト」アニメーション効果は、 element 要素自体が非表示の場合、その割合は 100% から 0% まで徐々に減少します。要素が表示されている場合、要素は非表示になります。イージング ] [、完全な ] オプション) (フェードイン/フェードアウトのトランジションアニメーション効果を使用して、一致するすべての要素を切り替えます。いわゆる「切り替え」とは、要素が現在表示されている場合は非表示になることを意味します (フェードアウト) ); if 要素が現在非表示の場合、それを表示します (フェードイン))

jQuery.fn.animate(cssProperties [, period ] [, easing ] [, complete ] | cssProperties, options) (cssProperties を実行します)ベースのカスタムアニメーション。一致する要素の CSS スタイルを設定できます。animate() 関数は、現在のスタイルから指定された CSS スタイルへの遷移アニメーションを実行します。たとえば、p 要素の現在の高さは 100 ピクセルです。高さ属性が 200px に設定されると、animate() は p 要素の高さを 100px から 200px に徐々に増加させる遷移アニメーションを実行します)

jQuery.fn.lay(duration [, queueName ]) (キュー内の次のアイテムの実行を遅らせます。lay() は、キュー内で実行を待機している次のアニメーションを指定した時間遅らせることができます。これは、キュー内の 2 つの jQuery エフェクト関数の間で、前のアニメーションの後に次のアニメーションを遅らせるためによく使用されます。エフェクトが実行される。次の項目がエフェクトアニメーションでない場合は、エフェクトキューに追加されないため、関数はそれを遅延呼び出ししません)
jQuery.fn。 stop([ queueName ] [, clearQueue [ , JumpToEnd ] ]) (現在一致する要素で実行中のアニメーションを停止します。デフォルトでは、stop() 関数は現在実行中のアニメーションのみを停止します。animate() 関数を使用して現在の要素に A、B、C を設定します。これら 3 つのアニメーションでは、現在実行中のアニメーションが A の場合、アニメーション A の実行のみが停止され、アニメーション B と C の実行は妨げられません。もちろん、次のこともできます。オプションのオプションパラメータを指定して、すべてのアニメーションを停止します。アニメーションを停止すると、アニメーションが実行される前の状態には戻りませんが、アニメーションは現在の状態のままになります。たとえば、要素の高さが 100px から 200px になる遷移アニメーションを実行し、高さが 150px になったときにアニメーションを停止すると、現在の高さは 150px のままになります。実行完了後にアニメーションで

コールバック関数

を設定した場合、コールバック関数は実行されません。 )

jQuery.fn.finish([ queueName ]) (キュー内のすべてのアニメーションを即座に完了します。finish() は現在実行中のアニメーションを停止し、キュー内のすべてのアニメーションを削除し、一致する要素のすべてのアニメーションを完了します)
jQuery.fn. fadeTo([speed,]opacity[,callback]) (選択した要素の不透明度を指定された値に徐々に変更します)

jQuery.fx.off (このプロパティは、次の値を設定または返すために使用されます)すべてのアニメーションをグローバルに無効にするこのプロパティの値を設定しない場合、アニメーション効果がグローバルに無効になっているかどうかを示すブール値が返されます。このプロパティが true に設定されている場合、実行中のすべてのアニメーションがグローバルに無効になります。実行されていないアニメーションキューは、アニメーション効果なしですぐに完了します。このプロパティが false に設定されている場合、アニメーション効果はグローバルに有効になります。

次の状況: 低構成のコンピューターで jQuery を使用している。一部のユーザーはアニメーション効果によりアクセシビリティの問題が発生する可能性があります)

jQuery.fx.interval (このプロパティには jQuery.fx.interval を使用します。アニメーションのフレームレート (ミリ秒値)。 jQuery.fx.interval プロパティは、jQuery アニメーションがフレームを描画するミリ秒数を設定するために使用されます (値が小さいほど、ブラウザーはスタイルの変更をトリガーします)。アニメーションがトリガーされる回数が増えると、アニメーション効果がより明白になり、よりスムーズになります。もちろん、実行中のアニメーションキューは、まだ実行されていないアニメーションキューの影響を受けません。変更されたフレームレートに応じてエフェクトが描画されます)

上記の内容は、スクリプトハウスの編集者があなたに紹介するJQuery 1.9.1のソースコード解析シリーズ(全15回)で、アニメーション処理以外のjQuery 1.9.1のソースを紹介します。コード解析シリーズ (15) アニメーション処理、クリックして詳細をご覧ください。

以上がJquery1.9.1 ソースコード解析シリーズアニメーション処理番外編の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。