bounce.js: Ein leistungsstarkes Werkzeug, mit dem glatte CSS -Animationen

einfach erstellt werden k?nnen

bounce.js, erstellt von Joel Besada, ist ein einfaches und benutzerfreundliches Tool, mit dem Entwickler schnell glatte und elegante CSS-Animationen erzeugen k?nnen. Es ist Teil der aufstrebenden JavaScript -Bibliothek und der Generatorwelle, die den Erstellungsprozess komplexer Animationen effektiv vereinfacht.

Bild von ipythat

JavaScript - eine einfache Skriptsprache, die ursprünglich die dynamischen Effekte von Webseiten verbessert - hat seit seiner Gründung im Jahr 1995 gro?e Fortschritte erzielt. JavaScript wurde von Brendan Eich, Mitbegründer von Mozilla, erfunden. In den letzten fünf Jahren hat er Adobe Flash nach und nach zur Technologie der Wahl für Webanimationen, Spiele und Anwendungen geworden.

Der Aufstieg von JavaScript hat eine neue Reihe von Bibliotheken und Generatoren hervorgebracht, sodass Entwickler leichter auf komplexere Animationsfunktionen zugreifen k?nnen. Bounce.js ist einer von ihnen.

Mit

bounce.js k?nnen Sie reibungslose, elegante CSS -Animationen über eine einfache Schnittstelle, Vorschau, Freigabe und Export generieren. Sein Betrieb ist sehr intuitiv! Wenn Sie exquisite Animationseffekte m?gen, probieren Sie Bounce.js.

Als n?chstes werden wir den Funktionalit?ts- und Animations -Workflow von Bounce.js untersuchen und eine benutzerdefinierte Animation erstellen. Ich glaube, Sie werden es sehr interessant finden!

Schnittstelle

Die Schnittstelle von

bounce.js ist pr?gnant und klar und macht den Animationserstellungsprozess sehr einfach.

links ist die Komponentenliste, in der Sie der Animationskette verschiedene Effekte hinzufügen und Anpassungen vornehmen k?nnen. Es bietet auch eine Reihe von Animationsvoreinstellungen, die Sie anzeigen und ?ndern k?nnen und Zeiten beim Hinzufügen von Komponenten speichern k?nnen. Das Animation Preset ?Road Runner“ ist sehr interessant, und der Umgang mit den Details durch den Autor ist erstaunlich. Viele Voreinstellungen sind als Vorlagen erh?ltlich, um das Mischen benutzerdefinierter Animationen zu erleichtern und Zeit zu sparen.

Die Mitte des Bildschirms ist der Animationsvorschau -Bereich, und ein Quadrat fungiert als Platzhalter, um alle Aktionen der Animation anzuzeigen.

Unter dem Vorschau -Bildschirm befinden sich drei Schaltfl?chen: Animation, Loop -Animation und Zeitlupe abspielen.

Zeitlupenfunktion ist besonders hilfreich für die detaillierte Analyse der Animationsbewegungs -Flugbahn.

Jede von Ihnen erstellte Animation hat eine eindeutige URL. Klicken Sie auf "Short URL abrufen", um einen kurzen Link zu erhalten.

Haftungsausschluss: Wie die meisten Codegeneratoren ist der gut geschriebene Code dem automatisch generierten Code oft weit überlegen. Das manuelle Schreiben von Code kann jedoch zeitaufw?ndig und arbeitsintensiver sein. Wenn Sie den Code nicht manuell anpassen m?chten, wird empfohlen, sich nicht übertrieben auf Bounce.js zu verlassen. Bounce.js verwendet Matrix -Transformationen stark, was nicht der beste Weg für alle Animationsszenen ist.

Ich habe dies pers?nlich erlebt, w?hrend ich diese Animation gemacht habe. Ihre Animation ist jedoch m?glicherweise nicht so kompliziert wie diese, was eine gute Sache ist. Denken Sie daran: Je l?nger die Animations -Zeitleiste, desto mehr Code generieren Sie es, also nicht übertragen Sie ihn.

Dies sind die Grundlagen. Der gesamte Prozess ist technisch nicht kompliziert - der Rest h?ngt von Ihrer Fantasie ab.

Hand-Originalproduktion

Erstellen wir eine benutzerdefinierte Animation. Im folgenden Beispiel werde ich zeigen, wie eine Fallschirmanimation erstellt wird - die Art der übertriebenen Animation, die normalerweise in Cartoons zu sehen ist - von oben nach unten schauen.

