withTiming
- React Native kursu
- İleri seviye
- Ders 64/83
- 5 dk
withTiming ile zamanlama animasyonu öğrenirsin.
withTiming
withTiming, paylaşılan değeri hedefe sabit sürede götürür. Varsayılan süre 300 ms'dir. Örnek: offset.value = withTiming(100). Bu, değeri 0'dan 100'e 300 ms içinde doğrusal olarak taşır.
Süre özelleştirilebilir: withTiming(100, { duration: 500 }). İkinci parametre bir yapılandırma nesnesidir; duration ve easing alır. Easing.inOut(Easing.ease) gibi easing işlevleri, animasyonun hız eğrisini belirler. withTiming, opaklık ve renk geçişleri için idealdir.
duration ile özelleştirme
Süreyi değiştirmek için ikinci parametre olarak yapılandırma nesnesi verilir: withTiming(100, { duration: 500 }). Burada animasyon 500 ms'de tamamlanır. Daha uzun süre daha yavaş, daha kısa süre daha hızlı hiss verir.
easing alanı, animasyonun hız eğrisini belirler. Easing.in(Easing.quad) başlangıçta yavaş, Easing.out(Easing.quad) sonda yavaş gider. Easing.inOut ise her iki uçta da yavaştır. Doğal hiss için Easing.inOut(Easing.ease) yaygın tercihtir.
Uygulama withTiming animasyonu
withTiming'i react-native-reanimated'dan içe aktar. offset.value = withTiming(100, { duration: 500 }) çağrısı yaz. 500 ms'de 100'e git.
Başlangıç kodu
import React from 'react';
import { useSharedValue } from 'react-native-reanimated';
export function useTimingMove() {
const offset = useSharedValue(0);
function run() {
// withTiming ile 500 ms'de 100'e git
}
return { offset, run };
}Örnek çözüm
import React from 'react';
import { useSharedValue, withTiming } from 'react-native-reanimated';
export function useTimingMove() {
const offset = useSharedValue(0);
function run() {
offset.value = withTiming(100, { duration: 500 });
}
return { offset, run };
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 withTiming varsayılan süre nedir?
- 3 saniye Doğru cevap
- 30 ms
- 3000 ms
- 300 ms
Açıklama: withTiming varsayılan süresi 300 ms'dir.
2 withTiming parçalarını eşle
| Kavram | Anlamı |
|---|---|
withTiming |
Sabit süre |
duration |
Süre (ms) |
Easing.inOut |
Hız eğrisi |
100 |
Hedef değer |
3 duration değerini yaz
withTiming(100, { duration: ____ })withTiming(100, { duration: 500 })Açıklama: 500 sayısı milisaniye cinsinden süre.