Ausführliche Erklärung zur Verwendung von jQuery zur Animationsbeschleunigung mit Bildern und Text

Wie Sie aus der jQuery-API-Dokumentation wissen können, verfügt die benutzerdefinierte jQuery-Animationsfunktion .animate( Properties [, Dauer] [, Easing] [, Complete]) über vier Parameter:

• Eigenschaften: eine Menge Eine Sammlung, die Stileigenschaften und ihre Werte als Animationseigenschaften und Endwerte enthält.

• Dauer (optional): Animationsausführungszeit, deren Wert eine Zeichenfolge mit einer von drei vorgegebenen Geschwindigkeiten sein kann ( „langsam“, „normal“ oder „schnell“) oder ein Millisekundenwert, der die Animationsdauer angibt (z. B.: 1000)

• Easing (optional): Der Name des Übergangseffekts, der verwendet werden soll verwendet, wie zum Beispiel: „linear“ oder „swing“

• komplett (optional): Funktion wird ausgeführt, wenn die Animation abgeschlossen ist

Der Parameter Easing hat standardmäßig zwei Effekte: „ linear“ und „swing“, wenn Sie mehr Effekte benötigen, benötigen Sie Plug-in-Unterstützung. Das jQuery Easing Plugin bietet mehr als 30 Effekte wie „easeOutExpo“, „easeOutBounce“ usw. Sie können hier klicken, um den Demonstrationseffekt von zu sehen Jede Lockerung, wie unten beschrieben. Stellen Sie ihre Verwendung und das Kurvendiagramm jeder Lockerung vor.

So verwenden Sie jQuery-Easing

Wenn Sie in Ihrem Projekt spezielle Animationseffekte verwenden müssen, müssen Sie nach der Einführung von jQuery zunächst jquery.easing.1.3.js einführen

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>

Nach der Einführung hat der Easing-Parameter die folgenden 32 optionalen Werte:

1
5.EasyInOutQuad
7.EasyInOutCubic
10.EasyInOutQuart
13.EasyOutQuint
15.EasyInOutExpo
18.EasyOutSine
.EasyInCirc
23.EasyInOutCirc
26.EasyInOutBack
29
30.easyInBounce
32.easeInOutBounce

Natürlich ist es im Allgemeinen unmöglich, so viele Effekte in einem Projekt zu verwenden Wenn wir bei Bedarf das gesamte jquery.easing einführen müssen, können wir nur die verschiedenen Easings in die Javascript-Datei einfügen, wenn wir beispielsweise nur die beiden Effekte „easeOutExpo“ und „easeOutBounce“ im Projekt verwenden. Wir benötigen nur den folgenden Code


Verwenden Sie die benutzerdefinierte Animationsfunktion von jQuery animate, um den Lockerungseffekt anzugeben, z. B. das Anpassen einer frühlingshaften Animation:


Das ist erwähnenswert Die animate()-Methode in der jQuery-Version 1.4. Die Beschleunigungsmethode wurde erweitert, um die Angabe der Beschleunigungsmethode für jedes Attribut zu unterstützen. Weitere Informationen finden Sie hier, z. B.:


Verwenden Sie die integrierte jQuery-Methode Animationsfunktionen wie slideUp(), slideDown() usw. Um den Beschleunigungseffekt anzugeben, stehen die folgenden zwei Methoden zur Verfügung:


jQuery-Beschleunigungsdiagramm


Das Das folgende Diagramm kann es Ihnen erleichtern, die Wirkung jeder Lockerung zu verstehen

jQuery.extend( jQuery.easing, 
{ 
easeOutExpo: function (x, t, b, c, d) { 
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; 
}, 
easeOutBounce: function (x, t, b, c, d) { 
if ((t/=d) < (1/2.75)) { 
return c*(7.5625*t*t) + b; 
} else if (t < (2/2.75)) { 
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; 
} else if (t < (2.5/2.75)) { 
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; 
} else { 
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; 
} 
}, 
});

Ausführlichere Grafik- und Texterklärungen zur Verwendung von jQuery Animate Easing finden Sie auf der chinesischen PHP-Website!