What did I learn 블로그의 Introduction to animation in React Native 번역 자료입니다. 번역에 문제가 있다면 댓글 달아주시구요. 원문을 보시기를 추천드립니다.

  1. React Native 애니메이션 소개
  2. 리액트 네이티브 애니메이션에 대한 추가 정보

 

애니메이션을 사용하면 실세계의 오브젝트를 이동하거나 모양이나 색상을 변경하여 실제 상호작용을 모방 할 수 있습니다.

애니메이션으로 보다 생동감있는 형태로 앱을 꾸밀 수 있습니다. 응용 프로그램의 일부를 이해해서 사용자 경험을 향상시킵니다. 과도한 애니메이션은 사용자의 주의를 산만하게 하고 문제를 악화시킬 수 있습니다.

애니메이션은 광범위한 주제입니다. 오늘 그 기본을 살펴보고 싶습니다. 사용할 수있는 애니메이션 타입과 React Native에서 애니메이션을 만드는 방법에 대해 알아 보겠습니다.

React Native의 Animated API와 이를 사용하여 간단한 오브젝트에 애니메이션을 적용하는 방법을 살펴 보겠습니다.

시작하기 전에 어떤 종류의 애니메이션을 적용 할 수 있는지 그리고 어떻게 애니메이션을 적용 할 수 있는지 알아야 합니다.

React Native는 애니메이션에 사용할 수있는 4 가지 컴포넌트를 제공합니다.

  • Animated.Image
  • Animated.ScrollView
  • Animated.Text
  • Animated.View

이 뿐 아닌 세 가지 애니메이션 타입 이 있습니다.

  • Timing - 시간이 지남에 따라 값을 에니메이션(animates) 합니다.
  • Spring - 간단한 스프링 물리 모델을 제공합니다.
  • Decay - 초기 속도(initial velocity)로 시작하여 점차 정지합니다.

오늘 예에서는 Timing(타이밍) 타입을 사용하여 Animated.View 컴포넌트에 애니메이션을 적용합니다. 가장 기본적인 접근 방식이기 때문입니다.

 

기본 구성 (Basic configuration)

응용 프로그램에서 애니메이션을 적용하는 데 필요한 기본 구성을 살펴 보겠습니다.

먼저 new Animated.Value(n) (또는 2D 애니메이션 구동을위한 new Animated.ValueXY({x : n, y : m}))을 사용하여 초기 값을 정의해야합니다. 다양한 곳에서 초기화 할 수 있습니다. 그 중 하나는 컴포넌트의 상태(state)에 유지하는 것입니다.

애니메이션 사용을 시작하려면 초기 값을 정의해야합니다.

class SomeComponent extends React.Component {
  state = {
    animation: new Animated.Value(0)
  }
  // ...
}

그다음 Animated 모듈을 가져(import) 옵니다.

import { Animated } from 'react-native';

다음으로 Animated.View 컴포넌트를 렌더링합니다.

render() {
  return (
    <Animated.View style={[objectStyles, animationStyles]}>
    </Animated.View>
  );
}

여기에서는 스타일을 두 부분으로 나누었습니다.

  • objectStyles- 모양과 모양을 설명하는 Animated 컴포넌트의 정적 스타일
  • animationStyles- 시간이 지남에 따라 변경할 스타일

마지막 조각과 마찬가지로 timing() 함수를 호출하여 애니메이션을 시작해야합니다. 이 함수는 “animated value”을 첫 번째 인수(argument)로, 구성 개체(configuration object)를 두 번째로 받습니다. 그다음 애니메이션 오브젝트에서 start() 함수를 호출하여 애니메이션을 시작합니다.

componentDidMount() {
  Animated.timing(
    this.state.animation,
    {
      toValue: 250,
      duration: 2000
    }
  ).start();
}

