interpolate
- React Native kursu
- Orta seviye
- Ders 74/116
- 5 dk
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.
Başlangıç kodu
import React, { useRef } from 'react';
import { Animated } from 'react-native';
export default function Move() {
const fade = useRef(new Animated.Value(0)).current;
// fade'ten top değerini türet ve Animated.View döndür
return null;
}Örnek çözüm
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 }} />;
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 interpolate çağrısı
const top = fade.interpolate({ inputRange: [0, 1], ____: [0, 100] });const top = fade.interpolate({ inputRange: [0, 1], outputRange: [0, 100] });Açıklama: outputRange çıktı aralığını belirler.
2 interpolate kavramlarını eşleştir
| Kavram | Anlamı |
|---|---|
interpolate |
Aralık çevirir |
inputRange |
Girdi aralığı |
outputRange |
Çıktı aralığı |
fade |
Animated değer |
3 interpolate ne işe yarar?
- Yeni değer yaratır
- Bir değeri başka aralığa çevirir Doğru cevap
- Animasyonu durdurur
- Bileşeni siler
Açıklama: interpolate, değeri başka bir aralığa çevirir.