interpolate

interpolate ile değer aralığı öğrenirsin.

interpolate

interpolate, bir Animated.Value'yi başka bir aralığa çevirir. Örneğin 0-1 arası değeri 0-100 arası konuma, ya da 0-1 arası saydamlığı 1-0 arası ters saydamlığa dönüştürür.

Kullanım: fade.interpolate({ inputRange: [0, 1], outputRange: [0, 100] }). inputRange değerin girdi aralığı, outputRange çıktı aralığıdır. Böylece tek değer birden çok özelliği sürer.

inputRange ve outputRange

inputRange artan sayılar dizisidir: [0, 1]. outputRange aynı uzunlukta bir dizidir: [0, 100]. Değer 0 iken çıktı 0, değer 1 iken çıktı 100 olur.

Aralıkları ters çevirmek de mümkündür: inputRange: [0, 1], outputRange: [1, 0] değeri arttıkça çıktı azaltır. Bu, kaydırırca solma gibi efektler için uygundur.

Uygulama interpolate ile top değeri türet

fade'ten top değeri türet: const top = fade.interpolate({ inputRange: [0, 1], outputRange: [0, 100] }). Sonra <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

interpolate çağrısı

const top = fade.interpolate({ inputRange: [0, 1], ____: [0, 100] });

Cevabı göster

const top = fade.interpolate({ inputRange: [0, 1], outputRange: [0, 100] });

interpolate kavramlarını eşleştir

interpolate

Aralık çevirir
inputRange

Girdi aralığı
outputRange

Çıktı aralığı
fade

Animated değer
interpolate ne işe yarar?
- Yeni değer yaratır
- Bir değeri başka aralığa çevirir
- Animasyonu durdurur
- Bileşeni siler
Cevabı göster

Bir değeri başka aralığa çevirir — interpolate, değeri başka bir aralığa çevirir.

Sıradaki ders: Özet - Animated

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler