Chapitre supplémentaire sur le traitement des animations de la série d'analyse du code source Jquery1.9.1

Cet article présente principalement les informations pertinentes de Jquery1.9.1 Série d'analyse de code source (quinze) Traitement d'animation D'autres parties Les amis dans le besoin peuvent se référer à

a. L'animation est 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.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

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

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 cela ne peut pas être le cas. obtenu, 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 :

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

chaîne

vide, null, non défini et "auto" sont convertis en 0, les autres conditions restent inchangées.

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

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

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. Objet spécifique à l'animation jQuery .fx
jQuery.fx encapsule certaines fonctions pour effectuer des actions d'animation. La structure est la suivante

<.>

L'analyse détaillée du code source 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扩展点
}

La variable jQuery.timers = []; 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.

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

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, aucune modification n'y sera apportée. L'opposé de cette fonction est la fonction hide(), qui est utilisée pour masquer tous les éléments correspondants )
.

jQuery.fn.hide([ durée ] [, assouplissement ] [, complète ] | options) (Masquer tous les éléments correspondants. De plus, vous pouvez également spécifier l'effet d'animation de transition du masquage de l'élément. Si l'élément lui-même est invisible, aucune modification n'y est apportée. Si l'élément est visible, il est masqué )

jQuery.fn.toggle([ durée ] [, easing ] [ , complete ] | options. ) (changez 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 « commutateur » signifie que si l'élément est actuellement visible, il sera masqué ; si l'élément est actuellement masqué, il sera affiché (visible). )

La fonction toggle() introduite ici est utilisée pour changer l'affichage/masquage de l'élément. jQuery a é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 différentes
fonctions de traitement d'événement

à tour de rôle lorsqu'elles sont déclenchées.

jQuery.fn.slideDown([ durée ] [, assouplissement ] [, complète ] | options) (Affiche tous les éléments correspondants avec une animation de transition coulissante. Animation coulissante, c'est-à-dire la hauteur de la zone visible de l'élément augmente progressivement 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é, rendez-le 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 glissante vers le haut)

jQuery.fn([ durée ] [, easing. ] [, compléter ] | 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 signifie que la hauteur de la zone visible de l'élément change progressivement de la hauteur d'origine diminue à 0 (s'effondre vers le haut). 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.slideToggle ([ durée ] [, easing ] [, compléter ] | options) (basculer tous les éléments correspondants avec un effet d'animation de transition coulissante. Le soi-disant "bascule" signifie que si l'élément est actuellement visible, cachez-le (glisser vers le haut); si l'élément est actuellement masqué, faites il est visible (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 de fondu, c'est-à-dire la proportion d'opacité de l'élément 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é, rendez-le visible. L'opposé de cette fonction est la fonction fadeOut(), qui est utilisée pour masquer tous les éléments correspondants avec un effet d'animation de transition en 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é diminue progressivement 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é)

fn.fadeToggle. ([ durée ] [, assouplissement ] [, complète ] | options) (bascule tous les éléments correspondants avec un effet d'animation de transition fondu entrant/sortant. Le soi-disant « bascule » signifie que si l'élément est actuellement visible, alors Cachez-le (faites-le disparaître) ; si l'élément est actuellement masqué, faites-le apparaître (faites-le apparaître))

jQuery.fn.animate(cssProperties [, durée ] [, easing ] [, complete ] | cssProperties, options) (effectue une animation personnalisée basée sur l'attribut css. Vous pouvez définir le style CSS pour l'élément correspondant, et la fonction animate() exécutera une animation personnalisée à partir du style actuel au style CSS spécifié. Animation de transition. Par exemple : la hauteur actuelle d'un élément p est de 100 px et sa propriété CSS height est définie sur 200 px. animate() effectuera une animation de transition qui augmente progressivement la hauteur de l'élément p à partir de 100 px. à 200px)

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

jQuery.fn.stop([ queueName ] [, clearQueue [, jumpToEnd ] ]) (arrête l'animation s'exécutant sur l'élément actuellement correspondant. Par défaut, la fonction stop() n'arrêtera l'animation en cours d'exécution que si vous utilisez la fonction animate() pour définir trois animations A, B et C pour l'élément actuel, si elle est en cours d'exécution. l'animation est A, elle arrêtera uniquement l'animation A. n'empêchera pas l'exécution des animations B et C. Bien entendu, vous pouvez également arrêter toutes les animations en spécifiant des paramètres d'option facultatifs. L'arrêt de l'animation ne restaure pas l'état dans lequel elle était avant son exécution, mais l'arrête directement. L'animation restera dans l'état dans lequel elle se trouve actuellement. Par exemple : effectuez une animation de transition d'une hauteur d'élément de 100 px à 200 px, et arrêtez l'animation lorsque la hauteur est de 150 px, la hauteur actuelle restera alors toujours à 150 px. Si l'animation définit une fonction de rappel après l'exécution, la fonction de rappel ne sera pas exécutée. )

jQuery.fn.finish([ queueName ]) (Terminez immédiatement toutes les animations de la file d'attente. finish() arrêtera l'animation en cours d'exécution, supprimera toutes les animations de la file d'attente et terminera la correspondance Toutes les animations des éléments)

jQuery.fn. fadeTo([speed,]opacity[,callback]) (modifie progressivement l'opacité de l'élément sélectionné à la valeur spécifiée)

jQuery.fx.off (Cette propriété est utilisée pour définir ou renvoyer si toutes les animations sont globalement désactivées. Si cette propriété n'est pas définie, une valeur booléenne indiquant si les effets d'animation sont globalement désactivés est renvoyée. Si vous définissez cette propriété sur true désactivera globalement toutes les files d'attente d'animation. Toutes les files d'attente d'animation qui n'ont pas encore été exécutées seront terminées immédiatement et n'auront plus d'effets d'animation définis sur false pour activer les effets d'animation globalement

Vous pouvez désactiver les effets d'animation. lorsque vous rencontrez les situations suivantes : vous utilisez jQuery sur un ordinateur avec une faible configuration ; certains utilisateurs peuvent rencontrer des problèmes d'accessibilité en raison d'effets d'animation)

jQuery.fx.interval (Cette propriété est utilisée pour. définir ou renvoyer la fréquence d'images de l'animation (en millisecondes). La propriété jQuery.fx.interval est utilisée. Elle est utilisée pour définir le nombre de millisecondes pendant lesquelles chaque animation jQuery dessine une image (lorsqu'un changement de style est déclenché, le navigateur peut redessiner la page actuelle). Plus la valeur est petite, plus l'animation est déclenchée plusieurs fois, et l'effet d'animation est plus évident et plus fluide. Bien sûr, cela consommera également plus de performances lors de la modification de la valeur de cette propriété, la file d'attente d'animation. en cours d'exécution ne sera pas affectée. Toute file d'attente d'animation qui n'a pas encore été exécutée dessinera des effets d'animation à la fréquence d'images modifiée)

Le contenu ci-dessus fait partie de la série d'analyses de code source Jquery 1.9.1. (quinzième) traitement d'animation présenté par l'éditeur de Script House. La série d'analyses de code source jQuery 1.9.1 (quinze) vous est présentée. Cliquez pour en savoir plus.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!