© naum/Shutterstock.com
Framer Motion: Animationen für React-Anwendungen

Reactiver Pixelversatz


Animationen nachträglich in Anwendungen einzufügen, kann mit viel Aufwand verbunden sein. Für React-Entwickler gibt es hier aber Abhilfe in Form der Bibliothek Framer Motion. Diese erlaubt es, mit vergleichsweise wenig Mühe pixelversetzende Akzente zu setzen. Ein Überblick.

Framer Motion ist eine Animationsbibliothek für React-Webanwendungen, die ab React Version 16.8 einsetzbar ist. Entstanden ist die Bibliothek gemeinsam mit Framer, einem Prototyping-Tool, das eine schnelle, codefreie und effiziente Gestaltung von Beispielbenutzeroberflächen erlaubt, auch verteilt für mehrere Benutzer in Kollaboration [1]. Die Bibliothek Framer Motion [2] kümmert sich innerhalb dieses Prototyping-Tools um alle Animationen von Steuerelementen, etwa von Texten, Buttons und Containern und ist als API-Bibliothek zur allgemeinen Verwendung in Webapplikationen Open Source unter der MIT-License für React verfügbar. Das API der Bibliothek kann unabhängig in jedem React-Projekt verankert werden. Es wird durch die Verwendung von sogenannten Motion Components in die Anwendung integriert. Diese Motion Components werden in die HTML-Elemente des Komponentenbaum als Prefix eingebunden und erweitern diese um Animationen, also zum Beispiel um bestimmte Bewegungsabläufe. Damit ist der Einsatz der Bibliothek sowohl punktuell als auch für umfassende Blöcke möglich, zum Beispiel durch Einbindung in einen <div/>-Layer. Intern greifen die Motion Components in den DOM-Baum der Applikation ein und manipulieren die CSS Styles der Elemente, sodass Animationsabläufe zustande kommen. Weiterhin ist die Manipulation von SVGs möglich, sodass beispielsweise auch Icons oder Grafiken animiert werden können.

Die Motion Components erhalten vom Entwickler Attribute, die alle Eigenschaften der gewünschten Animation spezifizieren. Über die später vorgestellten Variants lassen sich Animationsattribute auch gebündelt an verschiedene Motion Components übertragen, somit ist eine Orchestrierung ähnlich einer CSS-Style-Definition möglich.

Die Beispielanwendung

Das vorliegende Beispiel dient zur Demonstration, wie sich eine bestehende React-Geschäftsanwendung um Animationen erweitern lässt. Die Anwendung ist bereits entwickelt und funktional getestet und soll nun zusätzlich um Animationen per Framer Motion erweitert werden. Konkret handelt es sich um die Beispielanwendung SimpleTODO, die Ihre Funktionen über mehrere Seiten verteilt anbietet und bereits ein CSS3-Responsive-Layout besitzt, jedoch ohne jegliche Animationen von Steuerelementen auskommt (Abb. 1).

krypczyk_mittmann_framer_1.pngAbb. 1: Die Beispielanwendung SimpleTODO soll um Animationen erweitert werden

Nach einer Startseite, die eine Begrüßung an die Nutzer enthält, gibt es eine Listenansicht aller To-do-Einträge sowie eine Erfassungsmaske für einen neuen Eintrag. Der Nutzer kann To-dos speichern, erledigen und löschen. Eine Übersicht über den React-Komponentenbaum der Beispielanwendung zeigt Abbildung 2.

krypczyk_mittmann_framer_2.pngAbb. 2: Der Komponentenbaum der Beispielanwendung SimpleTODO

Die Einzelseiten sind mittels React Router [3] miteinander verlinkt, die Navigationswege werden innerhalb der Komponente App in einer React Router Switch Declaration vereinbart. Hinzu kommen ein Header- bzw. Footer-Bereich, die jeder Seite der Anwendung statisch zugeordnet sind. Die Komponente App besitzt die Statusvariable todos, die in einem useState Hook initial und mit Beispieldaten definiert wird. Hinzu kommen die Funktionen addTodo, completeTodo und removeTodo, die respektiv an die nutzenden Komponenten TODOList und TODOForm per Parameterreferenzierung übertragen werden. Ein Ausschnitt aus dem Quellcode der App-Komponente befindet sich in Listing 1.

Listing 1: Quellcodeausschnitt der App-Komponente (App.js).

function App() { const [todos, setTodos] = React.useState([ { name: 'Erstelle Beispiel-Anwendung', description: 'Animationen nicht vergessen!', isCompleted: false }, [...] ]) const addTodo = (inputs) => { const newTodos = [...todos, inputs ]; setTodos(newTodos); } const completeTodo = (index) => { const newTodos = [...todos]; newTodos[index].isCompleted = true; setTodos(newTodos); } const removeTodo = (index) => { const newTodos = [...todos]; newTodos.splice(index, 1); setTodos(newTodos); } return ( <React.Fragment> <Header /> <Switch> <Route path="/list"> <TODOList todos={todos} completeTodo={completeTodo} removeTodo={removeTodo} /> </Route> <Route path="/new"> <TODOForm addTodo={addTodo} /> </Route> <Route path="/"> <StartPage /> </Route> </Switch> <Footer /> </React.Fragment> ) }

