[motion] animate() 함수 - 단일값과 일반 애니메이션

animate( ) 함수는 단일 값 애니메이션과 일반적인 애니메이션으로 구분할 수 있습니다

 

1. 단일 값 애니메이션과 일반적인 애니메이션의 차이

 

단일 값 애니메이션과 일반적인 애니메이션의 차이는 주로 애니메이션의 대상과 적용 방식에 있습니다.

 

 

1.  단일 값 애니메이션

 

- 대상: 숫자, 색상 등의 단일 값을 애니메이션할 수 있습니다.

- 적용 방식: `animate()` 함수를 사용하여 시작 값과 끝 값을 지정하고, `onUpdate` 콜백 함수를 통해 

  애니메이션 진행 중 값을 처리합니다.

- 예시:

  animate(0, 100, { onUpdate: latest => console.log(latest) });

 

2. 일반적인 애니메이션

- 대상: HTML, SVG 요소, CSS 스타일, 변환, CSS 변수 등 다양한 요소에 애니메이션을 적용할 수 있습니다.

- 적용 방식: `animate()` 함수나 `motion` 컴포넌트의 `animate` 속성을 통해 애니메이션 상태를 정의합니다.

  구체적인 예는 아래에 있습니다

3 . 주요 차이점

1. 대상 요소: 일반적인 애니메이션은 HTML/SVG 요소나 CSS 스타일을 대상으로 하지만, 단일 값 애니메이션은 숫자나 색상과 같은 단일 값을 대상으로 합니다.

2. 적용 방법: 일반적인 애니메이션은 `animate` 속성이나 `animate()` 함수를 통해 CSS 스타일을 직접 수정하지만, 단일 값 애니메이션은 `onUpdate` 콜백 함수를 통해 값을 처리합니다.

3. 사용 목적: 일반적인 애니메이션은 UI 요소의 위치, 크기, 색상 등을 애니메이션하는 데 주로 사용되며, 단일 값 애니메이션은 특정 값을 실시간으로 업데이트하는 데 유용합니다.

 

 

2. 일반적인 애니메이션의 구현 방법

1. 요소와 애니메이션 상태: 

 

animate(element, animationState)

2. 요소, 애니메이션 상태, 옵션: 

animate(element, animationState, options)

즉, animate() 함수의 괄호 안에는 최대 세 가지 인수가 들어갈 수 있습니다:

 

2 - 1. 요소: 애니메이션을 적용할 대상 요소.

• HTML/SVG 요소: DOM 요소 자체를 직접 전달할 수 있습니다.
• CSS 선택자: CSS 선택자 문자열을 통해 요소를 선택할 수 있습니다.

2 -  2. 애니메이션 상태: 애니메이션의 최종 상태를 정의하는 객체.

• CSS 스타일: x, y, scale, rotate, opacity 등 CSS 스타일 속성을 지정할 수 있습니다.
• CSS 변수: --custom-variable 형태로 CSS 변수를 애니메이션할 수 있습니다.
• SVG 경로: SVG 요소의 경로를 애니메이션할 수 있습니다.

2 -  3. 옵션: 애니메이션의 동작을 제어하는 옵션 객체.

• duration: 애니메이션 시간을 설정합니다.
• delay: 애니메이션 시작을 지연시킵니다.
• ease: 이징 함수를 설정합니다.
• repeat: 애니메이션 반복 횟수를 설정합니다.
• repeatType: 반복 방식을 설정합니다 (loop, reverse, mirror).
• onUpdate: 애니메이션 진행 중 값을 업데이트하는 콜백 함수입니다.
  
  

📢 주요 ease 함수들

• easeIn: 애니메이션이 느리게 시작하고 빠르게 끝납니다.
• easeOut: 애니메이션이 빠르게 시작하고 느리게 끝납니다.
• easeInOut: 애니메이션이 느리게 시작하고 끝납니다.
• backIn, backOut, backInOut: 애니메이션이 시작이나 끝에서 약간의 반동 효과를 줍니다.
• circIn, circOut, circInOut: 원형 경로를 따라 애니메이션을 만듭니다.
• anticipate: 애니메이션이 시작하기 전에 약간의 예측 동작을 합니다.
• linear: 애니메이션이 일정한 속도로 진행됩니다.
• steps: 애니메이션을 여러 단계로 나누어 진행합니다.
• cubicBezier: 사용자가 직접 이징 커브를 정의할 수 있습니다

 

키프레임을 애니메이션할 때 선택적으로 ease  함수를 배열로 설정하여 각 값 사이에 다른 ease  값을 설정할 수 있습니다:

animate(
  element,
  { x: [0, 100, 0] },
  { ease: ["easeIn", "easeOut"] }
)

 

https://motion.dev/docs/easing-functions

Easing functions | Motion for JavaScript

 

 

 

 

2- 4. 애니메이션 타입

 

tween: 기본적인 키프레임 애니메이션.
spring: 물리 기반의 스프링 애니메이션.
inertia: 초기 속도에 기반한 감속 애니메이션.

import { animate } from "motion/mini"
import { spring } from "motion"

animate(
  element,
  { transform: "translateX(100px)" },
  { type: spring, stiffness: 300 }
)

 

 

animate(slides.current[index], {
  x: 0, // 애니메이션 상태
  opacity: 1,
}, {
  delay: 0.5, // 옵션
  duration: 1,
});

이 예시에서는 세 개의 인수를 사용하여 요소를 애니메이션하고, 애니메이션 옵션을 설정합니다. 

만약 추가적인 인수가 필요하다면, 옵션 객체 내에서 여러 설정을 포함할 수 있습니다. 예를 들어, `onStart`, `onUpdate`, `onComplete` 같은 콜백 함수를 옵션 객체에 포함할 수 있습니다.

animate(slides.current[index], {
  x: 0,
  opacity: 1,
}, {
  delay: 0.5,
  duration: 1,
  onStart: () => console.log("애니메이션 시작"),
  onUpdate: (latest) => console.log("애니메이션 진행 중"),
  onComplete: () => console.log("애니메이션 완료"),
});