[JavaScript] 자바스크립트 Web Animations API 사용하기

176_자바스크립트 Web Animations API 사용하기

[적용]

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

---

[문법]

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

---

[내용]

Web Animations API* 는 자바스크립트에서 애니메이션을 사용하기 위한 하나의 수단이다.

CSS Transitions와 CSS Animations는 CSS에 모션을 미리 등록해 놓아야 한다.

하지만 Web Animations API는 자바스크립트만으로 처리할 수 있어 종료 시점을 판단하기 쉽다는 장점이 있다.

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

*Web Animations API는 W3C에서 정의한 표준 사양이다.

 

JavaScript                                                                                                                                                          main.js

// 요소 가져오기
const element = document.querySelector('.rect');
element.animate(
  {
    transform: [
      'translateX(0px) rotate(0deg)',  // 시작 값
      'trnaslateX(800px) rotate(360deg)'  // 종료 값
    ]
  },
  {
    duration: 3000,  // 밀리초 지정
    iterations: Infinity,  // 반복 횟수
    direction: 'normal',  // 반복 작업 방식
    easing: 'ease'  // 가속도 종료
  }
);

 

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김