똑같은 삽질은 2번 하지 말자
Web Animaitions API vol.1 본문
개요
javascript의 Web Animaitions API를 공부한 이야기
CSS 애니메이션
장점
별도의 Compositor Thread에서 작업하므로 효율적(GPU가 처리).
코드가 간단하다(선언형, 쉽다).
단점
세밀하게 컨트롤하기 어렵다.
자유로운 제어가 어렵다.
정말 후진 기기에서는 오히려 더 성능이 떨어질 수도 있다.
JS 애니메이션
장점
스타일 값 단계 마다 세밀하게 컨트롤 가능하다.
제어가 자유롭다.
단점
Main Thread에서 작업하므로, 다른 작업들의 영향을 받아 버벅일 수 있다.
코드가 복잡하다(명령형, 어렵다).
Web Animation API
상대적으로 자유로운 제어가 어려웠던 CSS 애니메이션을 자바스크립트의 힘을 빌어 더 강력하게 바꿔준다.
CSS 애니메이션을 기반으로 하므로 CSS 애니메이션의 장점을 그대로 살리면서 강력하게 업그레이드 해주는 느낌으로 생각하면 됨.
Sample
위의 같은 애니메이션은 이렇게 구성할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Animation API</title>
<style>
.box {
width: 100px;
height: 100px;
background: dodgerblue;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
const box = document.querySelector('.box');
box.animate(
// keyframes
[
{ transform: 'translateX(0)', opacity: 0 },
{ transform: 'translateX(-50px)', opacity: 1, offset: 0.6 },
{ transform: 'translateX(200px)', opacity: 0.5 }
],
// options
{
duration: 1000,
easing: 'linear',
fill: 'forwards',
iterations: Infinity,
direction: 'alternate'
}
);
</script>
</body>
</html>css animation의 속성에 있던 친구들을 자바스크립트로 그대로 사용할 수 있으며, 자바스크립트로 사용할 수 있음으로써 좀 더 자유롭게 다양한 구성이 가능해진다. 이러한 표준 API도 있다는 걸 이번에 강의를 들으면서 처음 알았다..! 언젠가는 이걸 써먹을수 있는 날이 올거라고 생각하면서 공부해보자
Comments