Skip to main content
Version: Next

이징(Easing)

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

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

사전 정의된 애니메이션​

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

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

기본 제공 트랜지션 함수​

세 가지 기본 트랜지션 함수를 제공한다:

poly 함수를 사용하면 4차, 5차 함수와 같은 고차원 함수를 구현할 수 있다.

추가 기능​

다음 메서드들은 추가적인 수학적 기능을 제공한다:

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

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

  • 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);

linear() 함수는 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);

이차 함수 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);

사인 함수를 나타낸다. 이 함수는 부드러운 진동 형태의 움직임을 생성한다.

자세한 내용은 easings.net에서 확인할 수 있다.

circle()​

tsx
static circle(t: number);

원형 함수이다.

https://easings.net/#easeInCirc

exp()​

tsx
static exp(t: number);

지수 함수를 나타낸다. 이 함수는 시간에 따라 점점 가속되는 효과를 구현할 때 사용된다.

자세한 내용은 easings.net에서 확인할 수 있다.

elastic()​

tsx
static elastic(bounciness: number);

탄성 효과를 구현하는 기본적인 상호작용이다. 스프링이 앞뒤로 진동하는 것과 유사한 움직임을 보인다.

기본값인 bounciness 1은 한 번 약간의 오버슈트를 발생시킨다. bounciness가 0이면 오버슈트가 전혀 발생하지 않으며, 1보다 큰 N 값은 약 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 트랜지션(Transitions)의 transition-timing-function과 동일한 3차 베지어 곡선(cubic bezier curve)을 제공한다.

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

in()​

tsx
static in(easing: number);

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

out()​

tsx
static out(easing: number);

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

inOut()​

tsx
static inOut(easing: number);

이 함수는 모든 easing 함수를 대칭적으로 만든다. easing 함수는 지속 시간의 절반 동안 앞으로 진행되고, 나머지 절반 동안은 뒤로 진행된다.