이 예제에서는 componentDidMount() 콜백에서 애니메이션을 시작합니다. 애니메이션 값이 0에서 250으로 점차 변경됩니다. toValue 매개 변수는 이를 나타냅니다. 그다음 지속 시간 매개 변수를 설정하여 애니메이션이 2초 동안 지속(duration)되도록 합니다.

첫 번째 예로 넘어 갑시다. 그러면 이 설명이 더 의미가 있을 것입니다.

 

Movement

본 예제에서는 상자를 화면 아래로 이동합니다. 화면 아래쪽으로 개체를 이동하려면 좌표 그리드의 Y 값을 늘려야합니다.

좌표계 원점 (0,0)은 화면의 왼쪽 상단입니다. x 좌표(x-coordinates)는 오른쪽으로 증가하고 y 좌표(y-coordinates)는 위에서 아래로 증가합니다.

위에서 설명한 기본 구성에 따라 초기 Animation 값을 0으로 설정했습니다.

state = {
  animation: new Animated.Value(0)
}

그런 다음 componentDidMount() 콜백에서 애니메이션을 시작합니다.

componentDidMount() {
  Animated.timing(
    this.state.animation,
    {
      toValue: 250,
      duration: 2000
    }
  ).start();
}

그리고 적당한 애니메이션 스타일로 오브젝트를 렌더링하십시오.

render() {
  const animationStyles = {
    transform: [
      { translateY: this.state.animation }
    ]
  };

  return (
    <Animated.View style={[objectStyles.object, animationStyles]}>
    </Animated.View>
  );
}

상자를 이동하기 위해 변환(transform) 스타일을 사용하여 translateY를 현재 애니메이션 값으로 변경합니다. Animation은 해당 값을 0에서 250으로 변경하고 오브젝트의 Y 위치를 업데이트합니다.

아래 예에서 볼 수 있습니다.

Vertical motion example

해당 예제의 소스 코드

 

Fading in and out

오브젝트에 페이딩 효과(fading effect)를 적용을 위해 시간 경과에 따라 해당 오브젝트의 불투명도(opacity) 속성을 변경할 수 있습니다. 1의 값은 100% 가시(visible) 오브젝트이고 0은 완전히 투명한 오브젝트입니다.

페이드 아웃 효과(fade out effect)를 만들려면 불투명도를 1에서 0으로 변경해야합니다.

따라서 애니메이션 값을 1로 초기화합니다.

state = {
  animation: new Animated.Value(1)
}

2초 동안 0으로 변경합니다.

Animated.timing(
  this.state.animation,
  {
    toValue: 0,
    duration: 2000
  }
).start();

애니메이션 오브젝트의 불투명도를 변경하려면 이 값을 사용하십시오.

const animationStyles = {
  opacity: this.state.animation
};

페이드인 효과(fade in effect)를 얻으려면 값을 0에서 1로 변경해야합니다.

Fade out example

Fade in example

예제의 Fade outFade in 소스 코드

 

Scale

개체의 크기를 조정하기 위해 transform.scale 스타일을 변경할 수 있습니다.

const animationStyles = {
  transform: [
    { scale: this.state.animation }
  ]
};

아래에서 애니메이션 값이 1 (오브젝트 크기의 100%)에서 2 (2 배 더 큼)로 변경되는 예를 볼 수 있습니다.

Positive scale example

상자 안의 텍스트도 크기가 조정됩니다.

오브젝트를 음수 값으로 조정할 수 있습니다. 플립 효과(flip effect)를 만듭니다.

오브젝트를 1에서 -2로 스케일링하는 예제입니다.

Negative scale example

사용하면 다른 효과를 얻을 수 있습니다.

예제의 positive, negative 스케일 소스 코드

 

Resizing

오브젝트의 크기를 조정(resize)하려면 width 와 height 속성을 업데이트해야합니다.

const animationStyles = {
  width: this.state.animation,
  height: this.state.animation
};

그다음 해당 값을 늘리거나 줄입니다.

Increasing size example

Decreasing size example

