Bounce.js: Erstellen Sie komplexe CSS -Animationen schnell

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!