[react-native] Animated

 react-native의 Animated 라이브러리는 애니메이션을 구현하는 데 사용되며, 여러 가지 유용한 기능을 제공한다.

 

이 라이브러리는 다양한 유형의 값과 애니메이션을 생성하고, 뷰에 연결할 수 있게 해준다.

 

react-native에서 기본으로 제공되는 라이브러리기 때문에 따로 설치를 할 필요는 없다.

 

예제 코드와 함께 확인해보자.

---

예제 1: 페이드 인 애니메이션

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

const FadeInView = (props) => {
  const fadeAnim = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.timing(
      fadeAnim,
      {
        toValue: 1,
        duration: 1000,
        useNativeDriver: true,
      }
    ).start();
  }, [fadeAnim]);

  return (
    <Animated.View
      style={{
        ...props.style,
        opacity: fadeAnim,
      }}
    >
      {props.children}
    </Animated.View>
  );
};

// 사용 예시
<FadeInView style={{width: 250, height: 50, backgroundColor: 'powderblue'}}>
  <Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>Fade In</Text>
</FadeInView>

 

위와 같이 기본적인 형태는 new Animated.Value(0) 객체를 Ref로 잡아서 사용을 한다.

 

Value 메서드로 해당 에니메이션 객체의 Default value 를 설정하고, 이를 value에 따라 에니메이션 효과가 변경되는 구조이다.

 

위 코드에서는 useRef로 애니메이션 상태를 생성하고, useEffect 내에서 Animated.timing을 사용해 애니메이션을 정의한다. opacity 값을 0에서 1로 점차 변경하여 페이드 인 효과를 만든다.

 

예제 2: 이동 애니메이션

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

const MovingView = () => {
  const moveAnim = useRef(new Animated.ValueXY({x: 0, y: 0})).current;

  useEffect(() => {
    Animated.spring(
      moveAnim,
      {
        toValue: {x: 100, y: 100},
        useNativeDriver: false
      }
    ).start();
  }, [moveAnim]);

  return (
    <Animated.View
      style={{
        transform: moveAnim.getTranslateTransform()
      }}
    >
      {/* 컴포넌트 내용 */}
    </Animated.View>
  );
};

 

이 코드에서는 MovingView 컴포넌트를 이용하여 이동하는 애니메이션을 구현한다.

 

Animated.ValueXY를 사용하여 초기 위치를 정의하고, Animated.spring 함수로 이동할 위치와 애니메이션 효과를 설정한다.

 

transform 속성에 애니메이션 값을 연결하여 컴포넌트가 이동하게 만든다.

 

예제 3: 크기 변경 애니메이션

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

const ScalingView = () => {
  const scaleAnim = useRef(new Animated.Value(1)).current;

  useEffect(() => {
    Animated.timing(
      scaleAnim,
      {
        toValue: 2,
        duration: 1000,
        useNativeDriver: true
      }
    ).start();
  }, [scaleAnim]);

  return (
    <Animated.View
      style={{
        transform: [{ scale: scaleAnim }]
      }}
    >
      {/* 컴포넌트 내용 */}
    </Animated.View>
  );
};

 

이 코드는 ScalingView 컴포넌트를 통해 크기를 변경하는 애니메이션을 구현한다.

 

Animated.Value를 사용하여 초기 크기를 설정하고, Animated.timing으로 크기가 커지는 애니메이션을 정의한다.

 

transform 속성에 scale 값을 연결하여 크기가 변경되는 효과를 만든다.

---

이러한 방식으로 Animated 라이브러리를 활용하면 react-native에서 다양하고 효과적인 애니메이션을 쉽게 구현할 수 있다.