Animated.Value og Animated.View
Opprett en Animated.Value, styr den med Animated.timing, og koble den til style-propen til en Animated.View for å animere gjennomsiktigheten ved montering.
Animated.Value og Animated.View er en gratis leksjon i React Native Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Native Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Native Academy inneholder totalt 4 leksjoner.
Hva er Animated API?
Animated API er React Natives innebygde bibliotek for å lage jevne animasjoner med god ytelse. Det fungerer ved å følge med på spesielle animerte verdier som kan styres av tids- eller fysikkmotorer, og deretter kobles til stilegenskaper på komponenter. I motsetning til CSS-overganger på nettet uttrykkes React Native-animasjoner utelukkende i JavaScript, men de kan flyttes til native-tråder for bedre ytelse.
Animated API følger med alle React Native-installasjoner — ingen ekstra pakker er nødvendige. De importerer det direkte fra react-native.
import { Animated, View } from 'react-native';Opprette en Animated.Value
Den grunnleggende byggesteinen er Animated.Value, som inneholder en numerisk verdi som kan endres over tid. De oppretter en slik verdi med new Animated.Value(initialValue) og lagrer den i en ref, slik at den bevares mellom renderinger uten å utløse nye renderinger i seg selv.
Det anbefalte mønsteret er å bruke useRef, fordi den animerte verdien kan endres — De ønsker det samme objektet gjennom hele komponentens livssyklus. Hvis De initialiserer den i useState, opprettes en ny verdi ved hver rendering.
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 animerte beholderen
Animated.View er en spesialversjon av View der style-propen kan ta imot referanser til Animated.Value. Når den animerte verdien endres, oppdateres visningen uten å gå gjennom Reacts vanlige avstemmingssyklus, noe som gjør den svært effektiv.
Det finnes også animerte varianter av andre kjernekomponenter: Animated.Text, Animated.Image og Animated.ScrollView. De kan også opprette animerte varianter av egendefinerte komponenter med Animated.createAnimatedComponent().
import { Animated, StyleSheet } from 'react-native';
function FadeBox({ opacity }) {
return (
<Animated.View style={[styles.box, { opacity }]}>
</Animated.View>
);
}Styres animasjonen med Animated.timing
Animated.timing endrer en Animated.Value jevnt fra den nåværende verdien til en målverdi over en angitt varighet. Den tar imot et konfigurasjonsobjekt med toValue, duration og en valgfri easing-funksjon.
Et kall til .start() starter animasjonen. De kan sende en callback til .start(callback) som kjøres når animasjonen er fullført. Dette er nyttig for å lenke sammen effekter eller oppdatere tilstanden etter at en animasjon er ferdig.
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: ton inn ved montering
Et klassisk bruksområde er å tone inn en komponent når den monteres for første gang. De initialiserer opasitetsverdien til 0 og kjører en tidsanimasjon til 1 inne i useEffect med en tom avhengighetsmatrise, slik at den kjøres én gang etter at komponenten er rendret.
Komponenten rendres umiddelbart (usynlig med opasitet 0) og blir deretter gradvis synlig i løpet av animasjonens varighet. Denne teknikken hindrer brå innholdsblink ved langsom lasting av data.
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>
);
}Ton ut og vis betinget
Animert opasitet brukes også til å skjule komponenter. Hvis De toner til opasitet 0, blir komponenten værende i layouten (den opptar fortsatt plass), men blir usynlig. For å fjerne den helt etter uttoningen kan De oppdatere en tilstandsvariabel i callbacken for animasjonens fullføring.
Dette mønsteret er vanlig for modaler, toast-meldinger og varsler som skal animeres ut før de avmonteres fra komponenttreet.
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;Flytte posisjon med translateX/Y
I tillegg til opasitet kan Animated.Value styre posisjonstransformasjoner som translateX og translateY. Transformasjoner brukes i transform-stilmatrisen. Dette gjør at De kan skyve elementer inn på skjermen fra hvilken som helst retning.
Det er viktig for ytelsen å bruke transformasjon i stedet for å endre left eller top, fordi transformasjoner ikke utløser en ny layoutberegning — de komponeres på GPU-en, slik at animasjoner på 60 bilder per sekund blir mulig selv på mindre kraftige enheter.
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>
);Skalere komponenter med scale-transformasjon
scale-transformasjonen forstørrer eller krymper en komponent rundt sentrum. Når en komponent starter med scale: 0 og animeres til 1, oppstår en effekt der den spretter inn. Animering fra 1 til 0 skaper tilsvarende en effekt der den spretter ut.
Skaleringsanimasjoner føles naturlige for bekreftelseshandlinger, for eksempel en hjerteknapp i en sosial app eller et hake-tegn som vises etter at et skjema er sendt inn. Kombiner scale med opasitet for et enda mer gjennomført 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>
);Interpolering av animerte verdier
Animated.Value.interpolate() tilordner den rå numeriske verdien til et annet utdataområde. Dette er svært nyttig når De vil at én animert verdi skal styre flere ulike stilendringer samtidig.
De kan for eksempel interpolere én fremdriftsverdi fra 0 til 1 til både en fargestreng (fra rød til grønn) og en forskyvning i piksler (fra 0 til 100). Matrisene inputRange og outputRange definerer tilordningspunktene.
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 av kantradius og farger
De kan animere nesten alle numeriske stilegenskaper med Animated.Value, blant annet borderRadius, width, height og også farger ved bruk av interpolate. Hvis De endrer kantradiusen på en firkant til den blir en sirkel, skapes en flytende formforvandling.
Vær oppmerksom på at fargeanimasjon krever useNativeDriver: false, fordi fargeendringer ikke støttes av native-driveren. Det betyr at fargeanimasjoner kjører på JS-tråden og har litt lavere ytelse enn transformasjonsanimasjoner.
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,
}}
/>Løkkeanimasjoner med Animated.loop
Animated.loop pakker inn en annen animasjon og gjentar den på ubestemt tid (eller et angitt antall ganger med alternativet iterations). Den egner seg perfekt for innlastingsindikatorer, pulserende indikatorer og kontinuerlige bakgrunnseffekter.
For å lage en pulserende effekt kan De animere opasiteten fra 1 til 0.3 og tilbake i en løkke. Kall alltid .stop() på løkkeanimasjonen når komponenten avmonteres, ved å returnere den fra oppryddingsfunksjonen i useEffect, for å hindre minnelekkasjer.
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();
}, []);Kort kontroll
Test forståelsen Deres av React Native Mobile Development-konseptene fra denne leksjonen.
Oppsummering av leksjonen
I denne leksjonen lærte De at Animated.Value inneholder en numerisk verdi som kan endres over tid, at Animated.timing styrer jevne overganger med konfigurerbar varighet og easing, og at Animated.View tar imot animerte verdier i style-propen for opasitets- og transformasjonsanimasjoner. Neste tema er fjær- og fysikkbaserte animasjoner med avtagende bevegelse.
Lær deg JavaScript med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 30
- Leksjoner
- 120
Ofte stilte spørsmål
Er leksjonen «Animated.Value og Animated.View» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien React Native Academy, inkludert «Animated.Value og Animated.View», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i React Native Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Animated.Value og Animated.View»?
Opprett en Animated.Value, styr den med Animated.timing, og koble den til style-propen til en Animated.View for å animere gjennomsiktigheten ved montering. Du øver på React Native Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med React Native Academy?
Ingen tidligere erfaring er nødvendig. React Native Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.
Hvor lang tid tar leksjonen «Animated.Value og Animated.View»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne React Native Academy-leksjonen?
Ja. Alle React Native Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Animated.Value og Animated.View
- Spring- og decay-animasjoner
- Animere flere egenskaper parallelt og i sekvens
- useNativeDriver for animasjoner med 60 bilder per sekund