withTiming

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.

Örnek çözümü göster

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 };
}

Kendini test et

withTiming varsayılan süre nedir?
- 3 saniye
- 30 ms
- 3000 ms
- 300 ms
Cevabı göster

3 saniye — withTiming varsayılan süresi 300 ms'dir.
withTiming parçalarını eşle

withTiming

Sabit süre
duration

Süre (ms)
Easing.inOut

Hız eğrisi
100

Hedef değer

duration değerini yaz

withTiming(100, { duration: ____ })

Cevabı göster

withTiming(100, { duration: 500 })

Sıradaki ders: withSpring

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler