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" &#63; 0 : result;
}

ログイン後にコピー

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

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 つだけあり、それはアニメーション関数で定義されているティック関数です。 jQuery.fx.interval を使用して、アニメーションの 2 フレームごとの時間間隔を設定できます。デフォルトは 13 ミリ秒です。

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

jQuery.fn.show([ period ] [, easing ] [, complete ] | options ) (一致する要素をすべて表示します。さらに、要素表示の遷移アニメーション効果も指定できます。要素自体が要素が非表示の場合は、要素を表示します。この関数の逆は、一致するすべての要素を非表示にするために使用される関数です。

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

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

今回紹介するtoggle()関数は要素の表示・非表示を切り替えるために使用します。 jQuery には、同じ名前のイベント関数 toggle() もあります。これは、クリックイベントをバインドし、トリガーされたときにさまざまなイベント処理関数を順番に実行するように切り替えるために使用されます。

jQuery.fn.slideDown([ due ] [, easing ] [, complete ] | options) (下方向にスライドするアニメーション効果を持つすべての一致する要素を表示します。下方向にスライドするアニメーション効果、つまり要素の高さは表示領域は 0 から元の高さまで徐々に増加します (要素自体が表示されている場合は変更されません)。要素が非表示の場合は表示されます。

この関数の反対は、slideUp() 関数です。この関数は、上向きにスライドするトランジションアニメーション効果で一致する要素をすべて非表示にするために使用されます)

jQuery.fn.slideUp([ due ] [, easing ] [, complete ] | options) (上向きにスライドする遷移アニメーション効果を使用して、一致する要素をすべて非表示にします。上向きにスライドするアニメーション効果は、要素の表示領域です。高さは元の高さから 0 まで徐々に減少します (要素自体が非表示の場合、要素は表示されますが、要素は非表示になります)。

jQuery.fn.slideToggle([ period ] [, easing ] [, complete ] | options) (スライド遷移アニメーション効果を使用して、一致するすべての要素を切り替えます。いわゆる「切り替え」とは、要素が現在 If要素が表示されている場合は非表示にします (上にスライド)、要素が現在非表示になっている場合は表示します (下にスライド))。

jQuery.fn.fadeIn([ due ] [, easing ] [, complete ] | options) (フェードイン遷移アニメーション効果を使用して、一致するすべての要素を表示します。フェードインアニメーション効果は、要素の不透明度です。スケールは 0% から 100% まで徐々に増加します。要素自体が表示されている場合は変更されません。要素が非表示の場合は、この関数が使用されます。すべてを非表示にします。フェードアウトトランジションアニメーション効果を使用して要素を一致させます)

jQuery.fn.fadeOut([ period ] [, easing ] [, complete ] | options) (フェードアウト遷移アニメーション効果を使用して、一致する要素をすべて非表示にします。いわゆる「フェードアウト」アニメーション効果は、要素の不透明度スケールは 100% から 0% まで徐々に減少します。要素自体が非表示の場合、要素は変更されません。要素が表示されている場合は非表示になります。

jQuery.fn.fadeToggle([ period ] [, easing ] [, complete ] | options) (フェードイン/フェードアウトのトランジションアニメーション効果を使用して、一致するすべての要素を切り替えます。いわゆる「スイッチ」とは、次の場合を意味します。要素が現在表示されている場合は非表示 (フェードアウト)、要素が現在非表示の場合は表示します (フェードイン))。

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

jQuery.fn.lay(duration [, queueName]) (キュー内の次の項目の実行を遅らせます。lay() は、キュー内で実行を待っている次のアニメーションを、実行する前に指定した時間遅らせることができます。これは通常、2 つの jQuery エフェクト関数間のキューで使用され、それにより、前のアニメーション効果が実行された後、次のアニメーション効果の実行時間を遅らせます。次の項目がエフェクトアニメーションでない場合、そのアイテムはエフェクトキューに追加されません。したがって、この関数は遅延呼び出しを行いません)

jQuery.fn.stop([ queueName ] [, clearQueue [, jumpToEnd ] ]) (Stop the currently running animation on the matching element. By default, the stop() function will only stop the currently running animation. If You use the animate() function to set three animations A, B, and C for the current element. If the currently executing animation is A, it will only stop the execution of animation A and will not prevent the execution of animations B and C. Of course. , you can also stop all animations by specifying optional option parameters. Stopping the animation does not restore the state before the animation is executed, but stops it directly. The current animation execution state will stay in that state. For example: Execute a transition animation from 100px to 200px for an element's height. If the animation is stopped when the height is 150px, the current height will still remain at 150px. If the animation sets a callback function after execution, the callback function will not be executed. . )

jQuery.fn.finish([ queueName ]) (immediately completes all animations in the queue. finish() stops the currently running animation, deletes all animations in the queue, and completes all animations of matching elements)

jQuery.fn. fadeTo([speed,]opacity[,callback]) (gradually changes the opacity of the selected element to the specified value)

jQuery.fx.off (This property is used to set or return whether all animations are globally disabled. If this property is not set, a Boolean value indicating whether animation effects are globally disabled is returned. If this property is Set to true to disable all animations globally. Any animation queues that are not yet executed will be completed immediately without animation effects. false, will enable the animation effect globally
.

You can disable animation effects when you encounter the following situations: you are using jQuery on a computer with low configuration; some users may encounter accessibility issues due to animation effects. )

jQuery.fx.interval (This property is used to set or return the frame rate of the animation (millisecond value). The jQuery.fx.interval property is used to set how many milliseconds the jQuery animation draws a frame of image (triggering a style change, The browser may redraw the current page). The smaller the value, the more times the animation is triggered and the animation effect is more obvious and smoother. Of course, the animation queue being executed when changing the value of this property will consume more performance. will not be affected. Any animation queue that has not yet been executed will draw animation effects at the changed frame rate)

The above content is excluding animation processing of Jquery 1.9.1 source code analysis series (fifteenth) introduced by the editor of Script House. Animation processing of jQuery 1.9.1 source code analysis series (fifteen), click to learn more.

Jquery1.9.1のソースコード解析シリーズ(15)アニメーション処理のその先_jquery