Özet - Animated
- React Native kursu
- Orta seviye
- Ders 75/116
- 5 dk
Animated.Value, timing ve interpolate'i birleştirerek bir kayan kart yazarsın.
Özet - Animated
Animated API'sinin temel taşları: Animated.Value animasyon sayısı, Animated.View animasyonlu bileşen, Animated.timing süreli, Animated.spring fiziksel animasyon ve interpolate aralık çevirme.
Değeri useRef ile bir kez yarat, Animated.View'in stiline bağla, timing ya da spring ile güncelle. useNativeDriver: true akıcılık için şart. interpolate ile tek değer birden çok özelliği sürer.
Uygulama timing ile fade-in
Bir Animated.Value yarat, Animated.timing ile 1000 ms'de 1'e götür ve <Animated.View style={{ opacity: fade }} /> döndür. useNativeDriver: true kullan.
Başlangıç kodu
import React from 'react';
import { Animated } from 'react-native';
export default function FadeIn() {
// Animated.Value yarat, timing ile 1'e götür, Animated.View döndür
return null;
}Örnek çözüm
import React, { useRef } from 'react';
import { Animated } from 'react-native';
export default function FadeIn() {
const fade = useRef(new Animated.Value(0)).current;
Animated.timing(fade, {
toValue: 1,
duration: 1000,
useNativeDriver: true,
}).start();
return <Animated.View style={{ opacity: fade }} />;
}Uygulama interpolate ile top türet
fade'ten top türet (inputRange: [0, 1], outputRange: [0, 100]) ve <Animated.View style={{ top }} /> döndür.
Başlangıç kodu
import React from 'react';
import { Animated } from 'react-native';
export default function Move() {
const fade = useRef(new Animated.Value(0)).current;
// fade'ten top türet ve Animated.View döndür
return null;
}Örnek çözüm
import React, { useRef } from 'react';
import { Animated } from 'react-native';
export default function Move() {
const fade = useRef(new Animated.Value(0)).current;
const top = fade.interpolate({
inputRange: [0, 1],
outputRange: [0, 100],
});
return <Animated.View style={{ top }} />;
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 useNativeDriver ne için kullanılır?
- Animasyonu durdurur
- Yeni değer yaratır
- Animasyonu yerel tarafa taşır Doğru cevap
- Renk değiştirir
Açıklama: useNativeDriver animasyonu yerel tarafa taşır.
2 Animated özeti
| Kavram | Anlamı |
|---|---|
Animated.Value |
Animasyon sayısı |
Animated.View |
Animasyonlu bileşen |
timing |
Süreli animasyon |
interpolate |
Aralık çevirir |