[TweenMaxㆍGSAP] 트윈맥스 제대로 배우기 - 심화2(곡선 애니메이션)

 

 

TweenMax 곡선ㆍ라운드 애니메이션

 

프로젝트 퍼블리싱을 하다 보면, 디자이너 작업자들이 문의를 합니다.

 

 

혹시 곡선 형태의 애니메이션 처리 작업이 가능한가요?

퍼블리셔 : 음....

퍼블리셔 : 가능하지만 스크립트로 처리해야하고 0.0.1초 단위로 '가로 1px, 세로 1px씩 변할 때마다 엘리먼트의 좌표를 바꿔줘야 하고너무 복잡....블라 블라

 

ㆍ

ㆍ

ㆍ

 

디자이너 : 쉽게 말해주세요.

퍼블리셔 : 프로젝트 시간도 부족하고 해서 하기 힘들 것 같습니다.

디자이너 : 네ㅜㅜ

 

 

대부분의 곡선 애니메이션 구현을 요청하면 대부분의 퍼블리셔들은 이렇게 대답을 할 것 같습니다.

하지만 GSAP의 곡선을 처리하는 bezier 속성을 알게 된다면, 간편하게 곡선 애니메이션(라운드 움직임)의 효과를 만들 수 있습니다.

자바스크립트나 jQuery로는 구현할 수 없는 신세계??

그럼 바로 bezier curve에 대해서 알아보겠습니다.

이것을 알게되는 순간 퍼블리셔로써 큰 무기를 가지게 되는 것입니다.

 

 

 

 

 

bezier : Array

 

Target 객체를 정해진 좌표까지 이동을 직선으로 하는 것이 아닌 부드러운 곡선으로 이동합니다.

코드 작성 기본 규칙

☆ GSAP 라이브러리로는 bezier curve 곡선을 사용할 수 없습니다. 

bezier 속성을 사용하기 위해서는 GSAP의 TweenMax 라이브러리를 사용해야 합니다.

저는 프로젝트 작업 시 GSAP 라이브러리보다는 TweenMax 라이브러리를 통합으로 사용합니다. 

왜냐하면TweenMax 라이브러리에서는 GSAP 라이브러리가 가지고 있는 기능들을 모두 사용 가능합니다.

 

TweenMax library CDN : https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineMax.min.js

 

 

☆ bezier 코드는 CSS의 position 속성이 없다면 사용 불가능합니다. 그러나 애니메이션 키값을 'top', 'left'가 아닌 'x', 'y' 키값으로 좌표값을 작성하여 트윈 한다면 CSS position 속성 없이 애니메이션이 가능합니다.

 

☆ bezier 속성 안에 ease, repeat, yoyo 등의 gsap 속성을 사용할 수 있습니다. ease, repeat, yoyo 속성은 기초 1~3편 포스팅에서 작성했습니다. 기억나지 않으시면 다시 한번 보시길 추천드립니다.  

 

 

 

 

 

bezier 속성인 curviness, autoRotate, type 속성을 이용한 bezier 곡선

 

curviness : 커브의 강도를 나타냅니다. 키값이 크면 클수록 역동적으로 애니메이션 됩니다.

 

autoRotate : true를 키값으로 주면  진행방향이 '곡선의 움직임 방향'으로 엘리먼트가 틀어져 애니메이션이 발생하며, false를 키값으로 주면 진행방향과 상관없이 target 모습 그대로 틀어짐 없이 애니메이션 됩니다.

 

type : 기본값은 "thru"이며 "soft", "quadratic", "cubic" 4가지입니다. 첨부해드리는 예제를 통해서 보시면 차이를 알 수 있습니다.

 

 

좌표 키값과,  기본 GSAP 속성을 사용한 bezier 곡선

  TweenMax - bezier base 예제 실습 파일  

gsap_bezier_base.zip

0.03MB

 

 

 

 

curviness, autoRotate 속성 값을 적용한 bezier 곡선

  TweenMax - bezier curviness, autoRotate 예제 실습 파일  

gsap_bezier_autoRotate.zip

0.03MB

 

 

 

 

type 속성 값을 적용한 bezier 곡선

  TweenMax - bezier type 예제 실습 파일  

gsap_bezier_type.zip

0.03MB

 

 

 

 

 

bezier 마치며...

 

GSAP bezier 곡선 움직임(애니메이션)에 대하여 모두 알아보았습니다.

코드 작성이 자바스크립트나, jQuery 작성이 직관적이고 쉽게 곡선 애니메이션을 만들 수 있다는 것을 보셨죠?

이것을 끝으로 GSAPㆍTweenMax 라이브러리 포스팅을 마무리하고자 합니다.

GSAP 설치방법부터 기초, 심화과정의 세분화 과정을 통해 여러 편에 걸쳐 포스팅하였습니다.

GSAP 라이브러리 포스팅을 시작할 때 정리해야 할 내용들이 많아서 걱정이 많이 됐는데, 완전히 끝나고 나니 시원 섭섭하네요!

GSAPㆍTweenMax 라이브러리 포스팅 전편이 퍼블리싱하는데 길잡이가 되길 바라며, 마무리하겠습니다.

감사합니다.