Skip to main content

이징(Easing)

Easing 모듈은 일반적인 이징 함수를 구현한다. 이 모듈은 Animated.timing()에서 애니메이션의 물리적으로 자연스러운 움직임을 전달하기 위해 사용한다.

일부 일반적인 이징 함수의 시각화는 https://easings.net/에서 확인할 수 있다.

사전 정의된 애니메이션​

Easing 모듈은 다음과 같은 메서드를 통해 여러 가지 미리 정의된 애니메이션을 제공한다:

  • back: 객체가 앞으로 이동하기 전에 약간 뒤로 물러나는 기본 애니메이션을 제공한다.
  • bounce: 튀는 듯한 효과의 애니메이션을 제공한다.
  • ease: 기본적인 관성 애니메이션을 제공한다.
  • elastic: 기본적인 스프링 효과를 제공한다.

기본 이징 함수​

세 가지 기본 이징 함수를 제공한다:

poly 함수를 사용하면 4차, 5차 및 그 이상의 고차 함수를 구현할 수 있다.

추가적인 수학 함수는 다음과 같은 메서드로 제공된다:

  • bezier는 3차 베지어 곡선을 제공한다.
  • circle는 원형 함수를 제공한다.
  • sin는 사인 함수를 제공한다.
  • exp는 지수 함수를 제공한다.

다음 헬퍼 함수들은 다른 이징 함수를 수정하는 데 사용된다.

  • in은 이징 함수를 정방향으로 실행한다.
  • inOut은 이징 함수를 대칭적으로 만든다.
  • out은 이징 함수를 역방향으로 실행한다.

참고 자료

메서드​

step0()​

tsx
static step0(n: number);

스텝 함수로, n이 양수일 때 항상 1을 반환한다.

step1()​

tsx
static step1(n: number);

단계 함수로, n이 1보다 크거나 같으면 1을 반환한다.

linear()​

tsx
static linear(t: number);

선형 함수인 f(t) = t를 나타낸다. 위치는 경과 시간과 1:1로 비례한다.

https://cubic-bezier.com/#0,0,1,1

ease()​

tsx
static ease(t: number);

기본적인 관성 동작을 구현한다. 물체가 천천히 가속하면서 속도를 내는 것과 유사한 효과를 제공한다.

https://cubic-bezier.com/#.42,0,1,1

quad()​

tsx
static quad(t: number);

quad()는 2차 함수 f(t) = t * t를 나타낸다. 위치는 경과 시간의 제곱과 같다.

https://easings.net/#easeInQuad

cubic()​

tsx
static cubic(t: number);

입력값 t의 세제곱을 반환하는 함수로, f(t) = t * t * t 형태를 가진다. 시간이 지남에 따라 위치가 세제곱으로 변화한다.

https://easings.net/#easeInCubic

poly()​

tsx
static poly(n: number);

거듭제곱 함수다. 위치는 경과 시간의 N제곱과 같다.

n = 4: https://easings.net/#easeInQuart
n = 5: https://easings.net/#easeInQuint

sin()​

tsx
static sin(t: number);

사인 함수를 사용한 부드러운 변화를 구현한다. 이 함수는 주로 애니메이션의 easing 효과를 만들 때 활용한다.

https://easings.net/#easeInSine

circle()​

tsx
static circle(t: number);

원형 함수를 나타낸다. 이 함수는 주로 애니메이션의 easing 효과를 구현할 때 사용한다.

https://easings.net/#easeInCirc

exp()​

tsx
static exp(t: number);

지수 함수를 나타낸다.

https://easings.net/#easeInExpo

elastic()​

tsx
static elastic(bounciness: number);

스프링이 앞뒤로 진동하는 것과 유사한 기본적인 탄성 효과를 제공한다.

기본값인 bounciness가 1일 때는 약간의 오버슈트가 발생한다. bounciness가 0이면 오버슈트가 전혀 없고, bounciness가 N > 1이면 약 N번 정도 오버슈트가 발생한다.

https://easings.net/#easeInElastic

back()​

tsx
static back(s)

Animated.parallel()과 함께 사용하여 애니메이션이 시작될 때 객체가 약간 뒤로 이동하는 기본 효과를 만든다.

bounce()​

tsx
static bounce(t: number);

기본적인 바운스 효과를 제공한다.

https://easings.net/#easeInBounce

bezier()​

tsx
static bezier(x1: number, y1: number, x2: number, y2: number);

CSS 트랜지션의 transition-timing-function과 동일한 3차 베지어 곡선을 제공한다.

3차 베지어 곡선을 시각적으로 확인할 수 있는 유용한 도구는 https://cubic-bezier.com/에서 찾을 수 있다.

in()​

tsx
static in(easing: number);

이징 함수를 정방향으로 실행한다.

out()​

tsx
static out(easing: number);

이징(easing) 함수를 역방향으로 실행한다.

inOut()​

tsx
static inOut(easing: number);

어떤 이징 함수든 대칭적으로 동작하도록 만든다. 이징 함수는 지속 시간의 절반 동안 앞으로 진행한 후, 나머지 절반 동안 뒤로 진행한다.