Animated.timing
- React Native kursu
- Orta seviye
- Ders 72/116
- 5 dk
Animated.timing ile zamanlama animasyonu öğrenirsin.
Animated.timing
Animated.timing, bir Animated.Value'yi belirli bir sürede hedef değere götürür. duration milisaniye, toValue hedef sayıdır. Sonra .start() çağrılarak animasyon başlatılır.
Örnek: Animated.timing(fade, { toValue: 1, duration: 1000, useNativeDriver: true }).start(). useNativeDriver animasyonu yerel tarafa taşır; bu yüzden akıcı olur. Yalnızca opacity ve transform destekler.
duration ve useNativeDriver
duration animasyonun milisaniye cinsinden süresidir; büyük değer yavaş, küçük değer hızlı animasyon demektir. toValue değerin gideceği son sayıdır.
useNativeDriver: true animasyonu yerel tarafa taşır ve akıcı yapar. Ancak yalnızca opacity ve transform gibi yerel özellikler desteklenir; backgroundColor gibi değerler desteklenmez.
Uygulama timing animasyonu ekle
Animated.timing ile fade'i 1000 ms'de 1'e götür. useNativeDriver: true kullan ve .start() çağır.
Başlangıç kodu
import React, { useRef } from 'react';
import { Animated } from 'react-native';
export default function Fade() {
const fade = useRef(new Animated.Value(0)).current;
// fade'i 1000 ms'de 1'e götür
return <Animated.View style={{ opacity: fade }} />;
}Örnek çözüm
import React, { useRef } from 'react';
import { Animated } from 'react-native';
export default function Fade() {
const fade = useRef(new Animated.Value(0)).current;
Animated.timing(fade, {
toValue: 1,
duration: 1000,
useNativeDriver: true,
}).start();
return <Animated.View style={{ opacity: fade }} />;
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 timing kavramlarını eşleştir
| Kavram | Anlamı |
|---|---|
timing |
Süreli animasyon |
duration |
Milisaniye |
toValue |
Hedef sayı |
start |
Başlatır |
2 Animated.timing ne yapar?
- Bileşeni siler
- Değeri anında değiştirir
- Yeni değer yaratır
- Değeri süre içinde hedefe götürür Doğru cevap
Açıklama: timing, değeri süre içinde hedefe götürür.
3 timing çağrısını yaz
Animated.timing(fade, { toValue: 1, duration: 1000, ____: true }).start();Animated.timing(fade, { toValue: 1, duration: 1000, useNativeDriver: true }).start();Açıklama: true animasyonu yerel tarafa taşır.