Lassen Sie uns über die Verwendung der JS-Animationsbibliothek Velocity.js sprechen

In diesem Artikel wird hauptsächlich die Verwendung der JS-Animationsbibliothek Velocity.js vorgestellt. Jetzt teile ich sie mit Ihnen und gebe sie als Referenz.

Vorwort

Es ist wieder heißer Juli und ich habe lange Zeit keine technischen Artikel mehr aktualisiert. Der Grund dafür ist, dass mein Praktikum Ende letzten Jahres endete Monat und ich bin aus dem Unternehmen ausgetreten. Dann habe ich kürzlich an meinen eigenen Projekten gearbeitet und die Führerscheinprüfung abgelegt. Um mich auf die nächste Firmenbewerbung vorzubereiten, habe ich mich von meiner Freundin verabschiedet und bin nach einem halben Monat noch beruhigt Lernen Sie neue Technologien kennen und schreiben Sie einen technischen Artikel. Ich hoffe, Sie können weiterhin durchhalten.

JS-Animation

Da das Internet immer vielfältiger wird, tauchen immer mehr Verschönerungen und neue Technologien auf der Webseite auf. Als Website-Besucher gibt es immer mehr Dinge um sie anzulocken Neben der Gewährleistung der Glätte der Website gibt es auch verschiedene coole interaktive Effekte.

Die interaktiven Effekte von Webseiten werden grob in CSS-Animationen und JS-Animationen unterteilt.

Vorteile der JS-Animation

Da wir nun ein allgemeines Verständnis dieser beiden Arten von Animationen haben, analysieren wir ihre unterschiedlichen Vorteile

1. CSS-Animation Da CSS3 Animationen basierend auf CSS-Attributen anpassen kann, besteht der Vorteil dieser Art von Animation darin, dass sie nicht berechnet und geändert werden muss und sehr flüssig erscheint.

2. JS-Animation JS-Animation hat eine leistungsstarke Leistung und ist besser als CSS-Animation. Da sie den Attributwert basierend auf JS ändert, unterliegt sie nicht den Einschränkungen von CSS und kann mehr Funktionen und Funktionen erreichen Manche Leute sagen vielleicht, dass einige JS-Animationsbibliotheken sehr langsam sind. Tatsächlich sind JS-Animationen von Natur aus schnell, aber JQuery verlangsamt sie. Da es manchmal mit JQuery verwendet wird, ist es aufgrund einiger Funktionen von JQuery selbst bei der Implementierung sehr langsam.

So verwenden Sie Velocity.js

Es gibt viele JS-Animationsbibliotheken, jede mit ihren eigenen Vorteilen, wie zum Beispiel der mitgelieferten Animationsanimation mit jquery. Es gibt WebGL oder die Verwendung von Canvas, SVG usw., um andere Effekte zu erzielen. Diesmal sprechen wir über eine der vielen Bibliotheken, die Velocity.js-Animationsbibliothek.

velocity.js kann mit JavaScript allein oder mit jquery verwendet werden (Beachten Sie, dass Sie zuerst Velocity.js herunterladen und unter dem Body-Tag einführen und dann den folgenden Code in das neue Skript schreiben Tag) :

//jquery方法 
var $p = $('p')
$p.velocity({属性:值,属性:值})
//javascript 方法
var op = document.getElementById('p')
op.velocity({属性:值,属性:值})

Ein paar Punkte, die Sie hier beachten sollten:

1. Die darin enthaltenen Attribute dürfen nicht in Anführungszeichen geschrieben werden, und wenn die Folgende Werte sind in Anführungszeichen gesetzt. Beispiel: width: 100 und width: „100px“
2. Die darin enthaltenen Attributwerte können nicht mehrfach übergeben werden einmal. In CSS können wir es beispielsweise wie folgt übergeben: {paddingLeft: 5, paddingRirght: 5 weggelassen🎜>3. Wenn der Attributwert darin mehrere Übergänge aufweist, muss der zweite erste Buchstabe wie oben großgeschrieben werden

velocity.js detaillierte Einführung

Wie Wie oben erwähnt, wird der Wert, der geändert werden muss, als erster Parameter des Objekts an die Geschwindigkeit übergeben, dann ist der zweite Parameter seine Spezifikation. Zu den Animationsoptionen gehören:

+ Dauerdauer

+ Beschleunigungsmodus
+ verzögerte Ausführung verzögern
+ Schleifenanzahl der Schleifen
+ Rückruffunktionen beginnen und abschließen
+ Anzeige (Der Wert ist der gleiche wie bei CSS und kann auf „Auto“ gesetzt werden)

Vorher Wenn wir über die Angabe von Animationsoptionen für die Geschwindigkeit sprechen, sprechen wir über die von der Geschwindigkeit unterstützten Werte: px em rem % vm vh oder verwenden Sie den Operator *=2, um den aktuellen Wert darzustellen. Operationsmethoden wie 2 mal oder /=2

Die folgenden Analysen werden einzeln analysiert, um Animationsoptionen festzulegen:

Dauerdauer

Dies stellt die Animation dar. Die Standarddauer beträgt Millisekunden (ms). Sie können sie wie folgt verwenden dies:

// 表示一秒内将透明度从1到0
$p.velocity({opacity:0},{duration:1000})

Du kannst es auch so verwenden:

// 效果相同
$p.velocity({opacity:0},1000)

velocity has Außerdem wurden drei kontinuierliche Modi angepasst: langsam (600 ms), normal (400 ms), schnell (200 ms), die entsprechend Ihren tatsächlichen Anforderungen verwendet werden können

Beschleunigungsmethode

Dies stellt die Art und Weise dar, wie die Animation transformiert wird: Ease-In-Out (stufenweises Erhöhen und Verringern), Ease-In (zuerst beschleunigen und dann mit konstanter Geschwindigkeit), Dase-out (zuerst beschleunigen und dann mit konstanter Geschwindigkeit) Nachverzögerung)

kann auch basierend auf der trigonometrischen Funktionsbeschleunigung „easeInOutSine“, der CSS-Bezier-Kurve [0,17, 0,67, 0,83, 0,67] oder der Federphysik [Spannung, Reibung] und anderen Werten implementiert werden

Verzögerte Ausführung verzögern

Gibt an, wie lange die Ausführung dieser Animation verzögert wird. Die Standardeinheit ist Millisekunden (ms)

// 五秒后执行此动画
delay：5000

Schleifenanzahl der Schleifen

gibt die Anzahl der Schleifen an, die für diese Animation erforderlich sind:

// 循环五次
loop:5
// 无限循环
loop:true

Rückruffunktionen beginnen und abschließen

Diese beiden stellen die Funktionen dar, die vor Beginn der Animation und nach Ende der Animation ausgeführt werden:

begin:function(){ somgthing... },complete:function(){ somgthing... }

Andere Funktionen:

Velocity hat auch einige andere Funktionen, die später besprochen werden, wie zum Beispiel: Umkehren, Scrollen, Farbe, Transformation (einschließlich Skalieren, Drehen, Drehen, (Übersetzung und Übersetzung) usw.)

Das Obige habe ich für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

JS-Methode zum Generieren eines QR-Codes aus einem Link und zum Konvertieren in ein Bild

Methode zum Abrufen von DOM-Elementen basierend auf vue1 und vue2

nodejs+mongodb aggregierte Kaskadenabfrageoperationsbeispiel

Das obige ist der detaillierte Inhalt vonLassen Sie uns über die Verwendung der JS-Animationsbibliothek Velocity.js sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!