JavaScript-basierte Animationen mit Anime.js, Teil 1: Ziele und Eigenschaften

anime.js, eine leichte JavaScript-basierte Animationsbibliothek, mit der die Produktion von CSS-Attributen, SVG- oder DOM-Attributen auf Webseiten animiert werden kann. Mit dieser Bibliothek können Sie Aspekte einer Animation steuern und mehrere Möglichkeiten zum Angeben des Zielelements oder der animierten Eigenschaften bieten.

Sie haben die volle Kontrolle über die Reihenfolge, in der Animationen gespielt werden und wie unterschiedliche Elemente synchronisiert werden. Diese Bibliothek unterstützt alle modernen Browser.

Diese Tutorial -Serie führt Sie durch alle Funktionen von Anime.js, damit Sie sie problemlos auf tatsächliche Projekte anwenden können.

Bevor wir in das Thema eintauchen, installieren wir zuerst die Bibliothek. Sie können mit NPM oder Bower installieren, indem Sie den folgenden Befehl ausführen:

npm install animejs
bower install animejs

Sie können die Bibliothek auch herunterladen und in Ihr Projekt einbeziehen oder direkt mit der neuesten Version der auf dem CDN gehosteten Bibliothek verlinken.

Nachdem die Installation erfolgreich ist, können Sie diese Bibliothek verwenden, um den Elementen interessante Animationen hinzuzufügen. Wir werden mit den Grundlagen der Bibliothek beginnen und uns jeweils auf einen bestimmten Bereich konzentrieren.

Geben Sie das Zielelement

an

Um Animation mit Anime.js zu erstellen, müssen Sie Nodelist anrufen.

Sie können auch Dom -Knoten oder Nodelist als Wert des Span -Tags verwenden. Bisher haben wir dies getan, indem wir manuell eine Wrapper in HTML erstellt haben. Jetzt werden wir lernen, wie man JavaScript dazu bringt, Tags zu verarbeiten. Hier ist unser Titelelement:

<h1 id="Have-a-Great-Day-Ahead">Have a Great Day Ahead</h1>

Es gibt fünf separate Wörter im Titel, und wir wickeln jedes Wort in sein eigenes Spannweite. Weisen Sie das Endergebnis dem Span -Tag zu, das Null sein sollte. Dies ist das CSS, mit dem wir den Titel stylen und die H1 -Span als Selektor verwenden. Der Endwert des Translatey -Attributs. Wir verwenden auch Verschachtelungsverzögerungen bei der Animationsinitialisierung. Sie erfahren im nächsten Tutorial in dieser Serie mehr über die Interview in Anime.js.

Dies ist eine CodePen -Demonstration, die die gerade erstellte Begrüßungsanimation zeigt. Klicken Sie auf die Schaltfläche begrüßen Sie , um die Animation neu zu starten.

Zusammenfassung

In diesem Tutorial haben Sie alle Möglichkeiten gelernt, Zielelemente in Anime.js auszuwählen und wie verschiedene CSS -Attribute und -attribute im Zusammenhang mit Zielelementen animieren können. Zu diesem Zeitpunkt haben wir jedoch keine Kontrolle über irgendetwas, was mit der tatsächlichen Animation zusammenhängt.

Im nächsten Tutorial in dieser Serie lernen Sie, wie Sie die Lockerung, Verzögerung und Dauer der Animationen für verschiedene Attribute (als Gruppen und individuell kontrollieren) kontrollieren. Sie lernen dann, wie Sie alle diese Animationsparameter für jedes Element steuern.

Das obige ist der detaillierte Inhalt vonJavaScript-basierte Animationen mit Anime.js, Teil 1: Ziele und Eigenschaften. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!