2021-06-23 (72일차) 애니메이션 아코디언 구현, show, fadeIn, slideDown, gsap, 애니메이션 역사

자바스크립트 73강~78강

GSAP와 스크롤트리거 1강~5강

 

- 자바스크립트 애니메이션 방식 3가지

  : 'display의 none과 block'을 사용하여 애니메이션을 주던 기존 방식을 버리고 이런 방법들이 있음

 

  1) 태그.show();  ↔ hide

     :  태그의 style에 'display : block'이 삽입되는 방식 ( css의 display : none을 무시하게 됨)

 

  2) 태그.fadeIn(시간);  ↔ fadeOut

     : 'transition' 효과를 추가로 준 것 처럼 부드럽게 나옴

      ㄴ 괄호 안에 시간을 걸을 수 있음

 

  3) 태그.slideDown(시간);  ↔ slideDown

      : 'transform : translateY' 효과를 추가로 준 것 처럼 위 > 아래 부드럽게 내려옴 

      ㄴ 괄호 안에 시간을 걸을 수 있음

 

※ .stop() : 2번 이상 클릭했을 때 일어나는 시간오류를 멈추는 역할(애니메이션 앞에 거의 붙는 기능)

---

< 아코디언 구현방법 >

- 애니메이션 있는 방법

  :  css에서의 'display : block'을 삭제하고 자바스크립트로 실행

 

---

 

< 애니메이션의 역사 >

1 - 제이쿼리 애니메이션 (불편)

2 - TweenMax, TweenLite (두 개가 같은 회사)

3 - TweenLite + ScrollMagic (두 개가 다른 회사)

4 - GSAP (TweenMax, TweenLite이 이름 변경)

     ㄴ 플러그인을 만듦 = 스크롤 트리거 (ScrollMagic의 대체제)

 

 

< GSAP 명령어 >

 

- gsap.??( '활동대상' ,  {활동내역}, n);

  ㄴ n자리에 숫자를 넣어 n초 뒤에 실행되게 할 수 있음

 

- gsap.to : 활동대상이 활동내역으로 출발함

 

- gsap.from : 활동대상이 활동내역으로부터 돌아옴

 

- duration : 활동하는 시간 (기본값 : 0.5초)

 

- gsap.to를 사용하여 박스 우측으로 이동하는 애니메이션

box 한 바퀴 도는 예시