Animated API: Was es ist, Bibliotheksfunktionen und Funktionsprinzip

Was ist Animated API in React Native

Animated API ist eine deklarative Animationsbibliothek, die in den Kern von React Native integriert ist und für die Erstellung flüssiger, leistungsstarker Animationen in mobilen Anwendungen entwickelt wurde. Im Gegensatz zu CSS-Animationen in der Webentwicklung arbeitet Animated API direkt mit dem nativen UI-Thread über die JavaScript-Brücke oder den nativen Treiber. Die Bibliothek basiert auf dem Konzept von Animated.Value — einem Container, der einen numerischen Wert speichert und automatisch alle abhängigen Komponenten für Änderungen abonniert. Wenn der Wert über Animated.timing oder Animated.spring geändert wird, berechnet die Bibliothek Zwischenzustände ohne erneutes Rendern von React-Komponenten, was für die Aufrechterhaltung von 60 FPS entscheidend ist. Animated API unterstützt alle Stileigenschaften, einschließlich transform, opacity, width, height, top, left und backgroundColor. Die React Native Dokumentation empfiehlt Animated API für alle Animationsszenarien, die hohe Leistung und vorhersagbares Verhalten auf beiden Plattformen erfordern.

Wie Animated API funktioniert: Value, timing und spring

Die Grundlage von Animated API ist Animated.Value, ein Container für numerische Werte, der über den Konstruktor new Animated.Value(0) initialisiert wird. Jeder Animated.Value speichert eine Startzahl und bietet Animationsmethoden: timing, spring und decay. Die timing-Methode erstellt lineare oder Easing-Animationen mit Parametern für Dauer, Verzögerung und Easing. Die spring-Methode implementiert eine physikalische Federanimation mit Parametern für Reibung, Spannung und Geschwindigkeit. Die decay-Methode erstellt Animationen mit Trägheit und Dämpfung — nützlich für Wisch- und Scrollbewegungen. Alle Methoden geben ein Animated.Composite-Objekt zurück, das über start() gestartet und über stop() gestoppt werden kann. Die Animation wird in einem separaten Thread ausgeführt: Bei useNativeDriver = true erfolgen die Berechnungen im nativen UI-Thread, während der JavaScript-Thread für Ereignisbehandlung und Logik frei bleibt.

Animated.timing: Konfiguration von Dauer und Easing

Animated.timing ist die grundlegende Animationsmethode mit kontrollierter Dauer. Sie akzeptiert Konfiguration: toValue, duration (Standard 500ms), easing (Standard Easing.linear) und delay. Easing-Funktionen aus dem Easing-Modul ermöglichen nichtlineare Beschleunigung: Easing.bezier, Easing.elastic, Easing.bounce. Für gleichmäßige Geschwindigkeit verwenden Sie Easing.linear, für natürliche Beschleunigung Easing.inOut. Wichtig: Animated.timing garantiert, dass die Animation unabhängig von der Geräteauslastung genau zum angegebenen Zeitpunkt bei toValue endet.

Animated.spring: Physikbasierte Animation

Animated.spring implementiert ein Federanimationsmodell basierend auf dem Hookeschen Gesetz. Der Parameter friction (Reibung) steuert die Anzahl der Schwingungen: Je höher die Reibung, desto schneller der Stopp. Der Parameter tension (Spannung) bestimmt die Federsteifigkeit: Hohe Spannung beschleunigt die Bewegung. Der Parameter velocity (Geschwindigkeit) legt die Anfangsgeschwindigkeit für Animationen mit Trägheit fest — entscheidend für Animationen, die Benutzergesten folgen. Animated.spring hat keine feste Dauer — die Animation wird abgeschlossen, wenn Geschwindigkeit und Amplitude Schwellenwerte erreichen.

Animated.View, Animated.Text und andere Komponenten

