[ReactNative/TS] Animated.Value (1)

장동현·2021년 8월 29일

react native ts

ReactNative

목록 보기

6/12

React Native 에서는 애니메이션이 기존 CSS와 다르다는 것을 알 수 있다.
전체적인 R/N 에서의 애니메이션에 대해서 정리를 진행 하고 이에 대한 내용을 정리해보려고 한다.

R/N 애니메이션의 특징

리액트 네이티브 애니메이션은 두 가지 모드로 동작

자바스크립트 엔진 애니메이션 : 자바스크립트 엔진이 기본으로 제공하는 requestAnimationFrame 함수
네이티브 모듈 애니메이션 : 자바나 Objective-C로 구현한 애니메이션

초기의 애니메이션은 자바스크립트 엔진이 기본으로 제공하는
requestAnimation Frame API를 이용한 자바스크립트 엔진 애니메이션을 사용했지만
requestAnimation Frame 함수를 반복 호출하면 다른 UI 컴포넌트의 동작이 정지하는 버그가 생겼음

그럼 이 둘을 어떻게 분리를 하느냐

useNativeDriver = true || false;

Animated.Value 클래스

R/N 에서 Animated는 Value 클래스를 제공

Value 클래스는 애니메이션이 실행되면
┠ 값을 보간하는 number 타입 값을 value라는 속성에 저장하는 클래스
┗ value 속성값 : setValue 메서드를 사용하여 다른 값으로 변경가능!!!

만들어 써보기

간단한 값 변경하는 속성값

const animValue = new Animated.Value(0);
animVlaue.setValue(100);

R/N는 useRef 훅을 사용해서 이를 사용하는 것을 권장한다.
그 이유는 단순하게 위와 같이 설정을 하게 되면 재 랜더링(최적화)

export default function SomeComponent() {
  const animValue = new Animated.Value(0) // 재 랜더링 시 마다 생성
  const animValue2 = useRef(new Animated.Value(0)).current // 최초 랜더링 시 생성
}

다시 알아보는 useRef

useRef 훅에는 두 가지 버전이 존재하게 된다.

RefObject<T> 타입 객체를 반환하는 버전
MutableRefObject<T> 타입 객체를 반환하는 버전

MutableRefObject 타입 객체를 반환하는 useRef 훅

function useRef<T>(initialValue: T): MutableRefOjbect<T>

MutableRefObject 제네릭 타입에는 RefObject 타입처럼 current 라는 속성이 있음
current 타입은 T | null 이 아닌 T 라는 것을 명심!!!

MutableRefObject는 current 속성이 포함되어 있다는 것을 명심한다.

결론적으로 이게 무슨 소리냐?
┗ animVlaue가 null이 될 수 없으며 변하지도 않음
useMemo, useCallback의 의존성 목록에 추가할 필요가 없음

const animValue = useRef(new Animated.Value(0)).current;

Animated.createAnimatedComponent

Animated.createAnimatedComponent gkatnsms
┠ 다른 컴포넌트를 매개변수로 입력받아 Animated.Value 타입 객체를 처리할 수 있는
┗ Animated.Value 타입 객체를 처리할 수 있는 기능을 가진 새로운 컴포넌트 만든다.

  type AnimatedComponent = Animated.createAnimatedComponent
  export function createAnimatedComponent<T>(component:T): AnimatedComponent<T>

예시

Animated.View = Animated.createAnimatedComponent(View);

Animated.timing 함수

Animated.timing 함수는 다음 코드에서 보듯 value와 config 두 개의 매개변수를 입력 받아서
┗ Animated.CompositeAniation 타입 객체를 반환하는 함수

export const Animated.timing: (
  value: Animated.Value | Animated.ValueXY,
  config: Animated.TimingAnimationConfig
) => Animated.CompositeAnimation;

timing 함수의 매개변수

위 코드에서 볼 수 있듯 매개변수 config는 다음 타입을 가진 객체
useNativeDriver와 toValue는 반드시 있어야 하는 필수 속성
나머지 3개 속성은 선택속성
1. duration?: 지속시간
2. delay?: 시작시간
3. easing?: Easing이 제공하는 보간 함수
┗ easing의 경우 Easing.bounce와 같은 보간 함수를 사용하게 된다.

Animated.CompositeAnimation 타입 객체

Animated.timing은 Animated.CompositeAnimation 타입 객체를 반환함
이 타입은 start 메서드를 내장
start를 호출해야 실제 애니메이션이 진행

export interface CompositeAnimation {
  start: (callback?: EndCAllback)=> void;
}
type EndResult = {finished: boolean};
type EndCallback = (result: EndResult) => void;

여기서 사용되는 EndCallback에서 종료 시점에 대한 callback 함수를 지정이 가능하다.
Animated.timing(animValue, {toValue: 1, duration: 1000, useNativeDriver: true})
.start(()=>console.log('animated end'));

addListener 메서드

Animated.Value 클래스는 다음 코드에서 보는 addListender 메서드를 제공
이 메서드의 콜백 함수를 통해 현재 보간 중인 값을 얻을 수 있다.

export class Value {
  addLisenter(callback: ValueListenrCallback): void;
  removeListenr(id: string): void;
  removeAllListeners(): void;
}
type ValueListenrCallback = (state: {value: number}) => void;