Jquery1.9.1 소스 코드 분석 시리즈 애니메이션 처리 추가 장

이 글은 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 기능 값을 노드에서 직접 가져오려고 시도합니다. .css() 메소드를 가져옵니다. 이 메서드 처리 중에 "10px"와 같은 간단한 값은 부동 소수점 숫자로 구문 분석되고 "회전(1rad)"과 같은 복잡한 값은 그대로 반환됩니다. 그런 다음 반환된 결과를 처리합니다. 빈 strings, 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 = []를 저장하는데 사용됩니다. 각 틱. 일반적으로 말하면 Animation 함수에 정의된 Tick 함수라는 함수 하나만 있습니다. jQuery.fx.interval을 사용하여 애니메이션의 두 프레임마다 시간 간격을 설정할 수 있습니다. 기본값은 13밀리초입니다.

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

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

jQuery.fn.hide([ 기간 ] [, 완화 ] [, 완료 ] | 옵션) (일치하는 모든 요소를 ​​숨깁니다. 또한 요소 숨기기의 전환 애니메이션 효과를 지정할 수도 있습니다. 요소 자체가 보이지 않으면 아무런 조치도 취하지 않습니다. 요소가 표시되면 숨깁니다.)

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

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

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

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

jQuery.fn.slideToggle([ 기간 ] [, 완화 ] [, 완료 ] | 옵션) (일치하는 모든 요소를 ​​전환하고 슬라이딩 전환 애니메이션 효과를 사용하여 소위 "스위치"는 요소가 현재 표시되어 있으면 숨겨집니다(위로 슬라이드). 요소가 현재 숨겨져 있으면 표시됩니다(아래로 슬라이드).

jQuery.fn.fadeIn([ 기간 ] [ , easing ] [,complete ] | 옵션) (페이드인 전환 애니메이션 효과로 일치하는 모든 요소를 ​​표시합니다. 페이드인 애니메이션 효과는 요소의 불투명도 비율을 0%에서 100%까지 점차 증가시킵니다. 요소 자체는 표시되지만 변경 사항은 없습니다. 이 함수의 반대는 페이드 아웃 전환 애니메이션 효과를 사용하여 모든 일치 요소를 숨기는 데 사용되는 fadeOut() 함수입니다.

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

jQuery.fn.fadeToggle([ 지속 시간 ] [ , easing ] [,complete ] | 옵션)(페이드 인/페이드 아웃 전환 애니메이션 효과로 일치하는 모든 요소를 ​​전환합니다. 소위 "스위치"는 요소가 현재 표시되어 있으면 숨겨짐(페이드 아웃)을 의미합니다. ); 요소가 현재 숨겨져 있으면 표시되도록 합니다(페이드 인))

jQuery.fn.animate(cssProperties [, Duration ] [, easing ] [, Complete ] | cssProperties, options) (cssProperties- 실행 일치하는 요소에 대한 CSS 스타일을 설정할 수 있습니다. animate() 함수는 현재 스타일에서 지정된 CSS 스타일로 전환 애니메이션을 수행합니다. 예를 들어 p 요소의 현재 높이는 100px이고 해당 CSS입니다. 높이 속성이 200px로 설정되면 animate()는 p 요소의 높이를 100px에서 200px로 점진적으로 늘리는 전환 애니메이션을 수행합니다.)
jQuery.fn.delay(duration [, queueName ]) ( 지연()은 대기열에서 실행을 기다리는 다음 애니메이션을 지정된 시간 동안 지연시킬 수 있으며 이전 애니메이션 이후 다음 애니메이션을 지연시키기 위해 대기열에 있는 두 개의 jQuery 효과 함수 사이에 자주 사용됩니다. 효과가 실행되는 시간입니다. 다음 항목이 효과 애니메이션이 아닌 경우 효과 대기열에 추가되지 않으므로 함수가 해당 항목을 지연 호출하지 않습니다.

jQuery.fn. stop([ queueName ] [, clearQueue [ , jumpToEnd ] ]) (현재 일치하는 요소에서 실행 중인 애니메이션을 중지합니다. 기본적으로 stop() 함수는 현재 실행 중인 애니메이션만 중지합니다. animate() 함수를 사용하여 현재 요소에 대해 A, B, C를 설정합니다. 이 세 가지 애니메이션의 경우 현재 실행 중인 애니메이션이 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 애니메이션이 프레임을 그리는 시간을 밀리초 단위로 설정하는 데 사용됩니다(스타일 변경을 트리거하면 브라우저는 값이 작을수록 현재 페이지를 다시 그릴 수 있음). 애니메이션이 더 많이 트리거되고 애니메이션 효과가 더 명확하고 매끄러워집니다. 물론 성능이 많이 소모될수록 실행 중인 애니메이션 대기열은 아직 실행되지 않은 애니메이션 대기열의 영향을 받지 않습니다. 변경된 프레임 레이트에 따라 그려집니다)

위 내용은 Script House 에디터가 소개한 Jquery 1.9.1 소스코드 분석 시리즈(15), jQuery 1.9.1 소스코드입니다. 분석 시리즈 (15) 애니메이션 처리, 자세한 내용을 보려면 클릭하세요.

위 내용은 Jquery1.9.1 소스 코드 분석 시리즈 애니메이션 처리 추가 장의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!