[javascript] TweenMax를 사용하여 애니메이션의 모션 블러(motion blur)를 추가할 수 있나요?

27 Nov 2023

모션 블러는 움직이는 요소가 빠르게 움직일 때 나타나는 흐릿한 효과입니다. TweenMax를 사용하면 요소의 모션 블러 효과를 간단하게 구현할 수 있습니다.

먼저, TweenMax를 프로젝트에 추가해야 합니다. TweenMax는 GreenSock Animation Platform의 일부로 제공되며, GreenSock의 공식 웹사이트에서 다운로드할 수 있습니다.

TweenMax를 프로젝트에 추가한 후, 다음과 같이 사용하여 요소에 모션 블러를 추가할 수 있습니다:

TweenMax.to(element, duration, { motionBlur:true });

위 코드에서 element는 모션 블러를 적용할 HTML 요소를 가리키는 변수입니다. duration은 애니메이션의 지속 시간을 나타내는 값이며, motionBlur:true는 모션 블러 효과를 활성화하는 옵션입니다.

모션 블러 효과는 요소가 움직이는 동안 적용되지만, 기본적으로 브라우저에서 제공하는 네이티브 모션 블러를 사용합니다. 따라서 일부 브라우저에서는 모션 블러가 지원되지 않을 수 있습니다.

더 많은 TweenMax 옵션과 사용법에 대해서는 GreenSock의 공식 문서를 참조할 수 있습니다.