6.5.1 애니메이션 연습하기

리액트 네이티브에서 애니메이션을 구현할 때는 Animated라는 객체를 사용합니다. 우선 간단한 사용법부터 알아볼까요? Animated를 사용하려면 일단 Value를 하나 만들어야 합니다.

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

function Sample() {
  const animation = useRef(new Animated.Value(1)).current;
}

Value를 만들 때는 이렇게 useRef를 사용해야 합니다. 이전에 컴포넌트의 레퍼런스를 선택할 때 useRef를 사용했는데, 레퍼런스 선택 외에 특정 값을 컴포넌트 생성 시에 설정하고, 컴포넌트가 사라질 때까지 재사용하고 싶은 경우에도 이와 같이 useRef를 사용해 구현할 수 있답니다.

Value의 생성자 함수의 인자에는 초깃값을 넣어줍니다. 그리고 이 값을 리액트 컴포넌트의 스타일에 적용할 때는 다음과 같이 사용합니다.

<Animated.View style={{opacity: animation}}></Animated.View>

즉, Animated. 뒤에 사용하고 싶은 리액트 네이티브 컴포넌트의 이름을 넣어주면 됩니다(예: Animated.View, Animated.Text, Animated.Image…).