Web Animation

내가 프론트엔드 개발자가 되고 싶었던 이유는 다양한 애니메이션으로 UI의 즐거움을 바로 줄 수 있는게 가장 흥미로웠었다, 사실 그러한 동작들은 여러 회사에서 매출을 이끌어내기 위한 중요한 수단은 아니다, 단지 즐거운 시각 경험일 뿐...... (물론 슬라이드 스크롤링등은 베이직 한 기능이다보니 예외를 둔다)

 

그래서 그런가 mdn에 Web Animation이라는 것이 있었고, 찬찬히 읽어보니 상당히 흥미로워 포스팅을 남겨본다.

 

먼저 Web Animation은 왜 나왔고 왜 좋은걸까 ?

기존에 CSS 를 이용한 애니메이션은 내가 설정한 값대로 동작을 원하는 경우에는 간단하게 동작시킬 수 있지만 내가 특정 이벤트에 대응해서 애니메이션을 컨트롤하고 싶다면 쉽지가 않았다 (어떤 상황이 발생했을때에 멈췄다가 특정 플래그가 켜졌을때에 다시 실행이 된다던지..)

또한 script가 아니라 CSS 선언이기에 한계는 언제나 있었고 외부에서 만들어진 JS 라이브러리를 많이 필요로 했었다, CSS에서 transition과 animation을 등록해놓아야지만 사용이 가능했었다

 

하지만 Web Animation 이라는 웹 표준 기술로 해당 기능들을 제공하기 시작했고 Web Animation은 오로지 자바스크립트로 만들 수 있기에 animation의 종료 시점을 더욱 빠르게 확인할 수 있다

 

Web Animation은 기존에 이용했던 JS Animation과 비슷한거 아니냐는 생각이 들 수 있지만 결이 많이 다르다

기존 JS Animation들은 빠르고 많이 반복되는 애니메이션의 작업의 경우에는 setInterval, window.requestAnimationFrame등을 이용하여 CPU의 반복적인 작업으로 잘 사용하지 못하면 과부하가 올 수 있었다, 하지만 Web Animation의 경우에는 CSS Animation 기반으로 만들어진 것이라 메인 쓰레드를 점유하지 않고 GPU를 사용하여 동작을 할 수 있다,, 끝내준다

 

성능은 좋지만 컨트롤이 어려웠던 CSS Animation에다가 JS를 사용해서 더 컨트롤하기 편한 장점을 더해 나온 웹 표준 기술이라는 점이 가장 매력적인 것 같고, 왠만한 브라우저에 다 대응이 되고 있고 이제 막 진행이 되고 있는 기능들이다보니 앞으로 많은 새로운 기능이 나올 것이라 생각이 든다.

 

 

그래서 Web Animation 어떻게 사용하는 걸까 ?

const options = [
	{ transform: "rotate(0) translate3D(-50%, -50%, 0)", color: "#000" },
	{ color: "#431236", offset: 0.3 },
	{ transform: "rotate(360deg) translate3D(-50%, -50%, 0)", color: "#000" },
]

이런식으로 내가 설정하고 싶은 애니메이션의 css 설정들을 폼에 맞게 넣어주고 이 options들을 animate라는 메소드를 사용하여 엘리먼트에 넣어준다

 

const something = document.getElementById("box").animate(options)

something.play() or something.pause()

그리고 해당 애니메이션이 붙어있는 엘리먼트를 play or pause 등으로 애니메이션을 실행 시켜줄 수가 있는 것...!

(참고로 animate가 아닌 new Animation() 을 사용해서 새로운 객체 인스턴스를 반환하여 사용할 수도 있으며 animate와 new Animation 둘다 두번째 파라미터에 timing을 설정할 수가 있다)

 

 

 

 

요약

1. Web Animation은 기존 CSS Animation의 장점과 JS Animation의 장점을 합친 기능이다.

2. Web Animation은 웹 표준 기술이기 때문에 근본적인 기술이며 앞으로 많은 기능이 추가될 예정이다.

3. Web Animation은 animation을 다루고 싶은 프론트엔드 개발자라면 한번쯤 눈 여겨 봐야하는 기술인 것 같다.

 

---

해당 블로그는 공부한 내용의 기록으로 중점이 맞춰져있습니다.

스스로 어떻게 받아들이고 있는지에 대한 주관적인 견해가 많이 들어가 있습니다.
그렇기에 다소 설명이 부족하고 다른 방향으로 해석할 수 있는 여지가 있습니다.

우연찮게 지나가다가 발견하신 글이라면 다양한 의견 감사하게 받아들이겠습니다.