프로젝트에 맞는 완벽한 사용자 지정 애니메이션을 만들어 보세요.
CSS에 포함된 이징 키워드를 사용하지 않거나 웹 애니메이션 또는 JavaScript 프레임워크를 사용할 때가 있습니다. 이 경우 일반적으로 고유한 곡선 (또는 방정식)을 정의할 수 있으며, 이를 통해 프로젝트 애니메이션의 느낌을 세밀하게 제어할 수 있습니다.
요약
- 맞춤 이징을 사용하면 프로젝트에 개성을 더할 수 있습니다.
- 기본 애니메이션 곡선 (ease-out, ease-in 등)과 닮았지만 여러 위치를 강조하는 3차원 베지어 곡선을 만들 수 있습니다.
- 탄성 또는 바운스 애니메이션 등 애니메이션 타이밍과 동작을 더 세밀하게 제어해야 하는 경우 JavaScript를 사용합니다.
CSS로 애니메이션을 만드는 경우 3차원 베지어 곡선을 정의하여 타이밍을 정의할 수 있습니다. 실제로 ease, ease-in, ease-out, linear 키워드는 사전 정의된 베지어 곡선에 매핑됩니다. 이에 대한 자세한 내용은 CSS 전환 사양 및 웹 애니메이션 사양에서 확인할 수 있습니다.
이러한 베지어 곡선은 4개의 값, 즉 두 쌍의 숫자를 취하며, 각 쌍은 3차원 베지어 곡선 제어점의 X 및 Y 좌표를 나타냅니다. 베지어 곡선의 시작점에는 좌표 (0, 0)가 있고 끝점에는 좌표 (1, 1)가 있습니다. 두 제어점의 X 및 Y 값을 설정합니다. 두 제어점의 X 값은 0과 1 사이여야 하고 각 제어점의 Y 값은 [0, 1] 한도를 초과할 수 있지만, 사양은 그 정도가 명확하지 않습니다.
각 제어점의 X 및 Y 값을 변경하면 곡선이 크게 달라지므로 애니메이션의 느낌이 크게 달라집니다. 예를 들어 첫 번째 제어점이 오른쪽 하단 영역에 있으면 애니메이션이 느리게 시작됩니다. 버튼이 왼쪽 상단 영역에 있으면 빠르게 시작할 수 있습니다. 반대로 두 번째 제어점이 그리드의 오른쪽 하단 영역에 있으면 빠르게 끝나고 왼쪽 상단에 있으면 느리게 끝납니다.
다음은 두 가지 곡선입니다. 일반적인 ease-in-out 곡선과 맞춤 곡선입니다.
맞춤 곡선의 CSS는 다음과 같습니다.
transition: transform 500ms cubic-bezier(0.465, 0.183, 0.153, 0.946);
처음 두 숫자는 첫 번째 제어점의 X 및 Y 좌표이고 두 번째 두 숫자는 두 번째 제어점의 X 및 Y 좌표입니다.
맞춤 곡선을 만드는 것은 매우 재미있으며, 애니메이션의 느낌을 세밀하게 제어할 수 있습니다. 예를 들어 위의 곡선은 기존의 ease-in-out 곡선과 닮았지만 ease-in(시작) 부분이 짧아지고 끝에서 긴 감속이 있는 것을 확인할 수 있습니다.
이 애니메이션 곡선 도구를 사용해 곡선이 애니메이션 느낌에 어떤 영향을 미치는지 확인해 보세요.
더욱 세밀한 제어를 위해 JavaScript 프레임워크 사용
3차원 베지어 곡선이 제공하는 것보다 훨씬 더 세밀한 제어가 필요할 때가 있습니다. 탄성 바운스 느낌을 원하는 경우 JavaScript 프레임워크를 사용할 수 있습니다. CSS 또는 웹 애니메이션으로는 달성하기 어려운 효과가기 때문입니다.
TweenMax
강력한 프레임워크 중 하나는 GreenSock의 TweenMax (또는 가볍게 유지하려는 경우 TweenLite)입니다. 작은 JavaScript 라이브러리로 많은 부분을 제어할 수 있고 매우 성숙한 코드베이스를 제공합니다.
TweenMax를 사용하려면 페이지에 다음 스크립트를 포함하세요.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
스크립트가 제자리에 있으면 요소에 대해 TweenMax를 호출하고 원하는 이징과 함께 원하는 속성을 알려줄 수 있습니다. 다양한 이징 옵션을 사용할 수 있습니다. 아래 코드는 탄성 ease-out을 사용합니다.
var box = document.getElementById('my-box');
var animationDurationInSeconds = 1.5;
TweenMax.to(box, animationDurationInSeconds, {
x: '100%',
ease: 'Elastic.easeOut'
});
TweenMax 문서에는 여기 있는 모든 옵션이 강조 표시되어 있으므로 읽어볼 가치가 있습니다.