JavaScript로 CSS Animation 제어하기

gu·2023년 7월 31일

Web Animation

목록 보기

3/7

CSS를 이용한 애니메이션은 미리 정해진대로만 재생되기 때문에 애니메이션을 만드는 데에는 아주 편리하지만, 상황에 대응해서 제어하기가 어렵다. 원하는 시점에서 멈추거나 특정 조건에서만 재생시킨다거나 마음대로 컨트롤하기 쉽지않다. window.requestAnimationFrame을 이용해 빠른 속도로 반복 실행하는 자바스크립트 애니메이션은 메인 쓰레드를 점유하기 때문에 성능이 좋기가 어렵다.

💻 Web Animation API

🖤 개념

기존 애니메이션 방식에 대한 문제점들을 해결할 수 있는 웹 애니메이션 표준 기술(Web Standard)가 있다. 브라우저 자체적으로 최적화를 진행해서 성능이 좋은 CSS 애니메이션의 장점을 살리면서, 자바스크립트로 구현하는 기존 방식의 애니메이션보다 구현도 간편하다. 사용자의 입력 등에 반응해서 대화형 애니메이션을 구현할수도있고, 여러 개의 애니메이션을 동시 및 순차적으로 재생하거나, 스크롤 애니메이션을 구현할 수도 있다. 무엇보다 외부 라이브러리가 아닌 웹 표준 기술이기 때문에, 익혀두면 두고두고 사용할수있다.

🖤 option name

css애니메이션과 web애니메이션API의 옵션네임이 약간씩 다르다. 비교해보자.

CSS Animation Web Animation API
animation-duration duration
animation-delay delay
animation-direction direction
fill-mode fill
timing-function easing
iteration-count iterations

CSS Animation	Web Animation API
animation-duration	duration
animation-delay	delay
animation-direction	direction
fill-mode	fill
timing-function	easing
iteration-count	iterations

🖤 적용

animate()에는 두개의 파라미터가 들어가는데, 한개는 keyframe이고 또다른 한개는 option이다.

keyframes: 변화하는 속성을 가지고있음, 배열로 들어감
options: 지속시간, 반복이라던지 애니메이션의 속성이며 객체형식
animate를 호출하면 애니메이션 객체를 리턴해준다.

✔ element.animate(keyframes, options)

const box = document.querySelector(".box");

            box.animate(
                // keyframes
                [
                    { transform: "translateX(0)", opacity: 0 },
                    { transform: "translateX(200px)", opacity: 1 },
                    { transform: "translateX(0px)", opacity: 0 },
                ],
                // options
                {
                    duration: 1000,
                    easing: "linear",
                    fill: "forwards",
                    iterations: Infinity,
                }
            );

✔ 변수=element.animate(keyframes, options)

키프레임과 옵션을 분리

 // 키프레임과 옵션 분리
            const box = document.querySelector(".box");
            const keyframes = [
                { transform: "translateX(0)", opacity: 0 },
                { transform: "translateX(200px)", opacity: 1 },
                { transform: "translateX(0px)", opacity: 0 },
            ];
            const options = {
                duration: 1000,
                easing: "linear",
                fill: "forwards",
                iterations: Infinity,
            };

            box.animate(keyframes, options);

keyframes과 option을 각각 변수에 넣어주며 분리시켰다.

✔ Animation() 생성자

const box = document.querySelector(".box");

            // Animation생성자 안에 KeyframeEffect가 매개변수로 작용되는 것
            new Animation(
                new KeyframeEffect(
                    // 매개변수 3개가 들어감
                    // 1. 애니메이션을 적용할 오브젝트
                    box,
                    // 2. 키프레임 설정
                    [
                        { transform: "translateX(0)", opacity: 0 },
                        { transform: "translateX(200px)", opacity: 1 },
                        { transform: "translateX(0px)", opacity: 0 },
                    ],
                    // 3. 타이밍 관련 옵션
                    {
                        duration: 1000,
                        easing: "linear",
                        fill: "forwards",
                        iterations: Infinity,
                    }
                )
            ).play();
            // 혹은 변수 담아 변수.play();

🖤 Output

참고

웹 애니메이션을 정리해 봅시다-1분코딩