이징(easing) 기능은 TweenMax 라이브러리에서 제공하는 기능으로, 애니메이션의 움직임을 부드럽게 조절하는 역할을 합니다. 이는 애니메이션의 시작점부터 끝점까지의 변화를 일정하지 않은 속도로 진행되도록 합니다.
TweenMax에서 제공하는 이징 기능은 다양한 옵션을 제공합니다. 몇 가지 일반적인 이징 옵션은 다음과 같습니다.
-
Linear 이징이 없이 선형으로 움직입니다. 변화가 일정한 속도로 진행됩니다.
-
EaseIn 애니메이션이 시작할 때 천천히 움직이다가 일정한 속도로 가속됩니다. 이는 천천히 시작하여 점점 빨라지는 애니메이션 효과를 줍니다.
-
EaseOut 애니메이션이 시작할 때 빠르게 움직이다가 점점 감속됩니다. 이는 빠르게 시작하여 천천히 멈추는 효과를 줍니다.
-
EaseInOut 애니메이션이 시작부터 끝까지 천천히 움직이다가 가속되어 빠르게 움직이다가 다시 감속하여 멈춥니다. 처음은 천천히 움직이며 중간에 빠르게 움직이고 마지막에 다시 천천히 멈추는효과를 줍니다.
이 외에도 많은 이징 옵션이 있으며, TweenMax 라이브러리 공식 문서에서 더 자세한 정보를 찾을 수 있습니다.
예를 들어서, 아래의 코드는 TweenMax를 사용하여 요소를 왼쪽으로 이동하는 애니메이션을 만들고 이징을 EaseInOut으로 설정하는 예시입니다:
TweenMax.to(element, 1, {left: "100px", ease: Power1.easeInOut});
위 코드에서 element
는 애니메이션을 적용할 HTML 요소를 가리킵니다. 1
은 애니메이션의 지속 시간을 나타내며, left: "100px"
은 요소의 left
속성을 100px로 이동시킵니다. ease: Power1.easeInOut
은 이징을 EaseInOut으로 설정합니다.
자세한 사용법과 다양한 이징 옵션에 대해서는 TweenMax 공식 문서(https://greensock.com/docs/TweenMax)를 참조해주시기 바랍니다.