Özet - Reanimated
- React Native kursu
- İleri seviye
- Ders 66/83
- 5 dk
useSharedValue, useAnimatedStyle ve withTiming'i birleştirerek bir animasyonlu kart yazarsın.
Özet - Reanimated
Bu grupta useSharedValue, useAnimatedStyle, withTiming ve withSpring öğrendik. useSharedValue paylaşılan değer; useAnimatedStyle animasyonlu stil; withTiming sabit süreli; withSpring yay animasyonu sağlar.
Şimdi bunları birleştirip animasyonlu bir kart yazacağız. Kartın X konumunu paylaşılan değer tutar; animasyonlu stil bu değere göre kaydırma uygular. Butona basınca withTiming kartı 100 px kaydırır. Bu kalıp tüm Reanimated animasyonlarının iskeletidir.
Uygulama Özet - Animasyonlu kart iskeleti
AnimatedCard bileşenini tamamla. useSharedValue(0) ile offset tanımla. useAnimatedStyle(() => ({ transform: [{ translateX: offset.value }] })) ile animasyonlu stil üret. Animated.View'in style'ına [styles.box, animatedStyle] ver. Buton onPress'inde offset.value = withTiming(100) çağır.
Başlangıç kodu
import React from 'react';
import { Button, StyleSheet, View } from 'react-native';
import { Animated, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
export function AnimatedCard() {
// offset, animatedStyle ve buton ile Animated.View döndür
return null;
}Örnek çözüm
import React from 'react';
import { Button, StyleSheet, View } from 'react-native';
import { Animated, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
export function AnimatedCard() {
const offset = useSharedValue(0);
const animatedStyle = useAnimatedStyle(() => ({
transform: [{ translateX: offset.value }],
}));
return (
<View>
<Animated.View style={[styles.box, animatedStyle]} />
<Button title="Kaydir" onPress={() => { offset.value = withTiming(100); }} />
</View>
);
}
const styles = StyleSheet.create({
box: { width: 100, height: 100, backgroundColor: 'tomato' },
});Uygulama Özet - Spring butonu
SpringButton bileşenini tamamla. scale = useSharedValue(1) tanımla. useAnimatedStyle(() => ({ transform: [{ scale: scale.value }] })) ile stil üret. Buton onPress'inde scale.value = withSpring(0.9) çağır.
Başlangıç kodu
import React from 'react';
import { Button, View } from 'react-native';
import { Animated, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
export function SpringButton() {
// scale, animatedStyle ve buton ile Animated.View döndür
return null;
}Örnek çözüm
import React from 'react';
import { Button, View } from 'react-native';
import { Animated, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
export function SpringButton() {
const scale = useSharedValue(1);
const animatedStyle = useAnimatedStyle(() => ({
transform: [{ scale: scale.value }],
}));
return (
<View>
<Animated.View style={[{ width: 100, height: 40, backgroundColor: 'blue' }, animatedStyle]} />
<Button title="Basil" onPress={() => { scale.value = withSpring(0.9); }} />
</View>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Akış parçalarını eşle
| Kavram | Anlamı |
|---|---|
useSharedValue |
Paylaşılan değer |
useAnimatedStyle |
Animasyonlu stil |
Animated.View |
Stili uygular |
withTiming |
Animasyonu çalıştırır |
2 Animasyon çağrısı
offset.value = ____(100);offset.value = withTiming(100);Açıklama: withTiming animasyonu başlatır.