Animated API bietet vier integrierte animierte Komponenten: Animated.View, Animated.Text, Animated.ScrollView und Animated.Image. Jede ist ein Wrapper über die entsprechende native Komponente, der die Übergabe von Animated.Value an Stileigenschaften unterstützt. Animated.View ist die am häufigsten verwendete Komponente und akzeptiert dieselben Props wie ein normales View, jedoch mit Unterstützung für animierte Werte in style. Animated.Text ist nützlich zum Animieren von Textfarbe oder Buchstabenabständen. Animated.ScrollView ermöglicht das Animieren von scrollTo und contentOffset. Animated.Image unterstützt animierte Transparenz und Skalierung während des Bildladens. Wenn Sie eine andere Komponente animieren möchten, verwenden Sie Animated.createAnimatedComponent(MyComponent).

import React from 'react';
import { Animated, View, Button } from 'react-native';

const FadeInView = () => {
  const opacity = useRef(new Animated.Value(0)).current;

  const fadeIn = () => {
    Animated.timing(opacity, {
      toValue: 1,
      duration: 1000,
      useNativeDriver: true,
    }).start();
  };

  return (
    View
      Animated.View { style: [{ opacity }] }
      Button title="Fade In" onPress={fadeIn}
  );
};

Interpolationssystem: Von Zahlen zu Farbe und Transformationen

Interpolation ist ein Mechanismus zur Umwandlung eines eingehenden numerischen Bereichs von Animated.Value in Ausgabewerte eines anderen Typs. Die Methode interpolate akzeptiert Konfiguration mit inputRange (Array von Eingabewerten) und outputRange (Array von Ausgabewerten). OutputRange-Typen: Zahlen (Koordinaten, Transparenz), Zeichenketten (Rotationswinkel mit 'deg'), Hex-Farben ('#ff0000'), Transformationsobjekte. Die Interpolation unterstützt Easing und extrapolate — Verhalten außerhalb des angegebenen Bereichs (clamp, extend, identity). Beispielsweise können Sie bei einer Ziehgeste die Fingerposition von 0 bis 200 in Transparenz von 1 bis 0 umwandeln und so einen Fade-Effekt beim Wischen erzeugen. Das Interpolationssystem ermöglicht komplexe mehrstufige Animationen: Der Wert 0-0.5-1.0 kann in Gelb-Orange-Rot umgewandelt werden.

const spinValue = new Animated.Value(0);

Animated.timing(spinValue, {
  toValue: 1,
  duration: 3000,
  easing: Easing.linear,
  useNativeDriver: true,
}).start();

const spin = spinValue.interpolate({
  inputRange: [0, 1],
  outputRange: ['0deg', '360deg'],
});

Animationskomposition: Sequenz und Parallelität

Animated API unterstützt drei Animationskompositionsmodi: Animated.sequence, Animated.parallel und Animated.stagger. Animated.sequence führt Animationen nacheinander aus: Jede nächste beginnt nach Abschluss der vorherigen. Animated.parallel führt alle Animationen gleichzeitig mit einem gemeinsamen Abschluss-Callback aus. Animated.stagger führt Animationen mit einer Verzögerung zwischen den Starts aus — nützlich für Welleneffekte. Kompositionen können verschachtelt werden: Sequenz von parallelen Gruppen oder Parallel von Sequenzen. Dies ermöglicht komplexe Ketten: Animation des Erscheinens von Elementen mit Verzögerung, paralleles Slide-in mit Fade-in, dann eine Sequenz von Bounce und Shake.

Animated.sequence([
  Animated.timing(fadeAnim, {
    toValue: 1,
    duration: 500,
    useNativeDriver: true,
  }),
  Animated.parallel([
    Animated.timing(scaleAnim, {
      toValue: 1.1,
      duration: 200,
      useNativeDriver: true,
    }),
    Animated.spring(colorAnim, {
      toValue: 1,
      friction: 4,
      useNativeDriver: true,
    }),
  ]),
]).start();

useNativeDriver und Animationsleistung

