React Native) Animated로 애니메이션 적용하기

Animated 컴포넌트를 활용한 애니메이션 효과 적용하기

---

 

Animated 객체를 활용한 애니메이션 효과 구현

Value를 만들고 해당 Value에 시작값, 종료값, 시간 등을 부여하여 변경 컨트롤을 함
이를 위해, useRef를 활용하여 컴포넌트 생성~종료까지 레퍼런스 해둠

활용 예제 - Animated 객체 생성 및 초기값 설정)

import {Animated} from 'react-native';

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

활용 예제 - Animated 객체 적용)

<Animated.View
	style={[
    	styles.rectangle,
        {
        	opacity: animation,
        }
    ]}
/>

활용 예제 - Button을 활용한 Animated 객체 컨트롤)

<Button
    title="FadeOut"
    onPress={() => {
        Animated.timing(animation, {
            toValue: 0, // 어떤 값으로 변경할지 - 필수
            duration: 1000, // 애니메이션에 걸리는 시간(밀리세컨드) - 기본값 : 500
            delay: 0, // 딜레이 이후 애니메이션 시작 - 기본값 : 0
            useNativeDriver: true, // 네이티브 드라이버 사용 여부 - 필수
            isInteraction: true, // 사용자 인터랙션에 의해 시작한 애니메이션인지 지정 - 기본값: true
            // 애니메이션 속도 변경 함수 - 기본값: Easing.inOut(Easing.ease)
            easing: Easing.inOut(Easing.ease),
        }).start(() => {
        // 애니메이션 처리 완료 후 실행할 작업
        })
    }}
/>

---

 

interpolate로 여러 스타일 적용하기

컴포넌트가 우측으로 움직이면서 서서히 사라지는 효과 적용하기 위해 여러 속성값에 interpolate로 컨트롤하기

<Animated.View
	style={[
    	styles.rectangle,
        {
        	transform: [
            	{
                	translateX: animatioin.interpolate({
                    	inputRange: [0, 1],
                        outputRange: [0, 150],
                    }),
                },
            ],
        	opacity: animation.interpolate({
            	inputRange: [0, 1],
                outputRange: [1, 0],
            }),
        },
    ]}
/>

Value 값이 0~1로 변경하는 동안 translateX 값은 0~150으로, opacity는 1~0으로 변경됨

React Native) Animated로 애니메이션 적용하기

---

 

spring 사용하기

timing 이외에 사용할 수 있는 spring 함수
- 차이점: toValue로 지정한 값으로 서서히 변하는 것이 아니라 마치 스프링 처럼 통통 튀는 효과 발생

사용 예시)

Animated.spring(animation, {
	toValue: hidden ? 1 : 0,
    useNativeDriver: true,
    tension: 45,
    friction: 5,
}).start();

- tension : 강도(기본값: 40)
- friction: 감속(기본값: 7)
- speed: 속도(기본값: 12)
- bounciness: 탄력성(기본값: 8)