Die Beispielanwendung und die Animationsbeispiele stehen auf GitHub zur Verfügung [4]. Der Master-Branch im Repository enthält die Webanwendung ohne Animationen als Start. Zu den jeweiligen Abschnitten des Artikels existieren thematisch weitere Branches. Ist das Repository heruntergeladen und liegt es auf der lokalen Festplatte in einem Ordner, kann es mit den folgenden Befehlen installiert und gestartet werden. Wie bei React-Webanwendungen üblich wird vorausgesetzt, dass Node.js und npm lokal installiert sind:

npm install npm start

Der erste Befehl installiert die Anwendung und lädt dabei per npm alle benötigten Bibliotheken herunter. Mit der zweiten Anweisung wird der lokale Entwicklungsserver per Node.js gestartet und dieser hostet die Beispielanwendung. Diese ist dann unter http://localhost:3000 lokal verfügbar. Der Quellcode der Beispielanwendung kann in der Entwicklungsumgebung Visual Studio Code [5] oder in einem anderen Texteditor geöffnet und während der Laufzeit des Entwicklungsservers editiert werden (Hot Reload). Wenn die Beispielanwendung geladen und der Quellcode geöffnet ist, kann mit den ersten Schritten zum Einsatz der Animationsbibliothek begonnen werden.

Eine erste Animation

Um Elemente oder Bereiche einer Seite zu animieren, sind zunächst einige grundlegende Überlegungen nötig. Hierzu hilft der Exkurs im Kasten „Grundlagen von Animationen“.

Grundlagen von Animationen

Eine Animation ist eine fortlaufende Anzeige einer Sequenz von Einzelbildern. Wenn diese in der notwendigen Geschwindigkeit stattfindet, bildet sie einen Bewegungsablauf ab, bei mindestens 24 Bilder in der Sekunde entsteht eine flüssige Bewegung. Framer Motion bietet die Möglichkeit, im Rahmen einer React-Webanwendung Animationen zu definieren und diese innerhalb der Komponenten im Browser zu rendern. Die folgenden vier Gesichtspunkte müssen für jede Animationskonfiguration betrachtet werden:

  • Zielbereich: Steuerelement(e) oder Seitenbereich des Anwendungs-UI, der animiert werden soll. In Framer Motion sind diese als Motion Components benannt.

  • Auslösepunkt der Animation: Im einfachsten Fall ist der Auslösepunkt das Laden einer Anwendungsseite (React-Komponente). Die Animation kann jedoch auch über ein Ereignis, wie ein Klick auf einen Button, das Eintreten eines Zeitpunktes oder das Überfahren eines Steuerelementes mit dem Mauspfeil ausgelöst werden. In Framer Motion werden diese Ereignisse Gestures genannt.

  • Art und Weise der Animation: Das ist wohl der komplexeste Punkt. Hier kann im einfachsten Fall eine Größen- oder eine Positionsänderung definiert bzw. konfiguriert werden. Komplexe Szenarien bedienen sich verschiedener Key-Frames, die eine Animationsabfolge kennzeichnen. Eine Animation hat immer eine Startposition der betroffenen Motion Component und einen definierten Endpunkt.

  • Zeitdauer und ggf. Wiederholung der Animation: Neben der Zeitdauer des Ablaufs einer Animation von Start bis Ende kann definiert werden, ob die Animation für eine bestimmte Anzahl oder endlos wiederholt werden soll.

Framer Motion bietet für alle genannten Gesichtspunkte Konfigurationseigenschaften an. Es empfiehlt sich bei komplexeren und vielfältigen Animationskonfigurationen der Einsatz von Variants, um gleichartige Animationskonfigurationen zusammenzufassen und wiederholt verwendbar zu machen. Framer Motion nutzt die Möglichkeiten des Browsers, für Animationen die GPU-Leistung der im System vorhandenen Hardwarebeschleunigung einzusetzen. So werden, entsprechende Rechenleistung vorausgesetzt, Animationen mit bis zu 60 fps (frames per second) durch den Browser gerendert.

Um Framer Motion als Bibliothek nutzen zu können, muss sie in gewohnter Manier für die Applikation per npm installiert werden:

npm install framer-motion

Innerhalb einer React-Komponente wird die Bibliothek als zentraler Import eingebunden und kann dann verwendet werden:

import { motion } from 'framer-motion';

Wie bereits in der Einführung beschrieben, arbeitet Framer Motion mit Motion Components, die statt der gleichnamigen HTML-Elemente verwendet und für die eine Animationskonfiguration hinterlegt werden können. So kann beispielsweise die <H1/>-Überschrift...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang