React Native Flip Card Animasyon

React Native Expo ve reanimated kullanarak bir flip card tasarımı oluşturacağız.

Reanimated Nedir ?

Reanimated, UI iş parçacığı üzerinde çalışan kusursuz animasyonlar ve etkileşimler oluşturmaya olanak tanıyan bir React Native kütüphanesidir.

İlk olarak kütüphaneyi projemize yüklüyoruz.

npx create-expo-app FlipCardExpo && cd FlipCardExpo

npx expo install react-native-reanimated

Daha sonra kodumuzu yazmaya başlayabiliriz

import React from "react";
import { StyleSheet, Text, View, Pressable, Dimensions } from "react-native";
import Animated, {
  interpolate,
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from "react-native-reanimated";

importlarımızı yaptıktan sonra ilk olarak reanimated kütüphanesinin bize sağladı useSharedValue hookunu kullanarak bir rotate değeri oluşturuyoruz, Bu değer kartın dönme durumunu izler.

useAnimatedStyle hookunu kullanarak iki farklı animasyon stili tanımlıyoruz. Bu stiller rotate değerine göre kartın ön ve arka tarafını döndürmek için kullanacağız.

const rotate = useSharedValue(0);

  const frontAnimatedStyle = useAnimatedStyle(() => {
    const rotateValue = interpolate(rotate.value, [0, 1], [0, 180]);
    return {
      transform: [
        {
          rotateY: withTiming(`${rotateValue}deg`, { duration: 500 }),
        },
      ],
    };
  });

  const backAnimatedStyle = useAnimatedStyle(() => {
    const rotateValue = interpolate(rotate.value, [0, 1], [180, 360]);
    return {
      transform: [
        {
          rotateY: withTiming(`${rotateValue}deg`, { duration: 500 }),
        },
      ],
    };
  });

 const handleFlip = () => {
    rotate.value = rotate.value ? 0 : 1;
 };

handleFlip fonksiyonu kartın durumunu tersine çevirir. Bu, kartın ön ve arka yüzlerini döndürmek için kullanılan interpolasyonlar arasında geçiş yapar.

İnterpolate Nedir ?

Animasyonların giriş ve çıkış noktası ya da başka bir değere dönüştürülmesi (eşlenmesi) gibi şeyleri hesaplayan bir matematik terimidir.İnterpolasyon animasyonların akıcılığını arttırmak için sıklıkla kullanılır.

withTiming Nedir ?

`withTiming`, Reanimated kütüphanesinde kullanılan bir fonksiyondur ve bir animasyon hareketini belirli bir zaman aralığında gerçekleştirmek için kullanılır. Bu fonksiyon, animasyonların belirli bir süre içinde belirli bir hızda veya zamanlama işleviyle çalışmasını sağlar.

return (
    <View style={styles.container}>
      <Pressable
        onPress={() => handleFlip()}
        style={[styles.cardFrontBody, styles.card]}>
        <Animated.View
          style={[styles.cardFrontBody, styles.card, frontAnimatedStyle]}>
          <Text style={styles.text}>Front</Text>
        </Animated.View>
        <Animated.View
          style={[styles.cardBackBody, styles.card, backAnimatedStyle]}>
          <Text style={styles.text}>Back</Text>
        </Animated.View>
      </Pressable>
    </View>
  );

Bu bileşen, bir kartın ön ve arka yüzünü temsil eder. Kullanıcı, kartın üzerine dokunduğunda, kartın ön ve arka yüzleri arasında bir dönüş animasyonu gerçekleşir.

Bileşen, bir <View> bileşeni içine yerleştirilmiştir ve kartın üzerine dokunulduğunda handleFlip fonksiyonunu tetikleyen bir <Pressable> bileşeni içerir.

Kartın ön ve arka yüzlerini temsil etmek için iki adet <Animated.View> bileşeni kullanılır. frontAnimatedStyle ve backAnimatedStyle stilleri, kartın dönüşüne bağlı olarak ön ve arka yüzler arasında geçiş yapılmasını sağlar.

const wWidth = Dimensions.get("window").width;
const wHeight = Dimensions.get("window").height;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  text: {
    color: "white",
    fontSize: 24,
    fontWeight: "bold",
  },

  cardFrontBody: {
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#64676e",
    width: wWidth * 0.8,
    height: wHeight * 0.6,
    borderRadius: 10,
   
  cardArea: {
    justifyContent: "center",
    alignItems: "center",
    flex: 1,
  },
  card: {
    position: "absolute",
    backfaceVisibility: "hidden",
  },
  cardBackBody: {
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#64676e",
    width: wWidth * 0.8,
    height: wHeight * 0.5,
    borderRadius: 10,
    
});

İstediğiniz gibi stillendirebilir ve içerikleri değiştirerek bu fonksiyon ile flip card kullanabilirsiniz.
Tüm kod GitHubdan ulaşabilirsiniz.