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 ]을 시도하여 이전 버전과의 호환성을 설정합니다. 그렇지 않으면 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 = [];는 각 틱마다 실행해야 하는 함수 목록을 저장하는 데 사용됩니다. 일반적으로 말하면 Animation 함수에 정의된 Tick 함수라는 함수 하나만 있습니다. jQuery.fx.interval을 사용하여 애니메이션의 두 프레임마다 시간 간격을 설정할 수 있습니다. 기본값은 13밀리초입니다.

애니메이션 분석은 여기까지입니다. 아래는 애니메이션 관련 API 목록입니다

jQuery.fn.show([ 기간 ] [, 완화 ] [, 완료 ] | 옵션 ) (일치하는 모든 요소를 표시합니다. 또한 요소 표시의 전환 애니메이션 효과를 지정할 수도 있습니다. 요소 자체가 visible, 요소가 숨겨져 있으면 표시되도록 합니다. 이 함수의 반대는 일치하는 모든 요소를 숨기는 데 사용되는 hide() 함수입니다.

jQuery.fn.hide([ 기간 ] [, 완화 ] [, 완료 ] | 옵션) (일치하는 모든 요소를 숨깁니다. 또한 요소 숨기기에 대한 전환 애니메이션 효과를 지정할 수도 있습니다. 요소 자체가 보이지 않는 경우 , 요소가 표시되는 경우 요소가 변경되지 않습니다. )
.

jQuery.fn.toggle([ 기간 ] [, 완화 ] [, 완료 ] | 옵션) (일치하는 모든 요소를 토글합니다. 또한 요소 전환의 전환 애니메이션 효과를 지정할 수도 있습니다. 소위 "토글" " 즉, 요소가 현재 표시되어 있으면 숨기고, 요소가 현재 숨겨져 있으면 표시(visible) )
.

여기서 소개하는 토글() 함수는 요소의 표시/숨기기를 전환하는 데 사용됩니다. jQuery에는 또한 클릭 이벤트를 바인딩하고 트리거될 때 다른 이벤트 처리 기능을 차례로 실행하도록 전환하는 데 사용되는 동일한 이름의 이벤트 함수인 전환()이 있습니다.

jQuery.fn.slideDown([ 기간 ] [, 완화 ] [, 완료 ] | 옵션) (아래로 슬라이딩 전환 애니메이션 효과로 일치하는 모든 요소를 표시합니다. 아래로 슬라이딩 애니메이션 효과, 즉 요소의 높이 표시 영역은 0에서 원래 높이까지 점진적으로 증가합니다(점차적으로 아래쪽으로 확장). 요소 자체가 표시되면 변경 사항이 적용되지 않습니다. 요소가 숨겨져 있으면 표시됩니다.

이 함수의 반대는 위쪽 슬라이딩 전환 애니메이션 효과로 일치하는 모든 요소를 숨기는 데 사용되는 SlideUp() 함수입니다.

jQuery.fn.slideUp([ 기간 ] [, 완화 ] [, 완료 ] | 옵션) (상향 슬라이딩 전환 애니메이션 효과로 일치하는 모든 요소를 숨깁니다. 상향 슬라이딩 애니메이션 효과는 요소의 가시 영역입니다. 높이는 원래 높이에서 0으로 점차 감소합니다(점진적으로 위쪽으로 축소). 요소 자체가 숨겨져 있으면 변경 사항이 적용되지 않습니다. 요소가 표시되면 숨겨집니다.

jQuery.fn.slideToggle([ 기간 ] [, 완화 ] [, 완료 ] | 옵션) (슬라이딩 전환 애니메이션 효과로 일치하는 모든 요소를 전환합니다. 소위 "스위치"는 요소가 현재 If 요소가 표시되면 숨기세요(위로 슬라이드). 요소가 현재 숨겨져 있으면 표시되도록 설정하세요(아래로 슬라이드)

jQuery.fn.fadeIn([ 기간 ] [, 완화 ] [, 완료 ] | 옵션) (페이드 인 전환 애니메이션 효과로 일치하는 모든 요소를 표시합니다. 페이드 인 애니메이션 효과는 요소의 불투명도입니다. 배율은 0%에서 100%까지 점차 증가합니다. 요소 자체가 표시되면 변경 사항이 적용되지 않습니다. 요소가 숨겨지면 표시됩니다. 이 함수의 반대는 fadeOut() 함수입니다. 페이드 아웃 전환 애니메이션 효과로 모든 요소를 숨깁니다.

jQuery.fn.fadeOut([ 기간 ] [, 완화 ] [, 완료 ] | 옵션) (페이드 아웃 전환 애니메이션 효과를 사용하여 일치하는 모든 요소를 숨깁니다. 소위 "페이드 아웃" 애니메이션 효과는 요소의 불투명도 비율은 100%에서 0%로 점차 감소합니다. 요소 자체가 숨겨져 있으면 변경 사항이 적용되지 않습니다. 요소가 표시되면 숨겨집니다.

jQuery.fn.fadeToggle([ 기간 ] [, 완화 ] [, 완료 ] | 옵션) (페이드 인/페이드 아웃 전환 애니메이션 효과를 사용하여 일치하는 모든 요소를 토글합니다. 소위 "스위치"는 다음을 의미합니다. 요소가 현재 표시되어 있으면 숨깁니다(페이드 아웃). 요소가 현재 숨겨져 있으면 표시되도록 합니다(페이드 인).

jQuery.fn.delay(duration [, queueName]) (큐의 다음 항목 실행을 지연합니다. Delay()는 큐에서 실행을 기다리는 다음 애니메이션을 실행하기 전에 지정된 시간 동안 지연시킬 수 있습니다. 두 개의 jQuery 효과 함수 사이의 대기열에서 흔히 사용되므로 이전 애니메이션 효과가 실행된 후 다음 애니메이션 효과의 실행 시간이 지연됩니다. 다음 항목이 효과 애니메이션이 아닌 경우 효과 대기열에 추가되지 않습니다. 따라서 이 기능은 지연 호출을 하지 않습니다.)

jQuery.fn.stop([ queueName ] [, clearQueue [, JumpToEnd ] ]) (一致する要素で現在実行中のアニメーションを停止します。デフォルトでは、stop() 関数は現在実行中のアニメーションのみを停止します。 animate() 関数を使用して、現在の要素に 3 つのアニメーション A、B、C を設定します。現在実行中のアニメーションが A の場合、アニメーション A の実行のみが停止され、アニメーション B と C の実行は妨げられません。もちろん、オプションのオプションパラメータを指定してすべてのアニメーションを停止することもできます。アニメーションを停止すると、アニメーションが実行される前の状態は復元されません。たとえば、現在のアニメーションの実行状態がそのまま残ります。要素の高さの 100 ピクセルから 200 ピクセルへの遷移アニメーション。高さが 150 ピクセルのときにアニメーションが停止した場合、アニメーションの実行後にコールバック関数が設定されている場合、そのコールバック関数は実行されません。 )

jQuery.fn.finish([ queueName ]) (キュー内のすべてのアニメーションを即座に完了します。finish() は現在実行中のアニメーションを停止し、キュー内のすべてのアニメーションを削除し、一致する要素のすべてのアニメーションを完了します)

jQuery.fn.fadeTo([speed,]opacity[,callback]) (選択した要素の不透明度を指定された値に徐々に変更します)

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

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

jQuery.fx.interval (このプロパティは、アニメーションのフレームレート (ミリ秒値) を設定または返すために使用されます。jQuery.fx.interval プロパティは、jQuery アニメーションが画像のフレームを描画するミリ秒数を設定するために使用されます(スタイルの変更をトリガーし、ブラウザーは現在のページを再描画する可能性があります)。値が小さいほど、アニメーションがトリガーされる回数が多くなり、値を変更するときに実行されるアニメーションキューがより明白になり、よりスムーズになります。このプロパティはより多くのパフォーマンスを消費しますが、まだ実行されていないアニメーションキューは変更されたフレームレートで描画されます)

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