useNativeDriver ist eine Animationskonfigurationsoption, die die gesamte Animationslogik vom JavaScript-Thread in den nativen UI-Thread verschiebt. Ohne useNativeDriver werden Animationen über die JavaScript-Brücke ausgeführt: Jede Wertänderung wird an den nativen Thread gesendet, was zu Verzögerungen führt, wenn der JS-Thread mit asynchronen Operationen beschäftigt ist. Mit useNativeDriver = true wird Animated.Value direkt auf der nativen Seite aktualisiert, wodurch der JavaScript-Thread für Ereignisbehandlung, API-Anfragen und React-Abgleich frei bleibt. Einschränkung: useNativeDriver unterstützt nur Nicht-Layout-Eigenschaften — opacity, transform, backgroundColor (via PlatformColor). Für Layout-Eigenschaften (width, height, top, left) ist NativeAnimatedModule oder LayoutAnimation erforderlich. Laut React Native 0.76 werden alle animierten Eigenschaften über den nativen Treiber unterstützt, außer layout-basierten. Der useNativeDriver-Modus wird für alle Animationen empfohlen, wo möglich — er steigert die FPS von 30-40 auf stabile 60.

Gestengetriebene Animation: PanResponder und Gesture Handler

PanResponder ist ein integriertes React Native System zur Gestenverarbeitung, das gut mit Animated API zusammenarbeitet. PanResponder bietet Callbacks onPanResponderMove und onPanResponderRelease, bei denen Animated.Value basierend auf der Fingerposition aktualisiert werden kann. Für komplexere Gesten — Wischen, Ziehen, Drehen — verwenden Sie die Bibliothek react-native-gesture-handler, die synchron mit Animationen arbeitet und 60 FPS selbst bei Mehrfinger-Gesten bietet. Gesture Handler stellt Animated.event zur Verfügung — eine Methode, die eine Geste direkt ohne manuelle Callback-Behandlung an Animated.Value bindet. Die Kombination von Gesture Handler + Animated API ist der Industriestandard für interaktive Animationen in React Native Anwendungen.

Animated.event: Binden von Gesten an Werte

Animated.event ist eine Methode, die ein natives Ereignis (z.B. gestureEvent) direkt an Animated.Value bindet. Im Gegensatz zur manuellen Behandlung in Callbacks arbeitet Animated.event synchron im nativen Thread und benötigt nicht für jeden Frame die JavaScript-Brücke. Dies ermöglicht flüssige Animationen selbst bei schnellen Wischbewegungen. Animated.event akzeptiert ein Array von Mappings, wobei jedes Element ein Ereignisfeld an Animated.Value bindet. Verschachtelter Zugriff wird unterstützt: Animated.event([{ nativeEvent: { translationX: xValue } }]).

Codebeispiele mit Animated API

Betrachten wir drei praktische Beispiele für die Verwendung von Animated API in React Native Projekten. Das erste Beispiel ist eine Karten-Erscheinungsanimation mit einer Opacity + translateY Sequenz. Das zweite Beispiel ist eine Puls-Animation eines Buttons mit spring. Das dritte Beispiel ist ein interaktives Ziehelement mit PanResponder. Alle Beispiele verwenden useNativeDriver = true und folgen den Best Practices von React Native 0.76.

const CardWithAnimation = () => {
  const anim = useRef(new Animated.Value(0)).current;

  React.useEffect(() => {
    Animated.spring(anim, {
      toValue: 1,
      friction: 6,
      tension: 40,
      useNativeDriver: true,
    }).start();
  }, []);

  const translateY = anim.interpolate({
    inputRange: [0, 1],
    outputRange: [50, 0],
  });

  return (
    Animated.View {
      style: [{ opacity: anim, transform: [{ translateY }] }]
    }
  );
};

Puls-Animation mit spring

Spring-Animation erzeugt einen natürlichen Pulseffekt durch ein physikalisches Federmodell. Niedrige Reibung (2-4) und hohe Spannung (100-150) erzeugen weiche Schwingungen, die natürlich abklingen. Verwenden Sie Animated.loop für endloses Pulsieren mit einem Sequenzzyklus: scale → 1.2, scale → 1.0. Pulsieren wird für Ladeindikatoren, Benachrichtigungen und Akzentbuttons verwendet.