Özet - Reanimated

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.

Örnek çözümü göster

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.

Örnek çözümü göster

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>
  );
}

Kendini test et

Akış parçalarını eşle

useSharedValue

Paylaşılan değer
useAnimatedStyle

Animasyonlu stil
Animated.View

Stili uygular
withTiming

Animasyonu çalıştırır

Animasyon çağrısı

offset.value = ____(100);

Cevabı göster

offset.value = withTiming(100);

Sıradaki ders: Native modül nedir?

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler