Zusätzliches Kapitel zur Animationsverarbeitung der Jquery1.9.1-Quellcode-Analyseserie

In diesem Artikel werden hauptsächlich die relevanten Informationen zu Jquery1.9.1 Quellcode-Analysereihe (15) Animationsverarbeitung vorgestellt. Andere Teile können auf

a. Animation ist mit Tween.propHooks kompatibel

Tween.propHooks bietet Methoden zum Festlegen und Abrufen von CSS-Feature-Werten unter besonderen Umständen. Die Struktur ist wie folgt

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

　Tween.propHooks.scrollTop und Tween.propHooks.scrollLeft werden hauptsächlich durch Verwirrung verursacht, wenn IE8 offline ist und der CSS-Funktionswert im Knoten < gespeichert wird 🎜>

Die get-Methode von Tween.propHooks._default versucht, den tween.prop-Funktionswert von CSS direkt vom Knoten abzurufen Erhalten Sie es, verwenden Sie die Methode jQuery.css(), um es zu erhalten. Während dieser Methodenverarbeitung werden einfache Werte wie „10px“ als Gleitkommazahlen analysiert, komplexe Werte wie „Rotation (1rad)“ werden unverändert zurückgegeben. Und dann die zurückgegebenen Ergebnisse verarbeiten: leerer

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

string

, null, undefiniert und „auto“ werden in 0 konvertiert; andere Bedingungen bleiben unverändert.

Die Set-Methode von Tween.propHooks._default versucht zunächst jQuery.fx.step[ tween.prop ], um die Abwärtskompatibilität festzulegen Wird verwendet, um den CSS-Feature-Wert festzulegen. Im extremsten Fall wird der Feature-Wert direkt auf dem Knoten gespeichert b. Animationsspezifisches Objekt jQuery .fx

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

jQuery.fx kapselt einige Funktionen zum Ausführen von Animationsaktionen. Die Struktur ist wie folgt:

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

Detaillierte Quellcode-Analyse ist wie folgt

Die Variable jQuery.timers = []; um die Liste der Funktionen zu speichern, die für jeden Tick ausgeführt werden müssen. Im Allgemeinen gibt es nur eine Funktion, nämlich die in der Animationsfunktion definierte Tick-Funktion. Mit jQuery.fx.interval kann das Zeitintervall zwischen jeweils zwei Frames der Animation festgelegt werden. Der Standardwert beträgt 13 Millisekunden.

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

Das war's mit der Animationsanalyse. Nachfolgend finden Sie eine Liste animationsbezogener APIs

