Jquery1.9.1-Quellcode-Analyseserie (15) über Animationsverarbeitung_jquery hinaus

a. Animation kompatibel mit Tween.propHooks

Tween.propHooks bietet Methoden zum Festlegen und Abrufen von CSS-Funktionswerten 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

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

Die Get-Methode von Tween.propHooks._default versucht, den tween.prop-Funktionswert von CSS direkt vom Knoten abzurufen. Wenn er nicht abgerufen werden kann, verwenden Sie die Methode jQuery.css(), um ihn abzurufen. 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: leere Zeichenfolgen, null, undefiniert und „auto“ werden in 0 umgewandelt; andere Bedingungen bleiben unverändert.

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

Die Set-Methode von Tween.propHooks._default versucht zuerst, die Abwärtskompatibilität mit jQuery.fx.step[tween.prop] festzulegen. Im Extremfall wird jQuery.style verwendet, um den CSS-Funktionswert festzulegen In diesem Fall wird der Merkmalswert direkt auf dem Knoten

gespeichert

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. Animationsspezifisches Objekt jQuery.fx

jQuery.fx kapselt einige Funktionen, die zum Ausführen von Animationsaktionen verwendet werden. Die Struktur ist wie folgt

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

Detaillierte Quellcode-Analyse ist wie folgt

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 Variable jQuery.timers = [] wird verwendet, 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.

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 den Übergangsanimationseffekt der Elementanzeige angeben. Wenn das Element selbst ist sichtbar: Wenn das Element ausgeblendet ist, machen Sie es sichtbar. 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 für das Ausblenden von Elementen angeben. Wenn das Element selbst unsichtbar ist , es werden keine Änderungen am Element vorgenommen, wenn es sichtbar ist )
.

jQuery.fn.toggle([ Dauer ] [, Easing ] [, Vollständig ] | Optionen) (Alle passenden Elemente umschalten. Darüber hinaus können Sie auch den Übergangsanimationseffekt des Elementwechsels angeben. Der sogenannte „Toggle ", das heißt, wenn das Element derzeit sichtbar ist, blenden Sie es aus; wenn das Element derzeit verborgen ist, machen Sie es sichtbar (sichtbar) )
.

Die hier eingeführte Funktion toggle() wird verwendet, um die Anzeige/Ausblendung von Elementen umzuschalten. jQuery verfügt außerdem ü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 übereinstimmenden Elemente mit einem nach unten gleitenden Übergangsanimationseffekt an. Der nach unten gleitende Animationseffekt, d. h. das Element Die Höhe von Der sichtbare Bereich wird schrittweise von 0 auf seine ursprüngliche Höhe vergrößert (sukzessive nach unten erweitert). Wenn das Element selbst sichtbar ist, werden keine Änderungen daran vorgenommen. Wenn das Element ausgeblendet ist, wird es sichtbar gemacht.

Das Gegenteil dieser Funktion ist die Funktion slideUp(), die zum Ausblenden aller passenden Elemente mit einem nach oben gleitenden Übergangsanimationseffekt verwendet wird)

