CSS에니메이션과 JS에니메이션
에니메이션에 관한 정리를 보았다.
css에니메이션만 있는줄 알았는데 js의 에니메이션도 존재를 한다는것을 알게되었다.
마우스를 올렸을때, 또는 버튼의 전환등 간단히 처리하는 에니메이션의 경우는 CSS를 사용해 처리한다.
도형이동
transform: translate(50px ,50px);도형을 왼쪽 위에서 오른쪽 아래로 움직이게 하는 코드로 첫번째 자리에는 x축, 뒤쪽은 y축의 이동을 의미한다.
js로 작성해본다면
setInterval을 사용해 계속해서 style.top, style.left를 계속 변화시켜야 한다고 한다.
style.left를 찾아보니
document.getElementById("myBtn").style.left = "50px";이런식으로 작성한다고 한다.
setInterval()은 지연시간을 설정하고 그 시간 이후에 처음 실행되면서 clearInterval()이 실행될때까지는 정해진 지연시간마다 실행된다.
이 안에 저것을 적용한다면 일정시간마다 left로 정해준만큼 이동하게 될것이다.
이렇게 봐도 비효율적이라는 생각을 하게된다.
또한 , 이렇게 된다면 브라우저 랜더링 과정에서 reflow(layout)과정을 발생시키기에 에니메이션이 부자연스러울 수도 있다.
reflow 또는 layout ?
화면에 위치를 잡아 그려주는 것을 말하는데, reflow가 일어나면 다시 repaint가 일어나 다시 색까지 입혀야 하기 때문에 좀 느리게 일어난다.
따라서 js로 에니메이션을 구현하는것 보다 css로 구현하는것이 더 좋다.
이외에도
- @media (미디어 쿼리)로 에니메이션을 적용함으로써 반응형으로 에니메이션을 구현할 수 있다.
- 외부 라이브러리를 필요로 하지않는다.
- 직관적이다
JS를 이용한 에니메이션
css로 처리하기에는 복잡하고 어려울 경우에 사용한다.
다만 바닐라 자바스크립트(일반 자바스크립트)로 구현하게 될 경우 위에서 말했는 reflow가 일어나 비효율적이다. 따라서 RAF(Request Animation Frame)API가 등장했고 구현방식은 동일하나 60fps를 보장할 수 있다고 한다.
- 60fps?
fps는 frame per second의 약자로 1초당 프레임수를 의미한다. 60이 가장 매끄러워 굉장이 사실적으로 보일 수 있다고 한다.
사용자가 보기 편한 영상미? 가 60fps이기 때문에 중요하다고 보는 것 같다.
RAF외에도 여러 외부 라이브러리들이 있고 이것들을 통해 성능 좋은 에니메이션 구현이 가능하다고한다.
최근에는Web Animations API가 나오기도 했다지만 지원하는 브라우저에 한계가 있어 복잡한 에니메이선을 구현할 경우에는 외부 라이브러리를 사용한다.
JS에니메이션 사용의 장점은 다음과 같다.
- 요소의 스타일이 변하는 순간마다 제어가 가능하다.(세밀한 구성 가능)
- GPU를 통한 하드웨어의 가속을 제어할 수 있다. css특정 속성으로 인한 가속을 막아준다.(하드웨어 가속이 모바일에서는 성능저하를 발생시킬수 있기때문에 아주 엄청난 장점이다)
- 브라우저 호환성 측면에서 transition / animation속성보다 뛰어나다.
추가로..
CPU와 GPU를 대략적으로 알아보니 CPU는 주로 계산하는 역할을, GPU는 컴퓨터 그래픽 영역을 담당한다고한다.
