IT

자바스크립트 "Web Animations API"

아름다운전진 2023. 3. 10. 09:23
728x90

Web Animations API는 웹 페이지에서 애니메이션을 만들고 제어하는 방법을 제공하는 JavaScript API입니다. 이것은 웹 플랫폼에 비교적 새로 추가된 것이며 그 목적은 기존 CSS 애니메이션보다 애니메이션을 만드는 더 강력하고 유연한 방법을 제공하는 것입니다.

​

Web Animations API를 사용하면 JavaScript를 사용하여 애니메이션을 정의하고 이를 DOM 요소에 적용할 수 있습니다. 여러 요소와 여러 속성이 포함된 복잡한 애니메이션을 만들 수 있으며 애니메이션 타이밍, 재생 및 동기화를 세밀하게 제어할 수 있습니다.

​

다음은 Web Animations API를 사용하여 DOM 요소에 애니메이션을 적용하는 방법의 예입니다.

​

// Get a reference to the DOM element to be animated

const element = document.getElementById('my-element');

​

// Create a new animation object

const animation = element.animate(

// Define the keyframes for the animation

[

{ transform: 'translateX(0px)' },

{ transform: 'translateX(500px)' }

],

// Define the animation options

{

duration: 1000, // Duration of the animation in milliseconds

easing: 'ease-out', // Easing function for the animation

delay: 0, // Delay before the animation starts in milliseconds

iterations: Infinity, // Number of times the animation should repeat

direction: 'alternate' // Direction of the animation on each iteration

}

);

​

// Start the animation

animation.play();

​

이 예제에서는 `animate()` 메서드를 사용하여 `my-element` DOM 요소의 `transform` 속성에 애니메이션 효과를 주는 새 애니메이션 개체를 만듭니다. 애니메이션은 요소를 초기 위치에서 1000밀리초 동안 오른쪽으로 500픽셀 위치로 이동합니다.

​

또한 easing 기능, 애니메이션 시작 전 지연, 애니메이션이 반복되어야 하는 횟수, 각 반복의 애니메이션 방향과 같은 일부 애니메이션 옵션을 지정하고 있습니다.

​

마지막으로 애니메이션 개체에서 `play()` 메서드를 호출하여 애니메이션을 시작합니다.

​

다음은 웹 애니메이션 API를 사용하여 여러 애니메이션을 동기화하는 방법을 보여주는 또 다른 예입니다.

​

// Get references to the DOM elements to be animated

const element1 = document.getElementById('my-element-1');

const element2 = document.getElementById('my-element-2');

​

// Create a new animation group

const group = new AnimationGroup();

​

// Create two animation objects and add them to the group

const animation1 = element1.animate(

{ opacity: 0 },

{ duration: 1000 }

);

group.add(animation1);

​

const animation2 = element2.animate(

{ opacity: 1 },

{ duration: 1000 }

);

group.add(animation2);

​

// Start the group animation

group.play();

​

이 예제에서는 `AnimationGroup` 클래스를 사용하여 두 개의 애니메이션 개체가 포함된 새 애니메이션 그룹을 만듭니다. 첫 번째 애니메이션은 `my-element-1`에서 페이드 아웃되고 두 번째 애니메이션은 `my-element-2`에서 페이드 아웃됩니다. 두 애니메이션을 동일한 그룹에 추가하여 동시에 시작하고 끝나는지 확인합니다.

​

또한 그룹 개체에서 `play()` 메서드를 호출하여 애니메이션 그룹을 시작합니다.

​

이것은 Web Animations API로 할 수 있는 작업의 몇 가지 예일 뿐입니다. 이 API를 사용하면 웹 애플리케이션의 사용자 경험을 향상시키는 정교하고 반응이 빠른 애니메이션을 만들 수 있습니다.

728x90