Animated.Value og Animated.View
Opret en Animated.Value, styr den med Animated.timing, og forbind den med style-proppen på en Animated.View for at animere gennemsigtigheden ved montering.
Animated.Value og Animated.View er en gratis React Native Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i React Native Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Native Academy-kurset indeholder 4 lektioner i alt.
Hvad er Animated API?
Animated API er React Natives indbyggede bibliotek til at skabe jævne animationer med høj ydeevne. Det fungerer ved at holde styr på særlige animerede værdier, som kan styres af tids- eller fysikmotorer og derefter forbindes med komponenters stilegenskaber. I modsætning til CSS-overgange på internettet udtrykkes React Native-animationer udelukkende i JavaScript, men de kan flyttes til native-tråde for at forbedre ydeevnen.
Animated API følger med i alle React Native-installationer — der kræves ingen ekstra pakker. Du importerer det direkte fra react-native.
import { Animated, View } from 'react-native';Oprettelse af en Animated.Value
Den grundlæggende byggesten er Animated.Value, som indeholder en numerisk værdi, der kan ændre sig over tid. Du opretter en med new Animated.Value(initialValue) og gemmer den i en ref, så den bevares på tværs af gengivelser uden selv at udløse nye gengivelser.
Det anbefalede mønster er at bruge useRef, fordi den animerede værdi kan ændres — du vil have det samme objekt gennem hele komponentens levetid. Hvis du initialiserer den i useState, oprettes der en ny værdi ved hver gengivelse.
import React, { useRef } from 'react';
import { Animated } from 'react-native';
function MyComponent() {
const opacity = useRef(new Animated.Value(0)).current;
// opacity is an Animated.Value starting at 0
}Animated.View: Den animerede container
Animated.View er en særlig version af View, hvis style-egenskab kan modtage referencer til Animated.Value. Når den animerede værdi ændres, opdateres visningen uden at gennemgå Reacts normale afstemningscyklus, hvilket gør den meget effektiv.
Der findes også animerede versioner af andre kernekomponenter: Animated.Text, Animated.Image og Animated.ScrollView. Du kan også oprette animerede versioner af brugerdefinerede komponenter med Animated.createAnimatedComponent().
import { Animated, StyleSheet } from 'react-native';
function FadeBox({ opacity }) {
return (
<Animated.View style={[styles.box, { opacity }]}>
</Animated.View>
);
}Styring af animation med Animated.timing
Animated.timing ændrer gradvist en Animated.Value fra dens aktuelle værdi til en mål-værdi over en angivet varighed. Den modtager et konfigurationsobjekt med toValue, duration og en valgfri easing-funktion.
Et kald til .start() starter animationen. Du kan sende en callback til .start(callback), som udføres, når animationen er færdig. Det er nyttigt til at kæde effekter sammen eller opdatere tilstanden, efter at en animation er afsluttet.
import { Animated, Easing } from 'react-native';
Animated.timing(opacity, {
toValue: 1,
duration: 800,
easing: Easing.ease,
useNativeDriver: true,
}).start(() => {
console.log('Fade in complete!');
});Eksempel på indtoning ved montering
Et klassisk eksempel er at tone en komponent ind, når den monteres første gang. Du initialiserer opacitetsværdien til 0 og kører en timing-animation til 1 i useEffect med et tomt afhængighedsarray, så den kun udføres én gang, efter at komponenten er gengivet.
Komponenten gengives med det samme (usynlig ved opacitet 0) og bliver derefter gradvist synlig i løbet af animationens varighed. Denne teknik forhindrer pludselige blink af indhold, når data indlæses langsomt.
import React, { useRef, useEffect } from 'react';
import { Animated, View, Text } from 'react-native';
export default function FadeIn() {
const opacity = useRef(new Animated.Value(0)).current;
useEffect(() => {
Animated.timing(opacity, {
toValue: 1,
duration: 600,
useNativeDriver: true,
}).start();
}, []);
return (
<Animated.View style={{ opacity }}>
<Text>Hello World</Text>
</Animated.View>
);
}Udtoning og betinget synlighed
Animeret opacitet bruges også til at skjule komponenter. Hvis du toner til opacitet 0, bliver komponenten i layoutet (den optager plads), mens den gøres usynlig. Hvis du vil fjerne den helt efter udtoningen, skal du opdatere en tilstandsvariabel i animationens callback, når den er færdig.
Dette mønster er almindeligt for modaler, toastbeskeder og notifikationer, der skal animeres ud, før de afmonteres fra komponenttræet.
const [visible, setVisible] = React.useState(true);
function fadeOut() {
Animated.timing(opacity, {
toValue: 0,
duration: 400,
useNativeDriver: true,
}).start(() => setVisible(false));
}
return visible ? (
<Animated.View style={{ opacity }}>
<Text>I will fade away</Text>
</Animated.View>
) : null;Flytning af position med translateX/Y
Ud over opacitet kan Animated.Value styre positions-transformeringer som translateX og translateY. Transformeringer anvendes i stilarrayet transform. Det gør det muligt at lade elementer glide ind på skærmen fra alle retninger.
Det er afgørende for ydeevnen at bruge transformeringer i stedet for at ændre left eller top, fordi transformeringer ikke udløser en layoutberegning — de sammensættes på GPU'en, så der kan opnås animationer med 60 billeder i sekundet, selv på mindre kraftige enheder.
const translateY = useRef(new Animated.Value(100)).current;
useEffect(() => {
Animated.timing(translateY, {
toValue: 0,
duration: 500,
useNativeDriver: true,
}).start();
}, []);
return (
<Animated.View style={{ transform: [{ translateY }] }}>
<Text>Slides up from bottom</Text>
</Animated.View>
);Skalering af komponenter med scale-transformering
scale-transformeringen forstørrer eller formindsker en komponent omkring dens centrum. Hvis du starter en komponent ved scale: 0 og animerer til 1, skaber det en indpopningseffekt, mens en animation fra 1 til 0 skaber en udpopningseffekt.
Skaleringsanimationer føles naturlige ved bekræftelseshandlinger, for eksempel en hjerteknap i en social app eller et flueben, der vises efter en formularafsendelse. Kombinér scale med opacitet for et endnu mere gennemarbejdet resultat.
const scale = useRef(new Animated.Value(0)).current;
function popIn() {
Animated.timing(scale, {
toValue: 1,
duration: 300,
useNativeDriver: true,
}).start();
}
return (
<Animated.View style={{ transform: [{ scale }] }}>
<Text>Pop in</Text>
</Animated.View>
);Interpolation af animerede værdier
Animated.Value.interpolate() afbilder den rå numeriske værdi på et andet outputområde. Det er særdeles nyttigt, når du vil have én animeret værdi til at styre flere forskellige stilændringer samtidigt.
Du kan for eksempel interpolere én statusværdi fra 0 til 1 til både en farvestreng (fra rød til grøn) og en pixel-forskydning (fra 0 til 100). Arrayene inputRange og outputRange definerer afbildningspunkterne.
const progress = useRef(new Animated.Value(0)).current;
const backgroundColor = progress.interpolate({
inputRange: [0, 1],
outputRange: ['#ff0000', '#00ff00'],
});
const translateX = progress.interpolate({
inputRange: [0, 1],
outputRange: [0, 200],
});
return (
<Animated.View
style={{
backgroundColor,
transform: [{ translateX }],
}}
/>Animering af kantradius og farver
Du kan animere næsten alle numeriske stilegenskaber med Animated.Value, herunder borderRadius, width, height og endda farver, når du bruger interpolate. Hvis du ændrer kantradius for at forvandle en firkant til en cirkel, skaber det flydende formforvandlingseffekter.
Bemærk, at farveanimation kræver useNativeDriver: false, fordi farveændringer ikke understøttes af den native driver. Det betyder, at farveanimationer kører på JavaScript-tråden og er en smule mindre effektive end transformationsanimationer.
const borderRadius = useRef(new Animated.Value(0)).current;
function morphToCircle() {
Animated.timing(borderRadius, {
toValue: 50,
duration: 400,
useNativeDriver: false, // layout props need JS driver
}).start();
}
return (
<Animated.View
style={{
width: 100,
height: 100,
backgroundColor: 'tomato',
borderRadius,
}}
/>Gentagelse af animationer med Animated.loop
Animated.loop pakker en anden animation ind og gentager den uendeligt (eller et bestemt antal gange med indstillingen iterations). Den er perfekt til indlæsningsspinnere, pulserende indikatorer og kontinuerlige baggrundseffekter.
Hvis du vil skabe en pulserende effekt, skal du animere opaciteten fra 1 til 0,3 og tilbage igen i en løkke. Kald altid .stop() på løkkeanimationen, når komponenten afmonteres, ved at returnere det fra oprydningsfunktionen i useEffect, så hukommelseslækager undgås.
const pulse = useRef(new Animated.Value(1)).current;
useEffect(() => {
const animation = Animated.loop(
Animated.sequence([
Animated.timing(pulse, { toValue: 0.3, duration: 800, useNativeDriver: true }),
Animated.timing(pulse, { toValue: 1, duration: 800, useNativeDriver: true }),
])
);
animation.start();
return () => animation.stop();
}, []);Hurtigt tjek
Test din forståelse af begreberne inden for React Native Mobile Development fra denne lektion.
Opsummering af lektionen
I denne lektion lærte du, at Animated.Value indeholder en numerisk værdi, der kan ændre sig over tid, at Animated.timing styrer jævne overgange med en konfigurerbar varighed og easing, og at Animated.View accepterer animerede værdier i sin style-egenskab til animationer af opacitet og transformeringer. Derefter ser vi nærmere på fysikbaserede animationer med spring og decay.
Lær JavaScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 30
- Lektioner
- 120
Ofte stillede spørgsmål
Er lektionen “Animated.Value og Animated.View” gratis?
Ja — alle 3 lektioner i læringssporet React Native Academy, inklusive “Animated.Value og Animated.View”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. React Native Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Animated.Value og Animated.View”?
Opret en Animated.Value, styr den med Animated.timing, og forbind den med style-proppen på en Animated.View for at animere gennemsigtigheden ved montering. Du øver dig i React Native Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på React Native Academy?
Der kræves ingen tidligere erfaring. React Native Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.
Hvor lang tid tager lektionen “Animated.Value og Animated.View”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne React Native Academy-lektion?
Ja. Alle React Native Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Animated.Value og Animated.View
- Spring- og decay-animationer
- Parallelle animationer og animationer i sekvens
- useNativeDriver til animationer ved 60 fps