Özet - Animated

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.

Örnek çözümü göster

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.

Örnek çözümü göster

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

Kendini test et

useNativeDriver ne için kullanılır?
- Animasyonu durdurur
- Yeni değer yaratır
- Animasyonu yerel tarafa taşır
- Renk değiştirir
Cevabı göster

Animasyonu yerel tarafa taşır — useNativeDriver animasyonu yerel tarafa taşır.
Animated özeti

Animated.Value

Animasyon sayısı
Animated.View

Animasyonlu bileşen
timing

Süreli animasyon
interpolate

Aralık çevirir

Sıradaki ders: PanResponder

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler