그럼에도 불구하고

👨‍💻

[JavaScript] Web Animation API란? 본문

JavaScript/JavaScript basics

[JavaScript] Web Animation API란?

zenghyun 2023. 2. 10. 01:15

Web Animation API에 대해 알아보자

 

Document

[ Web Animation API ]

Web Animation API는 자바스크립트에서 애니메이션을 사용하기 위한 하나의 수단이다. DOM 요소의 애니메이션과 같은 웹 페이지 표시에 대한 동기화 및 타이밍을 변경하는 것이 가능하다. 또한 타이밍 모델과 애니메이션 모델 두 가지 모델을 결합하여 수행할 수 있다. 

 

또한, CSS Transitions와 CSS Animations는 CSS에 모션을 미리 등록해 놓아야 하지만 Web Animation API는 자바스크립트만으로 처리할 수 있어 종료 시점을 판단하기 쉽다는 장점이 있다.  

 

첫 번째 인수는 시작과 종료 값을 포함하는 객체를, 두 번째 인수는 애니메이션 속성을 포함하는 객체를 지정한다. 

 

 

[ 사용시기 & 사용 방법 ]

※ 사용시기

 

● 자유도가 높은 모션을 생성하고 싶을 때

● 자바스크립트를 메인으로 모션을 생성하고 싶을 때 

 

※ 사용방법 

 

메소드 의미 반환
요소.animate(객체, 객체) 애니메이션 처리 없음

 

[ 예시 ]

 

다음은 css와 javascript를 이용하여 만든 애니메이션 소스코드이다.

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!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>Document</title>
    <style>
        main {
            margin: 100px auto;
            width: 800px;
            height: 500px;
            border: 3px solid black;
            position: relative;
        }
        .box {
            position: relative;
            width: 75px;
            height: 75px;
            border: 3px solid black;
            border-radius: 10px;
        }
        .cssBox {
            background-color: skyblue;
            top: 100px;
            left: 50px;
            animation: css 4s ease infinite;
        }
        .javascriptBox {
            top: 250px;
            left: 50px;
            background-color: tomato;
        }
        @keyframes css {
            from {
                transform: translateX(0px) rotate(0deg);
            }
            to {
                transform: translateX(600px) rotate(360deg);
                background-color: tomato;
            }
        }
    </style>
</head>
 
<body>
    <main>
        <div class="box cssBox"></div>
        <div class="box javascriptBox"></div>
    </main>
    <script>
        const element = document.querySelector('.javascriptBox');
 
        element.classList.add('javascriptBox');
        element.animate(
            {
                transform: [
                    'translateX(0px) rotate(0deg)', // 시작 값
                    'translateX(600px) rotate(360deg)' // 종료 값
                ],
                backgroundColor: 'skyblue'
            },
            {
                duration: 4000, // 밀리초 시점
                iterations: Infinity, // 반복 횟수
                direction: 'normal', // 반복 작업 방식
                easing: 'ease' // 가속도 종류
 
            }
        )
    </script>
</body>
 
</html>
cs

 

위의 코드와 같이 javascript를 이용하여 animation을 제어해보자

 

가장 먼저 필요한 것은 CSS @keyframes 블록에 해당하는 키프레임 개체를 만드는 것이다.

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 element.animate(
            {
                transform: [
                    'translateX(0px) rotate(0deg)', // 시작 값
                    'translateX(600px) rotate(360deg)' // 종료 값
                ],
                backgroundColor: 'skyblue'
            },
            {
                duration: 4000, // 밀리초 시점
                iterations: Infinity, // 반복 횟수
                direction: 'normal', // 반복 작업 방식
                easing: 'ease' // 가속도 종류
 
            }
        )
cs

 

주어진 키의 수에 따라 자동으로 애니메이션을 동일한 부분으로 나누기 때문에CSS @keyframes와 달리 Web Animation API는 각 키가 나타낼 애니메이션에 대한 백분율이나 From To와 같이 명시적으로 알릴 필요가 없다. 

 

혹은 다른 예를 들자면 

 

1
2
3
4
5
const tumbling = [
  { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
  { color: '#431236', offset: 0.3 },
  { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
];
cs

 

위의 소스코드와 같이 다른 키에서 키의 오프셋을 명시적으로 설정하려는 경우 쉼표로 선언과 구분하여 객체에서 직접 오프셋을 지정할 수 있다.

 

Tip. 

최소한 두 개 이상의 키프레임이 지정되어 있어야 한다. (애니메이션 시퀀스의 시작과 종료 상태를 나타내기 위함)

만약 키프레임 목록에 항목이 하나만 있는 경우 업데이트될 때까지 일부 브라우저에서 Element.animate()가 NotSupportedErrorDOMException을 발생시킬 수 있다.

 

 

두 번째 인수에서는 애니메이션을 제어하는 속성을 표현한다. 

 

1
2
3
4
5
6
7
 {
                duration: 4000, // 밀리초 시점
                iterations: Infinity, // 반복 횟수
                direction: 'normal', // 반복 작업 방식
                easing: 'ease' // 가속도 종류
 
 }
cs

 

duration의 경우 3초, 1초 이런 방식이 아닌 setTimeout()이나 Window.requestAnimationFrame()과 마찬가지로 웹 애니메이션 API는 밀리초 단위로 표시한다.

 

 

REF: https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API

         https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API

저작자표시 비영리

'JavaScript > JavaScript basics' 카테고리의 다른 글

[JavaScript] 모듈 / import / export에 대해 알아보자  (0) 2023.02.13
[JavaScript] 프로미스(Promise)란?  (0) 2023.02.12
[JavaScript] 비동기 프로그래밍  (0) 2023.02.09
[JavaScript] REST API란?  (0) 2023.02.06
[JavaScript] XMLHttpRequest란?  (0) 2023.02.06
'JavaScript/JavaScript basics' Related Articles more
Comments