jQuery.fn.show([ Dauer ] [, Easing ] [, Vollständig ] | Optionen) (zeigt alle passenden Elemente an. Darüber hinaus können Sie auch Geben Sie den Übergangsanimationseffekt der Elementanzeige an. Wenn das Element selbst sichtbar ist, werden keine Änderungen daran vorgenommen. Das Gegenteil dieser Funktion ist die Funktion hide(), mit der alle passenden Elemente ausgeblendet werden

jQuery.fn.hide([ Dauer ] [, Easing ] [, Vollständig ] | Optionen) (Alle übereinstimmenden Elemente ausblenden. Darüber hinaus können Sie auch den Übergangsanimationseffekt des Ausblendens von Elementen angeben. Wenn das Element selbst ist unsichtbar, es werden keine Änderungen daran vorgenommen ) (Alle passenden Elemente wechseln. Darüber hinaus können Sie auch den Übergangsanimationseffekt des Elementwechsels festlegen. Der sogenannte „Schalter“ bedeutet, dass das Element ausgeblendet wird, wenn es derzeit sichtbar ist. Wenn das Element derzeit ausgeblendet ist, es wird angezeigt (sichtbar). )

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

Die hier eingeführte Funktion toggle() wird verwendet, um die Anzeige/Ausblendung des Elements umzuschalten. jQuery verfügt auch über eine gleichnamige Ereignisfunktion, toggle(), die zum Binden des Klickereignisses und zum Umschalten verwendet wird, um bei Auslösung nacheinander verschiedene

Ereignisverarbeitungsfunktionen

auszuführen.

jQuery.fn.slideDown([ Dauer ] [, Easing ] [, Vollständig ] | Optionen) (Zeigt alle passenden Elemente mit einer Slide-Down-Übergangsanimation an. Slide-Down-Animation, also die Höhe von Der sichtbare Bereich des Elements vergrößert sich allmählich von 0 auf seine ursprüngliche Höhe (und erweitert sich allmählich nach unten). Wenn das Element ausgeblendet ist, machen Sie es sichtbar >Das Gegenteil dieser Funktion ist die Funktion slideUp(), die verwendet wird, um alle passenden Elemente mit einem nach oben gleitenden Animationseffekt auszublenden)

jQuery.fn([ Dauer ] [, Lockerung ] [, komplette ] |. Optionen) (versteckt alle passenden Elemente mit einem nach oben gleitenden Animationseffekt. Der nach oben gleitende Animationseffekt bedeutet, dass sich die Höhe des sichtbaren Bereichs des Elements allmählich von der ursprünglichen Höhe ändert. Verringert sich auf 0 (kollabiert). nach oben). Wenn das Element selbst ausgeblendet ist, werden keine Änderungen daran vorgenommen. Wenn das Element sichtbar ist, ist es ausgeblendet. [, komplette ] |. Optionen) (schalten Sie alle passenden Elemente mit einem gleitenden Übergangsanimationseffekt um. Das sogenannte „Umschalten“ bedeutet, dass, wenn das Element derzeit sichtbar ist, es ausgeblendet wird ( Nach oben schieben); wenn das Element derzeit ausgeblendet ist, machen es sichtbar (nach unten schieben))

jQuery.fn.fadeIn([ Dauer ] [, Easing ] [, Vollständig ] | Optionen) (Zeigt alle passenden Elemente mit einem Einblend-Übergangsanimationseffekt an. Der Einblend-Animationseffekt, d. h. der Anteil der Deckkraft des Elements erhöht sich schrittweise von 0 % auf 100 %. Wenn das Element selbst sichtbar ist, werden keine Änderungen daran vorgenommen. Das Gegenteil dieser Funktion ist die Funktion fadeOut(), die zum Ausblenden aller passenden Elemente mit einem ausblendenden Übergangsanimationseffekt verwendet wird)

jQuery.fn.fadeOut([ Dauer ] [, Easing ] [, Vollständig ] | Optionen) (alle passenden Elemente mit einem Ausblend-Übergangsanimationseffekt ausblenden. Der sogenannte „Ausblend“-Animationseffekt ist der des Elements Die Deckkraftskala verringert sich schrittweise von 100 % auf 0 %. Wenn das Element selbst ausgeblendet ist, wird es ausgeblendet)

jQuery ([ Dauer ] [, Beschleunigung ] [, vollständig ] | Optionen) (Alle passenden Elemente mit einem Ein-/Ausblend-Übergangsanimationseffekt umschalten. Das sogenannte „Umschalten“ bedeutet, dass, wenn das Element gerade sichtbar ist, dann Ausblenden (ausblenden); wenn das Element derzeit ausgeblendet ist, anzeigen lassen (einblenden))

jQuery.fn.animate(cssProperties [, duration ] [, easing ] [, Complete ] |. cssProperties, Optionen) (führt eine benutzerdefinierte Animation basierend auf dem CSS-Attribut aus. Sie können den CSS-Stil für das passende Element festlegen und die Funktion animate() führt eine benutzerdefinierte Animation aus dem aktuellen Stil aus zum angegebenen CSS-Stil. Beispiel: Die aktuelle Höhe eines p-Elements beträgt 100 Pixel und seine CSS-Höheneigenschaft ist auf 200 Pixel eingestellt. Animate() führt eine Übergangsanimation aus, die die Höhe des p-Elements schrittweise erhöht bis 200px)

