Animated.timing

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.

Örnek çözümü göster

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

Kendini test et

timing kavramlarını eşleştir

timing

Süreli animasyon
duration

Milisaniye
toValue

Hedef sayı
start

Başlatır
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
Cevabı göster

Değeri süre içinde hedefe götürür — timing, değeri süre içinde hedefe götürür.

timing çağrısını yaz

Animated.timing(fade, { toValue: 1, duration: 1000, ____: true }).start();

Cevabı göster

Animated.timing(fade, { toValue: 1, duration: 1000, useNativeDriver: true }).start();

Sıradaki ders: Animated.spring

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler