10. [jQuery] Animation - 2 (애니메이션 제작 관습)

안녕하세요! 이번 포스팅에서는 지난 포스팅에서 다루었던 animation 에 대해서 몇 가지 알고 넘어 가면 좋은 점들을 알아보도록 하겠습니다.

 

HTML/CSS 를 공부하면서 한창 애니메이션에 대해서 학습하였으니 아래 링크를 참고하고 오시면 본 포스팅을 더욱 잘 이해할 수 있으실 겁니다 ^^ 

 

https://daterminal.tistory.com/32

17. [CSS] CSS Animation - 1

---

Animation 제작 원칙

애니메이션의 기본 제작 방식

1. 시작 화면 제작 (HTML/CSS) 2. 결과 화면 제작 (HTML/CSS) 3. 시작화면에서 결과화면에서 넘어가는 방아쇠 제작 (JavaScript/JQuery)

바로 이전 포스팅에서 애니메이션을 공부할 때 jQuery 를 통해서 animation 을 주는 방법에 대해서 공부했었는데요. 

 

사실 margin 등을 조정해서 애니메이션을 주는 것은 좋은 방법이 아닙니다.

 

 

margin, padding 등은 본래 사이트의 레이아웃을 조정하기 위해서 사용되는 속성들입니다. 

 

 

[브라우저 렌더링 단계]

margin, padding 등의 레이아웃을 조정하는 요소들은 3번째 단계에 처리 됨을 확인 할 수 있습니다. 렌더링 시간이 오래걸린다는 의미입니다. 

이를 활용하여 애니메이션을 조정하게 되면 속도가 느릴 뿐만 아니라 애니메이션이 버벅이게 됩니다. 

 

그럼 도대체 어떻게 애니메이션을 개발하라는 말인가요?

 

 

[애니메이션을 적용할 때 알아두면 좋은 3가지] 

 

1. margin 을 활용하지 말고 transform 속성을 활용

이전에 CSS animation 을 공부 할 때 transform 을 공부했었습니다. 

transform 의 속성값은 크게 3가지가 있습니다. 

 

transform : translateY( px); /*대상의 이동을 담당*/ 
transform : rotate( deg); /*대상의 회전을 담당*/ 
transform : scale(); /*대상의 스케일링(사이즈 변환)을 담당*/

 

2. JQuery의 animate 함수 대신 CSS transition을 활용

애니메이션의 기본 제작 방식

1. 시작 화면 제작 (HTML/CSS) 2. 결과 화면 제작 (HTML/CSS) 3. 시작화면에서 결과화면에서 넘어가는 방아쇠 제작 (JavaScript/JQuery)

기존에는 3번째 단계에서 넘어가는 방아쇠 역할로 jQuery의 animate 메소드를 활용하였습니다. 

하지만 CSS의 transition을 활용하면 더욱 빠른 애니메이션 효과를 기대 할 수 있습니다. 

 

transition을 활용하는 방법은 이전 포스팅을 참고하시길 바랍니다!

transition : all 1s; 
/*모든 요소들을 1초에 걸쳐서 서서히 변경해줘*/

 

 

3.  .css를 쓰지 말고 .addClass를 활용

CSS를 공부할 때 class의 재활용의 중요성에 대해서 공부했었는데 애니메이션을 제작할 때 JQuery에서 .css를 사용하기 보다 미리 CSS 상에서 결과를 클래스상에서 구현 해 놓은 이후에 JQuery로 Class를 추가하는 것이 좋습니다. 

 

.addClass <-> .removeClass

 

CSS

.login-ani{
    transform:translateY(0px);
}

 

JQuery

 $('#btn-click').on('click', function() {
         $('.black-background').addClass('login-ani');
 });

 

정리하자면 .addClass(good) .css(normal) .animate(bad)