리액트 네이티브 애니메이션 효과를 위한 객체
import React, {useRef} from 'react';
import {Animated} from 'react-native'
function Sample() {
const animation = useRef(new Animated.Value(1)).current;
}애니메이션의 값을 조절할 Value 를 만들어야 한다
Value 를 만들 때는 useRef 를 사용하여 값을 기억하도록 한다
useRef 는 컴포넌트 레퍼런스를 선택할 때 사용하기도 하지만
특정 값을 리렌더링과 관계 없이 컴포넌트 라이프 사이클이 유지되는 동안 재사용할 때 사용한다
예제에서는 animaion 이라는 Value 를 생성
animated 객체를 사용할 때는 Animated.View 등 사용할 컴포넌트 명을 뒤에 .으로 이어서 작성한다
<Animated.View style={{opacity: animation}}></Animated.View>Animated.Text, Animated.Image 등 다양하게 사용 가능
예제에서는 animation 이라는 값을 opacity 를 조절하는데 사용했다
이후 Value 변경 시 Animated.timing 이라는 메서드를 사용한다
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(() => {
// 애니메이션 처리 완료 후 실행할 작업
})toValue 와 useNativeDriver 값은 필수로 지정되어야 한다
toValue 는 목표 값
useNativeDriver 는 애니메이션 처리 작업을 자바스크립트 엔진이 아닌 네이티브에서 진행하게 하는 옵션으로
transform, opacity 처럼 화면 레이아웃과 관련 없는 스타일에만 적용 가능하다
left, width, paddingLeft, marginLeft 와 같은 스타일에는 useNativeDriver 값을 false 로 주어야 한다
에니메이션은 .start() 메서드로 시작하고 .start() 메서드는 콜백 함수를 받을 수 있다
interpolate
interpolate 메서드 사용 시 Value 가 지니고 있는 값 기준으로 새로운 값을 생성한다
예제에서 만든 animation 값으로 새로운 값을 생성한다
값의 입력 범위와 출력 범위를 지정하면 새로운 값이 생성된다
const animation = useRef(new Animated.Value(1)).current;
animation.interpolate({
inputRange: [0, 1],
outputRange: [0, 150],
})위와 같이 작성 시 Value 의 값이 0 일 때는 0, 1일 때는 150 의 값을 지니게된다
spring
Animated.spring 메서드를 사용하면 스프링처럼 튀는 효과를 줄 수 있다
timing 과 사용법은 비슷하지만 toValue 로 지정한 값으로 변하는 것이 아니라
스프링처럼 튀는 효과를 준다
예를 들어 0에서 1로 설정한다면 다음과 같이 수치가 변경된다
0 → 1.2 → 0.9 → 1.1 → 1
useEffect(() => {
Animated.spring(animation, {
toValue: hidden ? 1 : 0,
useNativeDriver: true,
tension: 45,
friction: 5,
}).start();
}, [animation, hidden]);- tension: 강도 (default 40)
- friction: 감속 (default 7)
- speed: 속도(default 12)
- bounciness: 탄력성(default 8)
tension/friction을 같이 사용하거나
speed/bounciness를 같이 사용할 수 있지만 다른 조합으로는 사용하지 못한다