In Bounce.js ist die Animation in "Komponenten" unterteilt. Sie k?nnen sich Komponenten als verschiedene Teile eines Tanzbewegers vorstellen. Denken Sie daran, wir entwerfen nur das Verhalten der Animation, weder das Objekt, das es animiert, noch den Hintergrund/die Bühne. Sobald unsere Aktion ausgeführt ist, ist es natürlich trivial, sie auf ein Objekt in jeder Einstellung anzuwenden.

Animationskomponente 1

F: Was wird der Fallschirmspringer nach seinem Fallschirmspringen tun?

a: Natürlich ?ffnen sie den Fallschirm. Konvertieren wir es also in Animation.

Der beste Weg, um die ?ffnung eines Fallschirms zu simulieren, besteht darin, die -Skala -Komponente zu verwenden. In Bezug auf die ursprüngliche Gr??e des Quadrats in der Vorschau habe ich hier die ursprüngliche Gr??e von 0,2 verwendet, und die endgültige Gr??e betr?gt 4. Grunds?tzlich wird es am Ende der Animation 20 -mal gr??er.

Da die Breite und L?nge des Fallschirms (H?he von oben) gleich sind, halten wir die Seitenverh?ltnisse der beiden Dimensionen gleich. Wir w?hlen das Attribut Bounce für Locking , da es unseren Bedürfnissen am besten entspricht. In der Dauer geben wir den Zeitbereich an, den die Animation abdecken soll. Da der Fallschirm sehr schnell ge?ffnet ist, habe ich ihn hier für 2000 Millisekunden festgelegt.

Unabh?ngig von der Reihenfolge der animierten Komponenten werden alle Komponenten zu Beginn der Animation sofort aktiviert. Wenn Sie also m?chten, dass die Komponente sp?ter startet, müssen Sie die Verz?gerung im Feld Delay angeben.

TIPP: Wenn Sie komplexe Animationen erstellen, ist es am besten, die Komponenten in der gleichen Reihenfolge zu halten, die sie aktiviert werden, damit sie nicht leicht verwechselt werden.

Das Feld

bounces gibt die Anzahl der w?hrend der Animation anspricht, wenn ein Element abprallt. In diesem Fall tippte ich 16, was eine relativ hohe Zahl ist, aber es ist sinnvoll für die Fallschirmanimation.

Gleiches gilt für den Wert

Steifheit . Setzen wir dafür einen Mindestwert.

Animationskomponente 2

Als n?chstes simulieren wir die Bewegung des Fallschirms, so wie der Wind seinen Weg auf subtile und zuf?llige Weise ?ndert. Dazu verwenden wir die Translate -Komponente. Ich habe hier einen subtilen Schritt hinzugefügt (25 Einheiten rechts und 15 Einheiten am Boden), was ausreichen sollte. Ich empfehle, wegen der Gl?tte der Animation wieder locker zu werden.

Da diese Komponente w?hrend der gesamten Animation gespielt wird, lasse ich sie für 20000 ms spielen, was ihre gesamte L?nge abdecken sollte. Der Fallschirm wird vom Beginn der Zeitleiste bewegen, sodass wir hier keine Verz?gerung ben?tigen. Da der Fallschirmsport vom Wind, aber h?rter als die erste Komponente, betroffen ist, gab ich ihm 22 bounces und 3 Steifheit .

Animationskomponente 3

Schlie?lich werden wir die letzte Komponente der Animation hinzufügen.

Wenn Sie den Fallschirmspringer von oben beobachten, erscheint er aufgrund des Zeitverlaufs und der Steigerung der Entfernung offensichtlich immer kleiner.

seine anf?ngliche Gr??e betr?gt 1 und die Gr??e am Ende der Animation betr?gt tats?chlich 0. Fügen wir diese Werte für Breite und H?he ein.

Die Dauer der Animation sollte hier offensichtlich ziemlich lang sein. 25.000 Millisekunden reichen aus.

Da diese Animationskomponente gleichzeitig mit anderen Komponenten (d. H. Keine Verz?gerung) abgespielt wird, müssen wir keine Sprung- oder Steifigkeitseffekte hinzufügen, wenn sie von der vorherigen Komponente erbt. Also, wie die Screenshots hier, überlassen Sie sie 0.

Natürlich k?nnen Sie Ihre Ergebnisse nach Belieben einstellen und mischen, was nur eine grobe Anleitung ist, aber die Ergebnisse liegen offensichtlich in Ihren H?nden.

Sie sollten jedoch ?hnliche Ergebnisse danach erzielen.

