프로젝트에 대한 사용자설정 easing 애니메이션을 만듭니다.
CSS에 포함된 이징 키워드를 사용하고 싶지 않거나 웹 애니메이션 또는 JavaScript 프레임워크를 사용할 수도 있습니다. 이러한 경우 일반적으로 자체 곡선 (또는 방정식)을 정의할 수 있으며, 이렇게 하면 프로젝트의 애니메이션 느낌을 다양하게 제어할 수 있습니다.
요약
- 사용자 지정 ease를 통해 프로젝트에 개성을 더할 수 있습니다.
- 기본 애니메이션 곡선 (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를 호출하고 원하는 easing과 원하는 속성을 알려줄 수 있습니다. 다양한 easing 옵션을 사용할 수 있습니다. 아래 코드는 elastic ease-out을 사용합니다.
var box = document.getElementById('my-box');
var animationDurationInSeconds = 1.5;
TweenMax.to(box, animationDurationInSeconds, {
x: '100%',
ease: 'Elastic.easeOut'
});
여기서 설명한 모든 옵션에 대한 자세한 내용은 TweenMax 문서를 참고하세요.