Animate

• animate란 특정 CSS 속성을 변경하기 위해서 사용하는 함수.
• 변경이 되는 모습, CSS 속성이 변화하는 모습을 천천히 보여주고 싶을 때 사용한다.

jQuery의 animate 함수

• $('.box').animate({ marginLeft : '100px' }, 1000);

• .box 요소에 margin-left를 100px만큼 주는 코드

• ❓ 왜 margin-left 속성을 marginLeft로 쓰나요?

  ❗ 자바스크립트상에선 - 기호를 연산자로 인식하기 때문에 - 기호를 없애고, 맨 첫단어 제외 모든 단어들의 첫글자를 대문자로 변경해 붙여 적어줘야한다.

  • margin-left : 스네이크 표기법 snake_case
  • marginLeft : 캐멀 표기법 camelCase

• 첫번째 파라미터엔 {} 중괄호 안에 애니메이션 효과를 줄 CSS 속성을 나열.

• 두번째 파라미터엔 ms단위의 시간을 넣을 수 있으며 애니메이션 동작 속도를 의미한다.

애니메이션 UI 만드는 법

1. HTML CSS로 시작화면과 최종화면 만들기
2. 자바스크립트를 이용하여 시작화면에서 최종화면으로 변하도록 트리거하기

모달창 Slide Down 애니메이션 만들기

• 페이지 바깥 위에 있던 모달창을 아래로 쓱 내려오게 만들어보자.

  1. 모달창의 시작화면과 최종화면을 먼저 제작하기

     .black-background {
       background: rgba(0,0,0,0.5);
       position: fixed;
       z-index: 5;
       width: 100%;
       height: 100%;
       display: none;
       margin-top : -1200px; /*시작화면*/
       margin-top : 0px; /*최종화면*/
     }

     • margin-top을 -1200px로 만들어 현재 화면에서 보이지 않게 위로 올려둔다.
     • 0px로 바꿔주면 모달창이 위에서 아래로 내려오는 형태를 보이게 된다.

  2. 자바스크립트를 이용해 트리거를 준다.

     ```jsx
     $('#btn-login').on('click', function(){
       $('.black-background').show();
       $('.black-background').animate({ marginTop : '0px' });
     });
     ```
     
     - login 버튼을 누르면
         - show() 함수로 인해 모달창이 일단 보이게 된다. (display: none → display: block)
         - animate() 함수가 margin-top이 0px가 되도록 모달창을 이동시킨다.

     jQuery 함수를 순서대로 동작시키고 싶은 경우

     $('.black-background').show();
     $('.black-background').animate({ marginTop : '0px' });

  • 코드를 두 줄 쓴다고 해서 위에서부터 순서대로 먼저 실행된다는 보장이 없다.

  • 대부분은 show() → animate() 해주지만 경우에 따라 둘 중 더 빠른걸 먼저 실행시킬수도 있다.

    • Event queue, Event loop, stack 과 관련이 있음

  • jQuery에서 어떤 함수들을 꼭 차례차례 실행시키고 싶다면 다음과 같이 작성하면 된다.

    $('.black-background').show().animate({ marginTop : '0px' });

  • 같은요소가 아니라 다른 요소들을 순서에 맞게 차례로 animate 해 주고 싶다면?

    $('A 요소').animate({ width: '250px'}, 1000, function() {
      $('B 요소').animate({ height : '500px'}  });
    });

  • animate 함수의 세번째 파라미터로 function(){}을 집어넣고, 중괄호 안에 첫 animate 끝나고 그 다음으로 실행할 코드를 넣어주면 된다.

    애니메이션을 더 프로답게 개발하려면?

    1. animate() 말고 CSS transition을 쓴다.

  • 참고 : https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

    .box {
      margin-top : 100px;
      transition : all 1s;
    }

  • transition 속성을 이용하려면 class 안에 넣어주면 된다.

  • .box의 모든 CSS속성(all)이 1초에 걸쳐 스무스하게 변경된다.

    CSS transition을 사용해서 애니메이션을 만들어야하는 이유

  1. transition은 자바스크립트와 독립적으로 동작한다.

     • jQuery를 이용하면 매우 느리고 천천히 동작한다. 단순한건 비슷한 속도를 내지만 조금만 복잡하거나 양이 많아지면 금방 버벅인다.
     • 만약 자바스크립트로 많은 일을 해야하는 SPA 같은 사이트를 만든다면 애니메이션을 자바스크립트로 만들면 안된다. 프레임 저하가 일어날 확률이 매우 높다.
     • 자바스크립트를 꼭 쓰고 싶다면 애니메이션 전용 라이브러리 velocity.js 등을 따로 설치해서 쓰시면 실행 속도 걱정은 해결된다.

  2. transition을 쓰는것이 훨씬 쉽다.

     • 코드작성과 커스터마이징이 쉽다.
     • 동작 속도를 선형이 아니라 커브를 줄때도 관련 CSS 속성만 찾아 넣으면 된다.
       • transition 동작속도 속성
         • transition-timing-function
         • ease, linear, ease-in 등

     2. margin 말고 transform 속성을 사용한다.

  • margin, width, height, top 등의 속성은 페이지 레이아웃을 변경하는 속성이다.

  • 브라우저는 레이아웃을 변경하면 렌더링시간이 매우 오래걸린다.

  • transfrom, opacity 속성들은 페이지 레이아웃과는 상관이 없는 속성이다.

    transform : translateX(100px);  /* x축 이동 */
    transform : rotate(30deg);  /* 회전 */
    transform : scale(2);  /* 크기조정 */

    3. 최종화면으로 변하는건 class를 붙이는 방식으로 개발한다.

  • 최종화면으로 바꿀때 css() 함수를 붙여서 변경하는 방식은 지양하도록 하자. 간단한 속성을 바꿀 땐 유용하지만 여러 CSS 속성을 바꾸려면 코드가 더러워진다.

  • **addClass() , removeClass() 함수를 이용하여 미리 만들어 놓은 CSS 클래스명을 붙여 최종화면으로 변하는 방식으로 개발하자.**

    → 클래스로 짜 놓으면 수정도 쉽고, 재활용도 쉽다.