Série d'analyses de code source Jquery1.9.1 (15) au-delà du traitement d'animation

a.Animation compatible avec Tween.propHooks

Tween.propHooks fournit des méthodes pour définir et obtenir des valeurs de fonctionnalités CSS dans des circonstances particulières. La structure est la suivante
.

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

Copier après la connexion

Tween.propHooks.scrollTop et Tween.propHooks.scrollLeft sont principalement causés par une confusion lorsque IE8 est hors ligne et que la valeur de la fonctionnalité CSS est enregistrée dans le nœud

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

Copier après la connexion

La méthode get de Tween.propHooks._default tentera d'obtenir la valeur de la fonctionnalité tween.prop de CSS directement à partir du nœud. Si elle ne peut pas être obtenue, utilisez la méthode jQuery.css() pour l'obtenir. Lors du traitement de cette méthode, les valeurs simples telles que « 10px » seront analysées comme des nombres à virgule flottante ; les valeurs complexes telles que « rotation (1rad) » seront renvoyées telles quelles. Et puis traitez les résultats renvoyés : les chaînes vides, null, non définies et "auto" sont converties en 0, les autres conditions restent inchangées.

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;
}

Copier après la connexion

La méthode set de Tween.propHooks._default essaiera d'abord jQuery.fx.step[ tween.prop ] pour définir la compatibilité descendante, sinon jQuery.style sera utilisé pour définir la valeur de la fonctionnalité CSS la plus extrême ; cas, la valeur de la fonctionnalité sera définie Enregistrer directement sur le nœud

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;
  }
}

Copier après la connexion

b. Objet jQuery.fx spécifique à l'animation

jQuery.fx encapsule certaines fonctions utilisées pour effectuer des actions d'animation. La structure est la suivante

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扩展点
}

Copier après la connexion

L'analyse détaillée du code source est la suivante

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 );
  }
};

Copier après la connexion

La variable jQuery.timers = []; est utilisée pour enregistrer la liste des fonctions qui doivent être exécutées pour chaque tick. De manière générale, il n'existe qu'une seule fonction, qui est la fonction tick définie dans la fonction Animation. jQuery.fx.interval peut être utilisé pour définir l'intervalle de temps entre deux images de l'animation. La valeur par défaut est de 13 millisecondes.

Voilà pour l’analyse de l’animation. Vous trouverez ci-dessous une liste d'API liées à l'animation

jQuery.fn.show([ durée ] [, easing ] [, complete ] | options ) (Affiche tous les éléments correspondants. De plus, vous pouvez également spécifier l'effet d'animation de transition de l'affichage de l'élément. Si l'élément lui-même est visible, Si l'élément est masqué, rendez-le visible. Le contraire de cette fonction est la fonction hide(), qui est utilisée pour masquer tous les éléments correspondants)
.