Sobald Sie mit den Ergebnissen zufrieden sind, k?nnen Sie die Animation als CSS exportieren und in Ihrem Projekt verwenden.

Sie k?nnen auch das Repository von Bounce.js auf GitHub finden.

Was denkst du?

Mit dem Aufkommen vieler innovativer neuer Ans?tze für Design- und Animationswebsites sind Generatoren wie Bounce.js sehr bequem, insbesondere wenn Sie wertvolle Zeit haben, um solche Animationscode manuell zu schreiben.

Versuchen Sie es und ver?ffentlichen Sie Ihr Experiment im Kommentarbereich. Wir würden gerne Ihre Ergebnisse kennen!

h?ufig gestellte Fragen zu Bounce.js

Wie installiere ich Bounce.js in meinem Projekt?

Um Bounce.js zu installieren, k?nnen Sie NPM oder Bower verwenden. Wenn Sie NPM verwenden, k?nnen Sie den Befehl npm install bounce.js verwenden, um ihn zu installieren. Verwenden Sie für Bower den Befehl bower install bounce.js. Nach der Installation k?nnen Sie sie mit Skript -Tags in eine HTML -Datei aufnehmen.

Kann ich Bounce.js mit anderen JavaScript -Bibliotheken verwenden?

Ja, Bounce.js ist mit anderen JavaScript -Bibliotheken kompatibel. Es st?rt die Funktionalit?t anderer Bibliotheken nicht. Sie k?nnen es mit Bibliotheken wie JQuery, React, Angular und Vue.js.

Wie erstelle ich Animationen mit Bounce.js?

Erstellen einer Animation mit Bounce.js beinhaltet das Erstellen eines neuen Bounce -Objekts und das Hinzufügen von Komponenten. Sie k?nnen Komponenten wie Zoom, Drehen, Pfannen und Neigungen hinzufügen. Nach dem Hinzufügen von Komponenten k?nnen Sie die applyTo -Methode verwenden, um Animation auf Elemente anzuwenden.

Kann ich die Dauer und Verz?gerung der Animation in Bounce.js steuern?

Ja, Bounce.js erm?glicht es Ihnen, die Dauer und Verz?gerung Ihrer Animation zu steuern. Sie k?nnen die Dauer und Verz?gerung mit den Methoden duration bzw. delay festlegen. Die Werte sind in Millisekunden.

Wie kann man Animation in Bounce.js verknüpfen?

Sie k?nnen die chain -Methode verwenden, um die Animation in Bounce.js zu verknüpfen. Mit dieser Methode k?nnen Sie Animationen nacheinander ausführen. Sie k?nnen eine Reihe von Bounce -Objekten an die chain -Methode übergeben, um sie miteinander zu verknüpfen.

Kann ich Bounce.js für reaktionsschnelles Design verwenden?

Ja, Bounce.js kann für reaktionsschnelles Design verwendet werden. Mit Bounce.js erstellte Animationen sind skalierbar und passen sich an verschiedene Bildschirmgr??en an. Sie k?nnen auch Medienabfragen verwenden, um zu steuern, wie sich Animationen auf verschiedenen Ger?ten verhalten.

Wie kann man Animation in Bounce.js stoppen?

Sie k?nnen mit der Methode stop die Animation in Bounce.js stoppen. Diese Methode stoppt die Animation und setzt das Element in ihren Anfangszustand zurück.

Kann ich Bounce.js für komplexe Animationen verwenden?

Ja, Bounce.js kann komplexe Animationen erstellen. Sie k?nnen mehrere Komponenten und Animationen verbinden, um komplexe Effekte zu erzeugen. Dies erfordert jedoch ein gutes Verst?ndnis von Bibliotheken und CSS -Animationen.

Ist Bounce.js mit allen Browsern kompatibel?

Bounce.js ist mit den meisten modernen Browsern kompatibel. Einige Funktionen funktionieren jedoch m?glicherweise nicht in ?lteren Browsern. Es ist am besten, Ihre Animationen in verschiedenen Browsern zu testen, um die Kompatibilit?t zu gew?hrleisten.

Kann ich Bounce.js für kommerzielle Projekte verwenden?

Ja, Bounce.js ist Open Source und ist kostenlos für pers?nliche und kommerzielle Projekte erh?ltlich. Sie k?nnen es verwenden, um Animationen für Ihre Website, Apps, Spiele und andere Projekte zu erstellen.

Das obige ist der detaillierte Inhalt vonBounce.js: Erstellen Sie komplexe CSS -Animationen schnell. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!