오브젝트의 크기를 조절하기 위해 크기를 늘릴 때 상자 안의 텍스트가 어떻게 동작하는지 주의하십시오.

예제의 increasing, decreasing 소스 코드

 

Interpolation

다음 예제로 넘어 가기 전에 (React Native 애니메이션의 맥락(context)에서) 보간(interpolation)이란 무엇이고 어떻게 사용하는지 배워야합니다.

경우에 따라 값을 n에서 m으로 변경 한 결과로는 충분하지 않습니다. 일부 오브젝트 스타일은 정수가 아닌 다른 형식을 받아들이기 때문에 커스텀 값을 가져와야 할 수도 있습니다. 예를 들면 colors 와 rotation degrees가 있습니다.

이 경우 interpolate() 함수를 호출하여 사용자 정의 값 범위를 작성할 수 있습니다.

예를 들어 화면의 퍼센트 사이즈를 사용하여 상자의 크기를 조정하려는 경우에 보간(interpolation)을 실행 할 수 있습니다.

value.interpolate({
  inputRange: [0, 1],
  outputRange: ['0%', '100%'],
});

이 함수는 두 개의 키가있는 오브젝트를 받습니다.

  • inputRange - 애니메이션 값의 범위
  • outputRange - 보간 된 값이 inputRange에 맵핑 된 결과

이 예제에서 애니메이션의 값이 0에서 1로 변경되면 퍼센트가 0%에서 100%로 점차 변경됩니다.

다음 예에서 보간이 작동하는 것을 볼 수 있습니다.

 

Rotation

회전 효과를 얻기 위해 애니메이션 값을 0에서 1로 변경하고 transform.rotate 스타일을 업데이트하겠습니다.

이제 해당 스타일은 숫자 값을 지원하지 않으므로 보간(interpolation)을 적용 할 것입니다.

const animationStyles = {
  transform: [
    {
      rotate: this.state.animation.interpolate({
        inputRange: [0, 1],
        outputRange: ['0deg', '360deg']
      })
    }
  ]
};

여기서 우리는 0도에서 360까지의 값을 변경하는 보간 규칙을 정의합니다.

결과는 다음과 같습니다.

Rotate example

옵션으로 transform.rotateX 또는 transform.rotateY 스타일을 업데이트하면 다음과 같은 효과가 있습니다.

RotateX example

RotateY example

예제의 Rotate, RotateXRotateY 소스 코드

 

Color change

시간이 지남에 따라 오브젝트의 색상을 변경할 수도 있습니다.

상자의 backgroundColor 변경을 시도해 보겠습니다.

const animationStyles = {
  backgroundColor: this.state.animation.interpolate({
    inputRange: [0, 0.5, 1],
    outputRange: ['orange', 'rgb(0, 200, 0)', 'purple']
  })
};

보다시피 보간(interpolation)에는 둘 이상의 입력과 출력 값이 포함될 수 있습니다. 이 예제에서는 애니메이션이 오렌지색에서 시작하여 중간에 배경색을 녹색으로 변경하도록 합니다. 그러면 animation이 상자를 자주색(purple)으로 칠합니다.

backgroundColor 스타일은 텍스트와 RGB형식을 모두 지원하기에 예제를 위해 사용하고 있습니다.

모습은 다음과 같습니다.

Change color example

예제의 소스코드 입니다.

 

마무리(Wrapping up)

대부분의 기본 애니메이션 예제를 다뤘습니다. React Native의 Animated API로 쉽게 구축 할 수 있습니다. 우리는 다른 전환(transitions)뿐 아니라 오브젝트를 움직이고 크기를 조정하고 재조정(rescale)하는 방법을 배웠습니다.

응용 프로그램의 애니메이션을 가져 오는 것이 좋은 시작입니다.

다음 아티클에서는 애니메이션 주제에 대해 자세히 살펴보고 몇 가지 고급 기술을 배우겠습니다.

GitHub 페이지에서 예제의 전체 저장소를 찾을 수 있습니다. 다음에 또 만나요.