Animated API: vad är det, bibliotekets möjligheter och arbetsprincip

Vad är Animated API i React Native

Animated API är ett deklarativt animationsbibliotek inbäddat i kärnan av React Native, utformat för att skapa smidiga, högpresterande animationer i mobilapplikationer. Till skillnad från CSS-animationer inom webbutveckling arbetar Animated API direkt med den inbyggda UI-tråden via JavaScript-bryggan eller den inbyggda drivrutinen. Biblioteket är byggt kring konceptet Animated.Value — en behållare som lagrar ett numeriskt värde och automatiskt prenumererar alla beroende komponenter på ändringar. När värdet ändras via Animated.timing eller Animated.spring beräknar biblioteket mellanliggande tillstånd utan att återrendera React-komponenter, vilket är avgörande för att upprätthålla 60 FPS. Animated API stöder alla stilegenskaper, inklusive transform, opacity, width, height, top, left och backgroundColor. React Native-dokumentationen rekommenderar Animated API för alla animationsscenarier där hög prestanda och förutsägbart beteende krävs på båda plattformarna.

Hur Animated API fungerar: Value, timing och spring

Grunden för Animated API är Animated.Value, en behållare för numeriska värden som initieras via konstruktorn new Animated.Value(0). Varje Animated.Value lagrar ett starttal och tillhandahåller animationsmetoder: timing, spring och decay. Timing-metoden skapar en linjär eller easing-animation med parametrarna duration, delay och easing. Spring-metoden implementerar en fysisk fjäderanimation med parametrarna friction, tension och velocity. Decay-metoden skapar en animation med tröghet och dämpning — användbar för svepningar och rullning. Alla metoder returnerar ett Animated.Composite-objekt som kan startas via start() och stoppas via stop(). Animationen körs i en separat tråd: vid användning av useNativeDriver = true sker beräkningarna i den inbyggda UI-tråden, JavaScript-tråden förblir fri för att bearbeta händelser och logik.

Animated.timing: konfiguration av varaktighet och easing

Animated.timing är den grundläggande animationsmetoden med kontrollerad varaktighet. Accepterar konfiguration: toValue, duration (standard 500ms), easing (standard Easing.linear) och delay. Easing-funktioner från Easing-modulen möjliggör olinjär acceleration: Easing.bezier, Easing.elastic, Easing.bounce. För animation med jämn hastighet använd Easing.linear, för naturlig acceleration — Easing.inOut. Viktigt: Animated.timing garanterar att animationen slutar exakt vid toValue inom den angivna tiden, oavsett enhetens belastning.

Animated.spring: fysisk animation

Animated.spring implementerar en fjäderbaserad animationsmodell baserad på Hookes lag. Parametern friction (friktion) styr antalet svängningar: ju högre friction, desto snabbare stopp. Parametern tension (spänning) bestämmer fjäderns styvhet: hög tension påskyndar rörelsen. Parametern velocity anger starthastigheten för animation med tröghet — avgörande för animationer som följer användarens gest. Animated.spring har ingen fast varaktighet — animationen avslutas när hastigheten och amplituden når tröskelvärden.

Animated.View, Animated.Text och andra komponenter

Animated API tillhandahåller fyra inbyggda animerade komponenter: Animated.View, Animated.Text, Animated.ScrollView och Animated.Image. Var och en är ett omslag kring motsvarande inbyggda komponent som stöder överföring av Animated.Value i stilegenskaper. Animated.View är den mest använda komponenten, accepterar samma props som en vanlig View, men med stöd för animerade värden i style. Animated.Text är användbar för animering av textfärg eller mellanrum mellan bokstäver. Animated.ScrollView möjliggör animering av scrollTo och contentOffset. Animated.Image stöder animerad genomskinlighet och skala vid bildladdning. Om du behöver animera en annan komponent, använd 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: från tal till färg och transformationer

Interpolation är en mekanism för att omvandla det inmatade numeriska intervallet för Animated.Value till utdatavärden av en annan typ. Metoden interpolate accepterar konfiguration med inputRange (matris av inmatningsvärden) och outputRange (matris av utdatavärden). Utdatatyper: tal (koordinater, genomskinlighet), strängar (rotationsvinklar med 'deg'), hex-färger ('#ff0000'), transformationsobjekt. Interpolation stöder easing och extrapolate — beteende utanför det angivna intervallet (clamp, extend, identity). Till exempel, vid en drag-gester kan fingrets position från 0 till 200 omvandlas till genomskinlighet från 1 till 0, vilket skapar en fade-effekt vid svepning. Interpolationssystemet gör det möjligt att skapa komplexa flerstegsanimationer: värdet 0-0.5-1.0 kan omvandlas till gult-orange-rött.

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'],
});

