Animated.Value ja Animated.View
Luokaa Animated.Value, ohjatkaa sitä Animated.timingilla ja yhdistäkää se Animated.View-komponentin style-propiin läpinäkyvyyden animointia varten komponentin alustuksen yhteydessä.
Animated.Value ja Animated.View on ilmainen React Native Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu React Native Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Native Academy-kurssilla on yhteensä 4 oppituntia.
Mikä on Animated API?
Animated API on React Nativen sisäänrakennettu kirjasto sulavien ja suorituskykyisten animaatioiden luomiseen. Se seuraa erityisiä animoituja arvoja, joita voidaan ohjata ajoitus- tai fysiikkamoottoreilla ja yhdistää komponenttien tyylien ominaisuuksiin. Toisin kuin verkon CSS-siirtymät, React Native -animaatiot määritellään kokonaan JavaScriptillä, mutta ne voidaan suorittaa natiiveissa säikeissä suorituskyvyn parantamiseksi.
Animated API toimitetaan jokaisen React Native -asennuksen mukana — lisäpaketteja ei tarvita. Tuokaa se suoraan moduulista react-native.
import { Animated, View } from 'react-native';Animated.Valuen luominen
Keskeinen perusolio on Animated.Value, joka sisältää ajan myötä muuttuvan numeerisen arvon. Luokaa se komennolla new Animated.Value(initialValue) ja tallentakaa se ref-muuttujaan, jotta se säilyy renderöintien välillä eikä itsessään käynnistä uusia renderöintejä.
useRef-funktion käyttö on suositeltu toimintatapa, koska animoitu arvo on muokattava — haluatte saman olion koko komponentin elinkaaren ajan. useState-funktion sisällä alustaminen loisi uuden arvon jokaisella renderöintikerralla.
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: animoitu säilö
Animated.View on View-komponentin erityinen versio, jonka style-propertiin voi välittää Animated.Value-viittauksia. Kun animoitu arvo muuttuu, näkymä päivittyy ilman normaalia Reactin täsmäytyssykliä, joten toiminta on erittäin tehokasta.
Myös muille ydin-komponenteille on olemassa animoidut vastineet: Animated.Text, Animated.Image ja Animated.ScrollView. Voitte myös luoda omista komponenteistanne animoituja versioita funktiolla Animated.createAnimatedComponent().
import { Animated, StyleSheet } from 'react-native';
function FadeBox({ opacity }) {
return (
<Animated.View style={[styles.box, { opacity }]}>
</Animated.View>
);
}Animaation ohjaaminen Animated.timing-funktiolla
Animated.timing muuttaa Animated.Valuen nykyisestä arvosta tavoitearvoon tasaisesti määritetyn ajan kuluessa. Se hyväksyy asetusobjektin, joka sisältää toValue- ja duration-arvot sekä valinnaisen easing-funktion.
Kutsu .start() käynnistää animaation. Voitte välittää kutsulle .start(callback) takaisinkutsun, joka suoritetaan animaation valmistuttua. Tämä on hyödyllistä tehosteiden ketjuttamisessa tai tilan päivittämisessä animaation päätyttyä.
import { Animated, Easing } from 'react-native';
Animated.timing(opacity, {
toValue: 1,
duration: 800,
easing: Easing.ease,
useNativeDriver: true,
}).start(() => {
console.log('Fade in complete!');
});Esimerkki häivytyksestä näkyviin kiinnitettäessä
Tyypillinen käyttötapaus on häivyttää komponentti näkyviin sen kiinnittyessä ensimmäisen kerran. Alustakaa opacity-arvoksi 0 ja suorittakaa useEffect-funktion sisällä ajoitusanimaatio arvoon 1. Käyttäkää tyhjää riippuvuustaulukkoa, jotta se suoritetaan kerran komponentin renderöinnin jälkeen.
Komponentti renderöidään heti (näkymättömänä, kun opacity on 0), minkä jälkeen se muuttuu tasaisesti näkyväksi animaation aikana. Tämä tekniikka estää häiritsevät sisällön välähdykset hitaasti latautuvissa tilanteissa.
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>
);
}Häivyttäminen pois ja ehdollinen näkyvyys
Animoitua opacity-arvoa käytetään myös komponenttien piilottamiseen. Häivyttäminen opacity-arvoon 0 säilyttää komponentin asettelussa (se vie edelleen tilaa), mutta tekee siitä näkymättömän. Jos haluatte poistaa sen kokonaan häivytyksen jälkeen, päivittäkää tilamuuttuja animaation valmistumisen takaisinkutsussa.
Tätä toimintamallia käytetään usein modaaleissa, toast-ilmoituksissa ja ilmoituksissa, joiden pitää animoitua pois ennen kuin ne irrotetaan komponenttipuusta.
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;Sijainnin muuttaminen translateX/Y-muunnoksilla
Opacity-arvon lisäksi Animated.Valuella voidaan ohjata sijainnin muunnoksia, kuten translateX- ja translateY-muunnoksia. Muunnokset lisätään transform-tyylitaulukkoon. Näin elementit voidaan liu'uttaa näytölle mistä tahansa suunnasta.
Muunnosten käyttäminen left- tai top-arvon muuttamisen sijaan on suorituskyvyn kannalta olennaista, koska muunnokset eivät käynnistä asettelun laskentaa — ne koostetaan grafiikkasuorittimella, mikä mahdollistaa 60 fps:n animaatiot myös tehottomammilla laitteilla.
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>
);Komponenttien skaalaaminen scale-muunnoksella
scale-muunnos suurentaa tai pienentää komponenttia sen keskipisteen ympärillä. Komponentin aloittaminen arvolla scale: 0 ja animointi arvoon 1 luo esiin ponnahtavan vaikutelman, kun taas animointi arvosta 1 arvoon 0 luo pois ponnahtavan vaikutelman.
Skaalausanimaatiot tuntuvat luonnollisilta vahvistusta edellyttävissä toiminnoissa, kuten sosiaalisen sovelluksen sydänpainikkeessa tai lomakkeen lähettämisen jälkeen näkyviin tulevassa valintamerkissä. Yhdistämällä skaalauksen opacity-arvoon saatte vielä viimeistellymmän lopputuloksen.
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>
);Animated-arvojen interpolointi
Animated.Value.interpolate() kuvaa raakanumeerisen arvon toiselle lähtöarvoalueelle. Tämä on erittäin hyödyllistä, kun haluatte yhden animoidun arvon ohjaavan samanaikaisesti useita erilaisia tyylimuutoksia.
Voitte esimerkiksi interpoloida yhden edistymisarvon väliltä 0–1 sekä väriarvoksi (punaisesta vihreään) että pikselisiirtymäksi (arvosta 0 arvoon 100). inputRange- ja outputRange-taulukot määrittävät kuvauksen rajapisteet.
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 }],
}}
/>Reunuksen säteen ja värien animointi
Animated.Valuella voi animoida lähes mitä tahansa numeerista tyyliominaisuutta, kuten borderRadius-, width- ja height-arvoja sekä interpolate-funktion avulla myös värejä. Neliön muuttaminen ympyräksi reunuksen sädettä muuttamalla luo sulavan muodonmuutosefektin.
Huomioikaa, että värien animointi edellyttää asetusta useNativeDriver: false, koska natiivi ohjain ei tue värien muuttamista. Tämän vuoksi värianimaatiot suoritetaan JavaScript-säikeessä ja ne ovat hieman muunnosanimaatioita tehottomampia.
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,
}}
/>Toistuvat animaatiot Animated.loop-funktiolla
Animated.loop käärii toisen animaation ja toistaa sitä loputtomasti (tai iterations-asetuksella määritetyn määrän kertoja). Se sopii erinomaisesti latausosoittimiin, sykkiviin ilmaisimiin ja jatkuviin taustatehosteisiin.
Luokaa sykkivä tehoste animoimalla opacity-arvo välillä 1–0,3 ja takaisin silmukan sisällä. Kutsukaa aina .stop()-funktiota silmukka-animaatiolle, kun komponentti irrotetaan, palauttamalla se useEffect-funktion siivousfunktiosta muistivuotojen estämiseksi.
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();
}, []);Pikatarkistus
Testatkaa ymmärrystänne tämän oppitunnin React Native Mobile Development -aiheista.
Oppitunnin yhteenveto
Tässä oppitunnissa opitte, että Animated.Value sisältää numeerisen arvon, joka voi muuttua ajan myötä, Animated.timing tuottaa sulavia siirtymiä määritettävällä kestolla ja easing-funktiolla ja Animated.View hyväksyy animoituja arvoja style-propissaan opacity- ja transform-animaatioita varten. Seuraavaksi tutustumme jousi- ja hidastumisfysiikkaan perustuviin animaatioihin.
Opi JavaScript tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 30
- Oppitunnit
- 120
Usein kysytyt kysymykset
Onko oppitunti ”Animated.Value ja Animated.View” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa React Native Academy-oppimispolun 3 oppituntia, myös oppitunnin “Animated.Value ja Animated.View”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. React Native Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Animated.Value ja Animated.View”?
Luokaa Animated.Value, ohjatkaa sitä Animated.timingilla ja yhdistäkää se Animated.View-komponentin style-propiin läpinäkyvyyden animointia varten komponentin alustuksen yhteydessä. Harjoittelet React Native Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni React Native Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin React Native Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.
Kuinka kauan ”Animated.Value ja Animated.View”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä React Native Academy-oppitunnilla?
Kyllä. Jokainen React Native Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Animated.Value ja Animated.View
- Spring- ja decay-animaatiot
- Useiden ominaisuuksien animointi rinnakkain ja peräkkäin
- useNativeDriver 60 fps:n animaatioissa