jQuery.fn.delay(duration [, queueName ]) (Verzögern Sie die Ausführung des nächsten Elements in der Warteschlange. delay() kann die nächste Animation verzögern, die darauf wartet, ausgeführt zu werden Warteschlange für eine bestimmte Zeit vor der Ausführung. Wird üblicherweise zwischen zwei jQuery-Effektfunktionen in der Warteschlange verwendet, wodurch die Ausführungszeit des nächsten Animationseffekts verzögert wird, nachdem der vorherige Animationseffekt ausgeführt wurde wird nicht zur Effektwarteschlange hinzugefügt, daher wird diese Funktion nicht träge aufgerufen)

jQuery.fn.stop([ queueName ] [, clearQueue [, jumpToEnd ] ]) (stoppt die Animation Wird auf dem aktuell übereinstimmenden Element ausgeführt. Die Funktion stop() stoppt die aktuell ausgeführte Animation nur, wenn Sie die Funktion animate() verwenden, um drei Animationen A, B und C für das aktuelle Element festzulegen Animation A ist, wird nur Animation A gestoppt. Die Ausführung der Animationen B und C wird nicht verhindert. Natürlich können Sie auch alle Animationen stoppen, indem Sie optionale Optionsparameter angeben. Durch das Stoppen der Animation wird nicht der Zustand vor der Ausführung der Animation wiederhergestellt, sondern die Animation bleibt in dem Zustand, in dem sie sich gerade befindet. Beispiel: Führen Sie eine Übergangsanimation mit der Höhe eines Elements von 100 Pixel auf 200 Pixel aus und stoppen Sie die Animation, wenn die Höhe 150 Pixel beträgt. Dann bleibt die aktuelle Höhe weiterhin bei 150 Pixel. Wenn die Animation nach der Ausführung eine Callback-Funktion festlegt, wird die Callback-Funktion nicht ausgeführt. )

jQuery.fn.finish([ queueName ]) (Alle Animationen in der Warteschlange sofort abschließen. Finish() stoppt die aktuell laufende Animation, löscht alle Animationen in der Warteschlange und schließt den Abgleich ab Alle Animationen des Elements)

jQuery.fn. fadeTo([speed,]opacity[,callback]) (ändert die Deckkraft des ausgewählten Elements schrittweise auf den angegebenen Wert)

jQuery.fx.off (Diese Eigenschaft wird verwendet, um festzulegen oder zurückzugeben, ob alle Animationen global deaktiviert sind. Wenn diese Eigenschaft nicht festgelegt ist, wird ein boolescher Wert zurückgegeben, der angibt, ob Animationseffekte global deaktiviert sind. Wenn diese Eigenschaft auf gesetzt wird true deaktiviert alle Animationswarteschlangen global, die noch nicht ausgeführt wurden, und hat keine Animationseffekte mehr. Auf false gesetzt, um Animationseffekte global zu aktivieren.

Sie können Animationen deaktivieren Auswirkungen, wenn Sie auf die folgenden Situationen stoßen: Sie verwenden jQuery auf einem Computer mit niedriger Konfiguration; einige Benutzer können aufgrund von Animationseffekten auf Barrierefreiheitsprobleme stoßen)

jQuery.fx.interval (Diese Eigenschaft wird verwendet Zum Festlegen oder Zurückgeben der Bildrate der Animation (in Millisekunden) wird die Eigenschaft jQuery.fx.interval verwendet. Sie wird verwendet, um festzulegen, wie viele Millisekunden jede jQuery-Animation einen Bildrahmen zeichnet (wenn eine Stiländerung ausgelöst wird). Je kleiner der Wert, desto häufiger wird die Animation ausgelöst und der Animationseffekt ist deutlicher und flüssiger Die ausgeführte Warteschlange ist nicht betroffen. Alle Animationswarteschlangen, die noch nicht ausgeführt wurden, zeichnen Animationseffekte mit der geänderten Bildrate.

Der obige Inhalt ist eine Ergänzung zur Animationsverarbeitung von Jquery 1.9 .1 Quellcode-Analyseserie (fünfzehn), vorgestellt vom Herausgeber von Script House. Klicken Sie hier, um mehr zu erfahren.

Das obige ist der detaillierte Inhalt vonZusätzliches Kapitel zur Animationsverarbeitung der Jquery1.9.1-Quellcode-Analyseserie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!