[책] 자바스크립트 코드 레시피 278 - 163일차

Web Animations API

• 자유도가 높은 모션을 생성하고 싶을 때
• 자바스크립트를 메인으로 모션을 생성하고 싶을 때

구문

요소.animate(객체, 객체) 애니메이션 처리

설명

Web Animations API는 자바스크립트에서 애니메이션을 사용하기 위한 하나의 수단입니다. CSS Transitions와 CSS Animations는 CSS에 모션을 미리 등록해 놓아야 합니다. 하지만 Web Animations API는 자바스크립트만으로 처리할 수 있어 종료 시점을 판단하기 쉽다는 장점이 있습니다. 첫 번째 인수는 시작과 종료 값을 포함하는 객체, 두 번째 인수는 애니메이션 속성을 포함하는 객체를 지정합니다.

실습

`index.html

<div class="container">
  <div class="rect"></div>
  <div class="box"></div>
</div>

---

style.css

.container {
  position: relative;
  width: 940px;
  height: 520px;
  background-color: #000080;
}

.rect {
  width: 100px;
  height: 100px;
  display: block;
  position: absolute;
  background-color: white;
  top: 200px;
}

.box {
  height: 50px;
  background-color: #ff0000;
}

---

script.js

const element = document.querySelector('.rect');
console.log(element);
element.animate(
  {
    transform: [
      'translateX(0px) rotate(0deg)',
      'translateX(800px) rotate(360deg)',
    ]
  },
  {
    duration: 3000,
    iterations: Infinity,
    direction: 'normal',
    easing: 'ease',
  }
);

const box = document.querySelector('.box');
box.animate(
  {
    width: [
      '0px', // 시작 값
      '100%', // 종료 값
    ]
  },
  {
    duration: 9000,
    iterations: Infinity,
    direction: 'normal',
    easing: 'ease',
  }
)