jQuery.fn.slideUp([ Dauer] [, Easing] [, Vollständig] | Optionen) (Verstecken Sie alle übereinstimmenden Elemente mit einem nach oben gleitenden Übergangsanimationseffekt. Der nach oben gleitende Animationseffekt ist der sichtbare Bereich des Elements Die Höhe verringert sich allmählich von der ursprünglichen Höhe auf 0 (nach oben schrumpfend). Wenn das Element selbst ausgeblendet ist, werden keine Änderungen daran vorgenommen. Wenn das Element sichtbar ist, wird es ausgeblendet.

jQuery.fn.slideToggle([ Dauer ] [, Easing ] [, Vollständig ] | Optionen) (schaltet alle passenden Elemente mit einem gleitenden Übergangsanimationseffekt um. Der sogenannte „Schalter“ bedeutet, dass, wenn das Element derzeit If ist Wenn das Element sichtbar ist, blenden Sie es aus (nach oben schieben); wenn das Element derzeit ausgeblendet ist, machen Sie 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 ist die Deckkraft des Elements Die Skala erhöht sich schrittweise von 0 % auf 100 %. Wenn das Element selbst sichtbar ist, wird es sichtbar gemacht. Das Gegenteil dieser Funktion ist die Funktion fadeOut() um alles auszublenden. Passende Elemente mit ausblendendem Übergangsanimationseffekt)

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 wird schrittweise von 100 % auf 0 % reduziert. Wenn das Element selbst ausgeblendet ist, werden keine Änderungen daran vorgenommen. Wenn das Element sichtbar ist, ist es ausgeblendet

jQuery.fn.fadeToggle([ Dauer ] [, Easing ] [, Vollständig ] | Optionen) (schaltet alle passenden Elemente mit Ein-/Ausblend-Übergangsanimationseffekt um. Der sogenannte „Schalter“ bedeutet, dass if Wenn das Element derzeit sichtbar ist, blenden Sie es aus (ausblenden); wenn das Element derzeit ausgeblendet ist, lassen Sie es erscheinen (einblenden)

jQuery.fn.animate(cssProperties [, Dauer] [, Beschleunigung] [, vollständig] | cssProperties, Optionen) (führt eine benutzerdefinierte Animation basierend auf CSS-Eigenschaften durch. Sie können CSS-Stile für übereinstimmende Elemente festlegen, Funktion animate( ). führt eine Übergangsanimation vom aktuellen Stil zum angegebenen CSS-Stil aus. Wenn die aktuelle Höhe eines div-Elements beispielsweise 100 Pixel beträgt, setzen Sie seine CSS-Höheneigenschaft auf 200 Pixel. Animate() führt eine Übergangsanimation aus Die Höhe steigt schrittweise von 100 Pixel auf 200 Pixel)

jQuery.fn.delay(duration [, queueName]) (Verzögern Sie die Ausführung des nächsten Elements in der Warteschlange. delay() kann die nächste Animation, die in der Warteschlange auf ihre Ausführung wartet, um eine bestimmte Zeit verzögern, bevor sie ausgeführt wird. Es wird häufig in Warteschlangen zwischen zwei jQuery-Effektfunktionen verwendet, wodurch die Ausführungszeit des nächsten Animationseffekts verzögert wird, nachdem der vorherige Animationseffekt ausgeführt wurde. Wenn das nächste Element keine Effektanimation ist, wird es nicht zur Effektwarteschlange hinzugefügt. daher wird diese Funktion nicht verzögert aufgerufen)

jQuery.fn.stop([ queueName ] [, clearQueue [, jumpToEnd ] ]) (Hentikan animasi yang sedang berjalan pada elemen yang sepadan. Secara lalai, fungsi stop() hanya akan menghentikan animasi yang sedang berjalan. Jika Anda gunakan fungsi animate() untuk menetapkan tiga animasi A, B dan C untuk elemen semasa Jika animasi yang sedang dilaksanakan ialah A, ia hanya akan menghentikan pelaksanaan animasi A dan tidak akan menghalang pelaksanaan animasi B dan C. Sudah tentu, anda juga boleh menghentikan semua animasi dengan menyatakan parameter pilihan pilihan Menghentikan animasi tidak memulihkan keadaan sebelum animasi dilaksanakan, tetapi menghentikannya secara langsung Keadaan pelaksanaan animasi semasa animasi peralihan daripada 100px kepada 200px untuk ketinggian elemen Jika animasi dihentikan apabila ketinggian adalah 150px, ketinggian semasa masih kekal pada 150px Jika animasi menetapkan fungsi panggil balik selepas pelaksanaan, fungsi panggil balik tidak akan dilaksanakan. . )

jQuery.fn.finish([ queueName ]) (segera melengkapkan semua animasi dalam baris gilir. finish() menghentikan animasi yang sedang berjalan, memadam semua animasi dalam baris gilir dan melengkapkan semua animasi unsur yang sepadan)

jQuery.fn. fadeTo([speed,]opacity[,callback]) (menukar kelegapan elemen yang dipilih secara beransur-ansur kepada nilai yang ditentukan)

jQuery.fx.off (Harta ini digunakan untuk menetapkan atau mengembalikan sama ada semua animasi dilumpuhkan secara global. Jika sifat ini tidak ditetapkan, nilai Boolean yang menunjukkan sama ada kesan animasi dilumpuhkan secara global akan dikembalikan. Jika sifat ini Ditetapkan kepada benar untuk melumpuhkan semua animasi secara global Sebarang baris gilir animasi yang belum dilaksanakan akan diselesaikan serta-merta tanpa kesan animasi palsu, akan membolehkan kesan animasi secara global
.

Anda boleh melumpuhkan kesan animasi apabila anda menghadapi situasi berikut: anda menggunakan jQuery pada komputer dengan konfigurasi rendah sesetengah pengguna mungkin menghadapi masalah kebolehaksesan disebabkan oleh kesan animasi. )

jQuery.fx.interval (Harta ini digunakan untuk menetapkan atau mengembalikan kadar bingkai animasi (nilai milisaat). Sifat jQuery.fx.interval digunakan untuk menetapkan berapa milisaat animasi jQuery melukis bingkai imej (mencetuskan perubahan gaya, Penyemak imbas boleh melukis semula halaman semasa, lebih banyak kali animasi dicetuskan dan kesan animasi lebih jelas dan lebih lancar, baris gilir animasi dilaksanakan apabila menukar nilai sifat ini akan menggunakan lebih banyak prestasi tidak akan terjejas Sebarang baris gilir animasi yang belum dilaksanakan akan melukis kesan animasi pada kadar bingkai yang diubah)

Kandungan di atas tidak termasuk pemprosesan animasi siri analisis kod sumber Jquery 1.9.1 (kelima belas) yang diperkenalkan oleh editor Script House Pemprosesan animasi siri analisis kod sumber jQuery 1.9.1 (lima belas). , klik untuk mengetahui lebih lanjut.