withSpring
- React Native kursu
- İleri seviye
- Ders 65/83
- 5 dk
withSpring ile yay animasyonu öğrenirsin.
withSpring
withSpring, fiziksel yay (spring) animasyonu sağlar. Hedefe doğrusal değil; yay gibi sektirerek gider. Düğme basılması, kart çekme ve sürükle-bırak gibi doğal hiss gerektiren durumlar için idealdir.
Örnek: offset.value = withSpring(100). Varsayılan parametreler yumuşak bir yayın davranışını verir. Yapılandırma ile damping (sönümleme), stiffness (sertlik) ve mass (kütle) ayarlanabilir. Düşük damping daha fazla sekme yapar; yüksek damping daha az sekme ile durur.
Yay davranışı
Yay animasyonu, fizik ilkelere göre çalışır. damping ne kadar düşükse yayın sektirmesi o kadar fazla olur. stiffness yayın sertliğini; mass ise hareket eden cismin kütlesini belirler. Yumuşak bir kart animasyonu için düşük stiffness ve orta damping yaygın tercihtir.
Örnek: withSpring(100, { damping: 10, stiffness: 100 }). Bu, kartın ucuna kadar gelip biraz sekmesini sağlar. damping: 30 daha az sekme yapar; damping: 5 çok sektirir. Doğru hissi bulmak için değerlerle oynamak gerekir.
Uygulama withSpring animasyonu
withSpring'i react-native-reanimated'dan içe aktar. offset.value = withSpring(100, { damping: 10 }) çağrısı yaz. 10 damping ile yay animasyonu yap.
Başlangıç kodu
import React from 'react';
import { useSharedValue } from 'react-native-reanimated';
export function useSpringMove() {
const offset = useSharedValue(0);
function run() {
// withSpring ile damping 10 ile 100'e git
}
return { offset, run };
}Örnek çözüm
import React from 'react';
import { useSharedValue, withSpring } from 'react-native-reanimated';
export function useSpringMove() {
const offset = useSharedValue(0);
function run() {
offset.value = withSpring(100, { damping: 10 });
}
return { offset, run };
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 withSpring parçalarını eşle
| Kavram | Anlamı |
|---|---|
withSpring |
Yay animasyonu |
damping |
Sönümleme |
stiffness |
Sertlik |
mass |
Kütle |
2 damping değerini yaz
withSpring(100, { damping: ____, stiffness: 100 })withSpring(100, { damping: 10, stiffness: 100 })Açıklama: 10 sayısal damping değeridir.
3 withSpring ne zaman tercih edilir?
- Sabit süre gerektiğinde
- Doğal hiss gerektiğinde Doğru cevap
- Animasyon istenmediğinde
- Yalnızca metin değişiminde
Açıklama: withSpring doğal hiss için tercih edilir.