비밀 재료﹦맛 향상

스프링 물리학(Spring Physics)은 비밀 재료처럼 모든 애니메이션의 맛을 더 좋게 만들어줍니다. 스프링 물리학을 사용해 생성된 모션은 유동적이고 유기적입니다. 스프링은 무언가가 실제로 움직이고 있다고 생각하도록 뇌를 속이는데 더 효과적입니다.

오른쪽 이미지는 간단한 비교 예를 보여줍니다.

일반적인 CSS 애니메이션과 스프링 애니메이션을 비교해보면 아래쪽 공이 좀 더 “실제”처럼 작동하지 않나요?

이는 스프링 애니메이션이 일반적인 CSS 애니메이션으로 흉내낼 수 없는 방식으로 속도를 완화시키기 때문입니다.

애니메이션 기술을 향상시키려면 스프링(Spring)에 익숙해질 필요가 있습니다. 스프링은 놀라울 정도로 다재다능하며 애니메이션의 품질에 놀라울 정도로 심오한 영향을 미칠 수 있습니다.

스프링 물리학은 일반적인 CSS 트랜지션(전환)과 달리 익히는데 많은 시간을 요구합니다. 여기서는 특정 라이브러리를 언급하는 대신, 멘탈(정신) 모델에 중점을 두고 이야기 해봅니다.

CSS 트랜지션

아래는 일반적인 CSS 트랜지션 코드입니다.

.thing {
  transform: translateX(0);
	transition: transform 0.4s ease-out;

  &:hover {
		transform: translateX(200px);
	} 
}

위 예에서 사용할 수 있는 변수는 두 가지입니다.