[React Native] 애니메이션

애니메이션은 UI에 생동감을 불어넣고 사용자의 관심을 끄는 중요한 요소입니다.
React Native는 애니메이션을 쉽게 구현할 수 있는 도구와 API를 제공하며, 복잡한 상호작용도 효율적으로 구현할 수 있도록 지원합니다.
이번 포스팅에서는 React Native의 애니메이션 시스템을 이해하고 활용하는 방법을 알아보겠습니다.

출처: Youtube-BungFerdly

---

1. React Native 애니메이션의 기본 개념

React Native의 애니메이션은 JavaScript로 작성되지만 네이티브 드라이버를 통해 처리되어 성능이 우수합니다.
주요 API는 아래와 같습니다.

• Animated API: 애니메이션의 핵심 API로, 값을 조작하여 UI를 변경합니다.
• LayoutAnimation API: 레이아웃 변경 시 간단히 애니메이션 효과를 적용할 수 있습니다.
• React Native Reanimated: 복잡한 애니메이션을 성능 저하 없이 구현할 수 있는 라이브러리

2. Animated API 활용

Animated는 애니메이션 값을 관리하는 객체입니다.
React Native에서 제공하는 주요 애니메이션 값과 함수는 다음과 같습니다.

• Animated.Value: 애니메이션 상태를 저장하는 변수
• Animated.timing: 지정된 시간 동안 특정 값으로 변환
• Animated.spring: 스프링 물리법칙을 기반으로 한 애니메이션
• Animated.parallel: 여러 애니메이션을 동시에 실행
• Animated.sequence: 애니메이션을 순차적으로 실행

예제1: 기본 페이즈 애니메이션

import React, { useRef, useEffect } from 'react';
import { Animated, View, StyleSheet } from 'react-native;

const FadeInView = ({ children }) => {
  const fadeAnim = useRef(new Animated.Value(0)).current; // 초기 값 0
  
  useEffect(() => {
    Animated.timing(fadeAnim, {
      toValue: 1, // 1로 변화
      duration: 1000, // 1초 동안
      useNativeDriver: true, // 네이티브 드라이버 사용
    }).start();
  }, [fadeAnim]);
  
  return (
    <Animated.View style={{ ...styles.container, opacity: fadeAnim }}>
      {children}
    </Animated.View>
  );
};

const App = () => {
  return (
    <FadeInView>
      <View style={styles.box} />
    </FadeInView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'cetner',
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'blue',
  },
});

export default App;

위 코드에서는 Animated.Value를 이용해 컴포넌트의 opacity를 조작하여 페이드 인 효과를 구현했습니다.

3. LayoutAnimation API 활용

LayoutAnimation은 컴포넌트 레이아웃 변경 시 애니메이션을 자동으로 적용하는 간단한 API입니다.
예제: 레이아웃 변경 애니메이션

import React, { useState } from 'react';
import { LayoutAnimation, StyleSheet, View, Button } from 'react-native';

const App = () => {
  const [expanded, setExpanded] = useState(false);
  
  const toggleExpand = () => {
    LayoutAnimation.cinfigureNext(LayoutAnimation.Presets.easeInEaseOut);
    setExpanded(!expanded);
  };
  
  return (
    <View style={styles.container}>
      <Button title="Toggle" onPress={toggleExpand} />
      <View
        style={[
          styles.box,
          { height: expanded ? 200 : 11, backgroundColor: expanded ? 'blue' : 'green' },
        ]}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    width: 100,
  },
});

export default App;

LayoutAnimation.configureNext를 사용해 버튼 클릭 시 레이아웃 변경을 부드럽게 전환합니다.

4. React Native Reanimated 활용

복잡한 애니메이션을 고성능으로 구현하기 위해 사용되는 라이브러리입니다.
Animated 보다 강렬하며, 제스처와 결합하여 자연스러운 사용자 상호작용을 만듭니다.
예제: 드래그 가능한 박스

import React from 'react';
import { View, StyleSheet } from 'react-native';
import Animated, { useAnimatedStyle, useStaredValue, withSpring } from 'react-native-reanimated';
import { PanGestureHandler } from 'react-native-gesture-handler';

const App = () => {
  const x = useSharedValue(0);
  const y = useSharedValue(0);
  
  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ translateX: x.value }, {translateY: y.value }],
  }));
  
  const onGestureEvent = (event) => {
    x.value = event.translationX;
    y.value = event.translationY;
  };
  
  const onGestureEnd = () => {
    x.value = withSpring(0);
    y.value = withSpring(0);
  };
  
  return (
    <PanGestureHandler onGestureEvent={onGestureEvent} onEnded={onGestureEnd}>
      <Animated.View style={[styles.box, animatedStyle]} />
    </PanGestureHandler>
  );
};

const styles = StyleSheet.create({
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'red',
  },
});

export deafult App;

useSharedValue를 사용해 애니메이션 값을 공유하고, 제스처 기반애니메이션을 구현합니다.

---

React Native의 애니메이션은 사용자 경험을 향상시키는 강력한 도구입니다.
Animated API와 LayoutAnimation으로 기본 애니메이션을 구현할 수 있으며, 복잡한 상호작용을 위해 Reanimated와 같은 고급 라이브러리를 활용할 수 있습니다.
앱의 목적에 맞는 애니메이션을 적절히 적용하면 앱의 사용성을 크게 향상시킬 수 있습니다.