카테고리 없음

Web Animaitions API vol.1

곽빵 2023. 7. 24. 16:40

개요

javascript의 Web Animaitions API를 공부한 이야기

 

CSS 애니메이션

장점

별도의 Compositor Thread에서 작업하므로 효율적(GPU가 처리).
코드가 간단하다(선언형, 쉽다).

단점

세밀하게 컨트롤하기 어렵다.
자유로운 제어가 어렵다.
정말 후진 기기에서는 오히려 더 성능이 떨어질 수도 있다.

JS 애니메이션

장점

스타일 값 단계 마다 세밀하게 컨트롤 가능하다.
제어가 자유롭다.

단점

Main Thread에서 작업하므로, 다른 작업들의 영향을 받아 버벅일 수 있다.
코드가 복잡하다(명령형, 어렵다).

Web Animation API

상대적으로 자유로운 제어가 어려웠던 CSS 애니메이션을 자바스크립트의 힘을 빌어 더 강력하게 바꿔준다.
CSS 애니메이션을 기반으로 하므로 CSS 애니메이션의 장점을 그대로 살리면서 강력하게 업그레이드 해주는 느낌으로 생각하면 됨.

Sample

Web Animation API

 

위의 같은 애니메이션은 이렇게 구성할 수 있다.

<!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도 있다는 걸 이번에 강의를 들으면서 처음 알았다..! 언젠가는 이걸 써먹을수 있는 날이 올거라고 생각하면서 공부해보자