So fügen Sie Rive-Animationen zu einer Webseite hinzu

Wollten Sie schon immer etwas Lebendiges auf Ihrer Webseite haben, nicht nur statische Inhalte und Bilder? Möchten Sie Ihre Website mit etwas optischem Reiz und Interaktivität aufpeppen? Mit Rive können Sie atemberaubende Animationen und Interaktionen auf Ihrer Website erstellen. Dieser Beitrag führt Sie durch die Schritte und enthält ein Beispiel dafür, wie Sie Rive-Animationen in Ihre Webseite einbetten können.

Warum Rive wählen?

Was macht Rive so gut, wenn es um Animationen geht und wie wir die Anwendung auf Ihrer Webseite verwenden können, aber zuerst wollen wir ein paar Dinge durchgehen, bevor wir uns unser Tutorial ansehen. Rive ist ein leistungsstarkes Animationstool, mit dem Sie anspruchsvolle Animationen ohne Code erstellen können. Mit Rive können Sie:

• Erstellen Sie Animationen, die auf Benutzereingaben reagieren
• Entwickeln Sie ansprechende Animationen für verschiedene Geräte- und Bildschirmgrößen
• Exportieren Sie Animationen als HTML/ CSS/ JS

SCHRITT 1: Entwerfen Sie Ihre Animation

Gehen Sie zunächst zur Rive.-Bibliothek und erstellen Sie eine neue Animation. Rive hat viele tolle Vorlagen und Beispiele, um Ihnen den Einstieg zu erleichtern oder Ihre Animation von Grund auf neu zu entwerfen.

Verwenden Sie den benutzerfreundlichen Editor von Rive, um komplexere Funktionen wie Formen, Text oder etwas anderes in Ihre Animation einzufügen und verschiedene Animationstypen und -effekte auszuprobieren.

Weitere Informationen zum Erstellen von Animationen in Rive finden Sie in unserem Artikel Erstellen eines animierten Logos in Rive: Eine Kurzanleitung

SCHRITT 2: Exportieren Sie Ihre Animation

Nachdem Sie alle Ihre Animationen erstellt haben, klicken Sie in Rive auf die Schaltfläche „Exportieren“.

SCHRITT 3: Installation

Im ersten Abschnitt müssen Sie abhängige Pakete installieren. Es gibt zwei Möglichkeiten, dies zu erreichen:

Methode 1: Skript-Tag-Installation Fügen Sie einfach das folgende Skript-Tag in Ihre HTML-Datei ein.

<script src="https://unpkg.com/@rive-app/canvas@2.17.3"></script>

Methode 2: npm/yarn Installation Führen Sie den folgenden Befehl in Ihrem Terminal aus:

npm install @rive-app/canvas

import * as rive from "@rive-app/canvas";

SCHRITT 4: Erstellen Sie eine Rive-Instanz

Jetzt, da Sie die Abhängigkeit installiert haben, ist es an der Zeit, eine Instanz Ihrer Grafik zu erstellen. Die folgenden Eigenschaften müssen Sie angeben:

src: Die URL oder der Pfad zur RIV-Datei.

Leinwand: Das Canvas-Element, in dem die Animation gespeichert wird.

automatisches Abspielen: Ein boolescher Wert, der feststellt, ob die Animation ohne Benutzereingriff abgespielt werden soll.

Staatliche Maschinen: Name der Statemachine, die gespielt werden soll.

Einfaches Beispiel für die Erstellung einer Rive-Instanz

<script>     const r = new rive.Rive({
         src: "https://cdn.rive.app/animations/vehicles.riv",
         // OR the path to a discoverable and public Rive asset
         // src: '/public/example.riv',
         canvas: document.getElementById("canvas"),
         autoplay: true,
         stateMachines: "bumpy",
         onLoad: () => {
           r.resizeDrawingSurfaceToCanvas();
         },
     }); </script>

SCHRITT 5: Laden von Rive-Dateien

Rive-Dateien werden auf drei Arten geladen.

Gehostete URL: Laden Sie die .riv-Datei von einer gehosteten URL, indem Sie das src-Attribut setzen.

Statische Vermögenswerte: Laden Sie die .riv-Datei als statisches Asset in Ihr Webprojekt.

Eine Datei abrufen: Laden Sie die .riv-Datei als ArrayBuffer mithilfe des buffer-Attributs.

SCHRITT 6: Rive aufräumen

Wenn Sie mit der Anzeige der Leinwand fertig sind (und sie nicht mehr am Leben erhalten müssen), vergessen Sie nicht, Ihre Rive-Instanz zu bereinigen. Bereinigen Sie die Rive-Instanz, indem Sie Folgendes aufrufen:

const riveInstance = new Rive({...)); ... // When ready to cleanup riveInstance.cleanup();

So integrieren Sie Rive-Animationen in Webflow

So können Sie Rive-Animationen für Webflow verwenden

1. Klicken Sie in Rive unten im Menü auf Link zum Teilen generieren, nachdem Sie Ihre Animation erstellt haben, und kopieren Sie dann den Iframe-Einbettungscode.
2. Webflow einbetten: Im Elementbereich Ihres Projekts in Webflow müssen Sie auf Einbetten klicken und es dann dort platzieren, wo es für diesen Teil des Inhalts auf der Webseite am besten geeignet ist.
3. Platzieren Sie die Animation: Fügen Sie Ihre Animation an einer beliebigen Stelle in Webflow hinzu

Für genauere Anleitungen können Sie jederzeit auf unseren vorherigen Beitrag verweisen: So integrieren Sie Rive-Animationen in Webflow-Seiten.

Abschließend

Mit diesen wenigen einfachen Schritten können Sie hervorragende Rive-Animationen auf Ihrer Webseite haben und die Benutzererfahrung verbessern. Warum also warten? Fangen Sie noch heute an, Rive zu verwenden und verleihen Sie Ihren Animationen den Wow-Faktor