Spring Animation은 무엇인가?

Spring Animation은 애니메이션 기법 중 하나로, 물리 법칙을 기반으로 자연스럽게 움직이는 동작을 표현하는 방식입니다. 스프링 애니메이션은 감속이 없는 단순한 이징(easing)과 달리, 물체가 마치 스프링에 매달린 것처럼 자연스럽게 탄성을 가지고 목적지에 다다르는 동작을 표현합니다. 이 방식은 특히 사용자가 상호작용하는 UI 요소에 자연스럽고 유연한 경험을 제공하는 데 유리합니다.

 

OS에서의 사용

• iOS 및 Android: Spring Animation은 모바일 애플리케이션 UI에서 널리 사용됩니다. 특히 iOS의 경우 애플의 UIKit 및 SwiftUI에서 UISpringTimingParameters나 spring() 함수를 통해 손쉽게 스프링 애니메이션을 구현할 수 있습니다. Android에서는 SpringAnimation 클래스를 사용하여 유사한 애니메이션을 구현할 수 있습니다.

 

물리적 기반의 애니메이션 vs 단순한 이징 애니메이션

• 스프링 애니메이션은 물리 법칙에 기반해 물체가 실제 세계에서 스프링에 의해 움직이는 것처럼 보이도록 탄성, 감쇠, 강성 등을 사용해 애니메이션을 만듭니다. 목표 위치로 이동하면서 탄성에 의해 몇 번 튕기는 듯한 동작을 보이며, 사용자가 상호작용할 때 보다 직관적인 피드백을 제공할 수 있습니다. 예를 들어, 사용자가 카드를 드래그한 후 손을 뗄 때 카드가 천천히 흔들리며 제자리로 돌아오는 동작은 스프링 애니메이션의 전형적인 예입니다.
• CSS 애니메이션은 기본적으로 ease-in, ease-out, linear, 또는 커스텀 cubic-bezier를 사용하는 **이징 함수(easing functions)**를 통해 애니메이션을 구현합니다. 이러한 함수는 애니메이션의 속도 변화를 단순히 설정하는 데 사용됩니다. 예를 들어, 시작할 때 느리게 하다가 가속하고 다시 감속하는 방식의 움직임을 주는 것입니다. 이는 사용자가 직관적으로 느끼기엔 다소 기계적이고 정적인 느낌을 줄 수 있습니다. 즉, CSS 애니메이션은 목표 지점으로 가는 동안 속도를 미리 정의된 방식으로 조절하여 목표 위치에 부드럽게 도달하도록 하는 데 중점을 둡니다.

 

Spring Animation

1. Stiffness (강성): 스프링의 강도를 나타냅니다. 값이 높을수록 스프링이 더 단단하게 느껴져 빠르게 목표 위치에 도달합니다. 반면, 값이 낮으면 천천히 도달하며 더 많은 흔들림이 발생합니다.
2. Damping (감쇠): 애니메이션의 감쇠 계수를 나타냅니다. 감쇠 값이 클수록 애니메이션이 빠르게 진정되어 목표 지점에서 정지합니다. 값이 작으면 목표 지점을 지나친 후 몇 번 흔들리다가 정지합니다.
3. Mass (질량): 스프링에 매달린 객체의 무게를 의미합니다. 무게가 클수록 애니메이션이 느려지고 반응이 더 부드럽습니다.
4. Initial Velocity (초기 속도): 애니메이션 시작 시의 속도를 지정합니다. 사용자가 드래그하여 어떤 방향으로 움직이는 순간 Spring Animation을 적용할 때 초기 속도를 설정하면 훨씬 더 자연스럽게 전환됩니다.

 

CSS 표현 방식

이징 함수는 애니메이션의 속도 변화를 나타내는 방식으로, 가속도와 유사한 효과를 제공합니다. CSS에서는 다양한 이징 함수를 제공하며, 이를 통해 애니메이션의 시작 속도를 빠르게 하거나 느리게 할 수 있습니다.

• ease-in: 애니메이션의 시작이 느리다가 점차 빨라집니다. 마치 가속도가 붙는 것처럼 움직임이 느껴지므로 가속도의 효과를 표현할 때 유용합니다.
• ease-out: 시작이 빠르고 끝으로 갈수록 느려지는 감속 효과를 줄 수 있습니다.
• ease-in-out: 애니메이션의 시작과 끝이 느리고 중간에 가속되었다가 감속하는 효과입니다.
• cubic-bezier(x1, y1, x2, y2): 커스텀 큐빅 베지어 함수를 사용하여 가속도와 감속도를 섬세하게 조절할 수 있습니다. 이를 통해 더 복잡한 가속 패턴을 직접 정의할 수 있습니다.

 

CSS로 표현하는 방법

CSS 자체로는 물리 기반의 Spring Animation을 직접적으로 구현하기 어렵지만, JavaScript와 CSS를 함께 사용하면 유사한 효과를 낼 수 있습니다. 대표적으로 Spring() 메서드를 제공하는 라이브러리를 사용할 수 있습니다. CSS로 구현할 때는 일반적으로 JavaScript 라이브러리를 사용하여 DOM 요소의 스타일을 동적으로 조절합니다.

 

JavaScript를 이용하여 CSS 속성을 동적으로 조절하면서 Spring Animation을 적용하는 방법은 아래와 같습니다.

html

<div id="box"></div>

css

#box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

 

javascript

// 라이브러리: Popmotion 사용 예시
const { spring, styler } = window.popmotion;

const box = document.getElementById('box');
const boxStyler = styler(box);

spring({
  from: { x: 0 },
  to: { x: 300 },
  stiffness: 200,
  damping: 10
}).start(boxStyler.set);

 

참고할 수 있는 JavaScript 라이브러리들

• Popmotion: 간단한 물리 애니메이션을 위한 라이브러리로, Spring Animation을 손쉽게 설정할 수 있습니다.
• Framer Motion: 리액트(React)를 사용하는 경우 Framer Motion을 사용하여 스프링 애니메이션을 매우 간단하게 구현할 수 있습니다.
• GSAP (GreenSock Animation Platform): 매우 유연하고 성능이 뛰어난 애니메이션 라이브러리로, 스프링 애니메이션을 포함한 다양한 효과를 쉽게 구현할 수 있습니다.