Wie funktionieren Animationen in React Native?

Question

Accepted Answer

React Native unterstützt **Animationen** über die integrierte **Animated**-API und die beliebte **Reanimated**-Bibliothek. Animationen verbessern die UX mit flüssigen Bewegungen und Übergängen. Die Leistung (Ausführung von Animationen im nativen Thread) ist eine wichtige Überlegung. ## The Animated API (built-in) ```jsx import { Animated } from 'react-native'; const fadeAnim = useRef(new Animated.Value(0)).current; // an animated value // animate it (e.g. fade in) Animated.timing(fadeAnim, { toValue: 1, duration: 500, useNativeDriver: true, // run on the NATIVE thread (smooth — important!) }).start(); // apply it to a component ... ``` Die **Animated**-API verwendet animierte Werte, die auf `Animated.View` usw. angewendet werden. Der entscheidende `useNativeDriver: true` führt die Animation im **nativen Thread** aus (flüssig, nicht blockiert durch JS). ## Reanimated (empfohlen für komplexe Animationen) ```text REACT NATIVE REANIMATED → a popular library for performant, complex animations: → runs animations on the native/UI thread (smooth, off the JS thread) → supports gestures (with react-native-gesture-handler), worklets, spring physics → better for complex, interactive, gesture-driven animations than the basic Animated API → The go-to for advanced animations in React Native. ``` ## Warum es wichtig ist ```text ⚠️ Animations driven by the JS thread can be JANKY (the JS thread is busy / blocked) → → useNativeDriver (Animated) or Reanimated run animations on the NATIVE/UI thread → smooth even if JS is busy → Running animations natively (not on the JS thread) is KEY to smooth animations in RN. ``` Das Verständnis von Animationen in React Native ist wertvoll, weil **Animationen die Nutzererfahrung** mit flüssigen Bewegungen und Übergängen verbessern, die Apps poliert wirken lassen, daher ist es praktisches Wissenswert — und die Leistungsaspekte sind besonders wichtig in React Native. Die integrierte **Animated**-API (mit animierten Werten, die auf Animated-Komponenten angewendet werden) bietet die Grundlage für Animationen. Entscheidend ist das Verständnis des Leistungsaspekts — dass **Animationen, die vom JavaScript-Thread angetrieben werden, ruckelnd sein können** (wenn der JS-Thread beschäftigt ist) und dass die Ausführung von Animationen im **nativen/UI-Thread** (über `useNativeDriver: true` in Animated oder über Reanimated) sie flüssig hält, auch wenn JS beschäftigt ist — dies ist die Schlüsseleinsicht für performante Animationen in React Native, eine wichtige Überlegung angesichts des JS/Native-Threading-Modells von React Native. Das Verständnis von **Reanimated** (die beliebte Bibliothek für performante, komplexe, gesteuerte Animationen, die im nativen Thread ausgeführt wird und Worklets, Spring-Physik und Gesten unterstützt) ist wertvoll, weil es das **Standard-Tool für erweiterte Animationen** in React Native ist, besser als die grundlegende Animated-API für komplexe interaktive Animationen. Das Verständnis beider — der integrierte Animated-API (mit useNativeDriver) für einfachere Animationen und Reanimated für komplexe, beide mit Fokus auf native Ausführung für Flüssigkeit — deckt das Animations-Toolkit ab. Polierte Animationen verbessern die UX wesentlich, und sie flüssig zu gestalten (durch native Ausführung im Thread) ist die Schlüsselherausforderung, die die Architektur von React Native darstellt. Da flüssige Animationen die UX verbessern und die Animationsleistung von React Native entscheidend davon abhängt, Animationen im nativen Thread auszuführen (über useNativeDriver oder Reanimated), und da das Verständnis der Animated-API, Reanimated und besonders des nativen-Thread-Leistungsaspekts das Erstellen flüssiger Animationen ermöglicht, ist das Verständnis von Animationen in React Native wertvoll, praktisch relevantes Wissen — nützlich für die Verbesserung der UX mit Bewegung, wobei die React-Native-spezifische Überlegung der nativen Ausführung von Animationen für Flüssigkeit besonders wichtig ist, eine wertvolle Fähigkeit für das Erstellen polierter React Native Apps.