[ReactNative/TS] Animated.Value (1)

ww8007·2021년 8월 29일
0

ReactNative

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

R/N 애니메이션의 특징

  • 리액트 네이티브 애니메이션은 두 가지 모드로 동작
  1. 자바스크립트 엔진 애니메이션 : 자바스크립트 엔진이 기본으로 제공하는 requestAnimationFrame 함수
  2. 네이티브 모듈 애니메이션 : 자바나 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 훅에는 두 가지 버전이 존재하게 된다.
  1. RefObject<T> 타입 객체를 반환하는 버전
  2. 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>

예시
```ts
Animated.View = Animated.createAnimatedComponent(View);


## Animated.timing 함수

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

```ts
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;

실제 보간 값을 얻어서 화면에 출력하는 예

profile
Frontend 개발자를 꿈꾸는 대학생 입니다.

0개의 댓글