Komposition av animationer: sekvens och parallellitet

Animated API stöder tre kompositionslägen för animationer: Animated.sequence, Animated.parallel och Animated.stagger. Animated.sequence startar animationer en efter en: varje nästa börjar efter att den föregående har slutförts. Animated.parallel startar alla animationer samtidigt med en gemensam slutförandecallback. Animated.stagger startar animationer med en fördröjning mellan varje start — fördröjd start, användbar för att skapa vågeffekter. Kompositioner kan kapslas in i varandra: sequence av parallel-grupper eller parallel av sequence. Detta gör det möjligt att skapa komplexa kedjor: animation av element som visas med fördröjning, parallell slide-in med fade-in, sedan sequence av bounce och 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 och animationsprestanda

useNativeDriver är ett konfigurationsalternativ för animation som flyttar hela animationslogiken från JavaScript-tråden till den inbyggda UI-tråden. Utan useNativeDriver körs animationer via JavaScript-bryggan: varje värdeändring skickas till den inbyggda tråden, vilket orsakar fördröjningar när JS-tråden är belastad med asynkrona operationer. Med useNativeDriver = true uppdateras Animated.Value direkt på den inbyggda sidan och JavaScript-tråden förblir fri för att bearbeta händelser, API-förfrågningar och React-rekonciliering. Begränsning: useNativeDriver stöder endast icke-layout-egenskaper — opacity, transform, backgroundColor (via PlatformColor). För layout-egenskaper (width, height, top, left) krävs NativeAnimatedModule eller LayoutAnimation. Enligt React Native 0.76 stöds alla animerade egenskaper utom layout-baserade via den inbyggda drivrutinen. useNativeDriver-läget rekommenderas för alla animationer där det är möjligt — detta höjer FPS från 30-40 till stabila 60.

Animering med gester: PanResponder och Gesture Handler

PanResponder är ett inbyggt React Native-system för gestbearbetning som integreras utmärkt med Animated API. PanResponder tillhandahåller callbacks onPanResponderMove och onPanResponderRelease där Animated.Value kan uppdateras baserat på fingerpositionen. För mer komplexa gester — svep, nyp, rotation — använd biblioteket react-native-gesture-handler, som arbetar synkront med animationer och säkerställer 60 FPS även vid flerfingersgester. Gesture Handler tillhandahåller Animated.event — en metod som direkt kopplar gesten till Animated.Value utan manuell callback-bearbetning. Kombinationen Gesture Handler + Animated API är industristandard för interaktiva animationer i React Native-applikationer.

Animated.event: koppla gester till värden

Animated.event är en metod som kopplar den inbyggda händelsen (t.ex. gestureEvent) direkt till Animated.Value. Till skillnad från manuell bearbetning i en callback arbetar Animated.event synkront i den inbyggda tråden och kräver ingen JavaScript-brygga för varje bildruta. Detta ger smidig animering även vid snabba svepningar. Animated.event accepterar en matris av mappningar, där varje element kopplar ett händelsefält till Animated.Value. Kapslad åtkomst stöds: Animated.event([{ nativeEvent: { translationX: xValue } }]).

Kodexempel med Animated API

Låt oss titta på tre praktiska exempel på användning av Animated API i React Native-projekt. Det första exemplet — en animering av ett kort som visas med en sekvens av opacity + translateY. Det andra exemplet — en pulserande knappanimation med spring. Det tredje exemplet — ett interaktivt dragelement med PanResponder. Alla exempel använder useNativeDriver = true och följer bästa praxis för 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 }] }]
    }
  );
};

Pulserande animation via spring

Spring-animation skapar en naturlig pulseringseffekt tack vare den fysiska fjädermodellen. Inställning av låg friction (2-4) och hög tension (100-150) ger mjuka svängningar som dämpas naturligt. Använd Animated.loop för oändlig pulsering med en sequence-cykel: scale → 1.2, scale → 1.0. Pulsering används för laddningsindikatorer, aviseringar och accentknappar.