Animated.spring
- React Native kursu
- Orta seviye
- Ders 73/116
- 5 dk
Animated.spring ile yay animasyonu öğrenirsin.
Animated.spring
Animated.spring, fizik tabanlı bir animasyondur. timing gibi süre yerine friction (sürtünme) ve tension (gerilim) gibi fizik parametreleri alır. Sonuç gerçekçi bir yay hareketidir.
Örnek: Animated.spring(fade, { toValue: 1, friction: 7, useNativeDriver: true }).start(). friction ne kadar küçükse o kadar zıplar. .start() ile başlatılır.
Uygulama spring animasyonu ekle
Animated.spring ile fade'i 1'e götür. friction: 7 ve useNativeDriver: true kullan; .start() çağır.
Başlangıç kodu
import React, { useRef } from 'react';
import { Animated } from 'react-native';
export default function Bounce() {
const fade = useRef(new Animated.Value(0)).current;
// fade'i spring ile 1'e götür
return <Animated.View style={{ opacity: fade }} />;
}Örnek çözüm
import React, { useRef } from 'react';
import { Animated } from 'react-native';
export default function Bounce() {
const fade = useRef(new Animated.Value(0)).current;
Animated.spring(fade, {
toValue: 1,
friction: 7,
useNativeDriver: true,
}).start();
return <Animated.View style={{ opacity: fade }} />;
}spring ayarları
friction sürtünmeyi belirler; küçük değer daha çok zıplama demektir. tension yayın gücünü belirler; büyük değer daha sert hareket verir. İkisi birlikte hareketin hissini ayarlar.
useNativeDriver: true yine akıcılık için şart. spring, timing'den farklı olarak süre belirtmez; fizik doğal olarak yavaşlayıp durur.
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 spring ile timing arasındaki fark nedir?
- spring fizik parametreleri kullanır Doğru cevap
- spring süre almaz
- spring yalnızca renk değiştirir
- spring daha yavaştır
Açıklama: spring, friction/tension gibi fizik parametreleri kullanır.
2 spring çağrısını yaz
Animated.spring(fade, { toValue: 1, ____: 7, useNativeDriver: true }).start();Animated.spring(fade, { toValue: 1, friction: 7, useNativeDriver: true }).start();Açıklama: 7 sürtünmeyi ayarlar; küçük değer daha çok zıplar.
3 spring kavramlarını eşleştir
| Kavram | Anlamı |
|---|---|
spring |
Fizik animasyon |
friction |
Sürtünme |
tension |
Gerilim |
useNativeDriver |
Yerel sürücü |