jQuery.fn.hide([ durée ] [, easing ] [, complete ] | options) (Masquer tous les éléments correspondants. De plus, vous pouvez également spécifier l'effet d'animation de transition pour le masquage de l'élément. Si l'élément lui-même est invisible , aucune modification n'est apportée à l'élément s'il est visible )
.

jQuery.fn.toggle([ durée ] [, easing ] [, complete ] | options) (bascule tous les éléments correspondants. De plus, vous pouvez également spécifier l'effet d'animation de transition du changement d'élément. Le soi-disant "toggle ", c'est-à-dire si l'élément est actuellement visible, cachez-le ; si l'élément est actuellement masqué, rendez-le visible (visible) )
.

La fonction toggle() introduite ici est utilisée pour changer l'affichage/masquage des éléments. jQuery possède également une fonction d'événement du même nom, toggle(), qui est utilisée pour lier l'événement de clic et basculer pour exécuter tour à tour différentes fonctions de traitement d'événement lorsqu'il est déclenché.

jQuery.fn.slideDown([ durée ] [, easing ] [, complete ] | options) (affiche tous les éléments correspondants avec un effet d'animation de transition glissante vers le bas. L'effet d'animation glissant vers le bas, c'est-à-dire l'élément La hauteur de la zone visible est progressivement augmentée de 0 à sa hauteur d'origine (en s'étendant progressivement vers le bas). Si l'élément lui-même est visible, aucune modification n'y est apportée. Si l'élément est masqué, il est rendu visible.

L'opposé de cette fonction est la fonction slideUp(), qui est utilisée pour masquer tous les éléments correspondants avec un effet d'animation de transition coulissante vers le haut)

jQuery.fn.slideUp([ durée ] [, easing ] [, complete ] | options) (masquer tous les éléments correspondants avec un effet d'animation de transition coulissante vers le haut. L'effet d'animation coulissante vers le haut est la zone visible de l'élément La hauteur diminue progressivement de la hauteur d'origine à 0 (rétrécissant progressivement vers le haut). Si l'élément lui-même est masqué, aucune modification n'y sera apportée. Si l'élément est visible, il sera masqué)

jQuery.fn.slideToggle([duration] [, easing ] [, complete ] | options) (commute tous les éléments correspondants avec un effet d'animation de transition glissante. Le soi-disant "switch" signifie que si l'élément est actuellement If l'élément est visible, cachez-le (faites glisser vers le haut); si l'élément est actuellement masqué, rendez-le visible (faites glisser vers le bas))

jQuery.fn.fadeIn([ durée ] [, easing ] [, complete ] | options) (affiche tous les éléments correspondants avec un effet d'animation de transition en fondu. L'effet d'animation en fondu est l'opacité de l'élément. l'échelle augmente progressivement de 0% à 100%. Si l'élément lui-même est visible, aucune modification n'y est apportée. Si l'élément est masqué, il est rendu visible. L'opposé de cette fonction est la fonction fadeOut(), qui est utilisée. pour tout cacher. Éléments correspondants avec effet d'animation de transition de fondu)

jQuery.fn.fadeOut([ durée ] [, easing ] [, complete ] | options) (masque tous les éléments correspondants avec un effet d'animation de transition en fondu. L'effet d'animation dit "fondu en sortie" est l'élément L'échelle d'opacité est progressivement réduite de 100% à 0%. Si l'élément lui-même est masqué, aucune modification n'y est apportée. Si l'élément est visible, il est masqué)

jQuery.fn.fadeToggle([ durée ] [, easing ] [, complete ] | options) (bascule tous les éléments correspondants avec un effet d'animation de transition fondu entrant/sortant. Le soi-disant "commutateur" signifie que si l'élément est actuellement visible, cachez-le (fondu sortant) ; si l'élément est actuellement masqué, faites-le apparaître (fondu entrant))

jQuery.fn.animate(cssProperties [, duration ] [, easing ] [, complete ] | cssProperties, options) (effectue une animation personnalisée basée sur les propriétés CSS. Vous pouvez définir des styles CSS pour faire correspondre les éléments, fonction animate( ) exécutera une animation de transition du style actuel vers le style CSS spécifié. Par exemple : si la hauteur actuelle d'un élément div est de 100 px, définissez sa propriété CSS height sur 200 px, animate() exécutera une animation de transition où l'élément div. la hauteur augmente progressivement de 100px à 200px)

jQuery.fn.delay(duration [, queueName]) (Retarder l'exécution de l'élément suivant dans la file d'attente. delay() peut retarder la prochaine animation en attente d'être exécutée dans la file d'attente pendant une durée spécifiée avant de l'exécuter. Il est couramment utilisé dans les files d'attente entre deux fonctions d'effet jQuery, retardant ainsi le temps d'exécution du prochain effet d'animation après l'exécution de l'effet d'animation précédent. Si l'élément suivant n'est pas une animation d'effet, il ne sera pas ajouté à la file d'attente des effets. donc cette fonction ne lui fera pas d'appel différé)

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 애니메이션이 이미지 프레임을 그리는 시간을 밀리초 단위로 설정하는 데 사용됩니다. (스타일 변경을 트리거하면 브라우저가 현재 페이지를 다시 그릴 수 있습니다.) 값이 작을수록 애니메이션이 더 많이 트리거되고 애니메이션 효과가 더 명확하고 매끄러워집니다. 이 속성은 더 많은 성능을 소모하지만 아직 실행되지 않은 애니메이션 대기열은 변경된 프레임 속도로 애니메이션 효과를 그립니다.

위 내용은 Script House 편집자가 소개한 Jquery 1.9.1 소스코드 분석 시리즈(15차)의 애니메이션 처리를 제외합니다. jQuery 1.9.1 소스코드 분석 시리즈(15차)의 애니메이션 처리 , 자세히 알아보려면 클릭하세요.