Element.animate()

animate() 메소드는 JavaScript에서 다양한 애니메이션 효과를 구현하는 데 사용됩니다. animate() 메소드를 사용하면 요소를 회전, 페이드인/아웃, 크기, 위치, 색상 등을 변경하는 애니메이션 효과를 만들 수 있습니다.

 

element.animate(keyframes, options);

`animate()` 메소드는 두 개의 인수를 받습니다. 첫 번째 인수는 애니메이션의 키프레임(keyframes)을 정의하는 배열입니다. 각 키프레임은 요소의 스타일을 변경하는 객체로 구성됩니다. 

두 번째 인수는 애니메이션의 지속 시간, 반복 횟수 등을 정의하는 객체입니다. 이 객체는 `duration` 속성을 사용하여 애니메이션의 지속 시간을 밀리초 단위로 지정하고, `iterations` 속성을 사용하여 애니메이션의 반복 횟수를 지정할 수 있습니다. `iterations` 속성을 `Infinity`로 설정하면 애니메이션이 무한 반복됩니다.

 

Keyframes

`animate()` 메소드의 첫 번째 인수에 여러 개의 keyframe을 정의하여 복잡한 애니메이션을 만들 수 있습니다. 각 keyframe은 애니메이션 대상 요소에 대한 다른 스타일을 지정하므로, 보다 복잡하고 동적인 애니메이션을 만들 수 있습니다.

예를 들어, 다음과 같이 요소를 회전시키고 색상을 변경하며 크기를 확대/축소하는 애니메이션을 만들 수 있습니다.

 

const element = document.querySelector('#myElement');

element.animate([
  // keyframes
  { transform: 'rotate(0deg)', background: 'red', width: '100px', height: '100px' },
  { transform: 'rotate(360deg)', background: 'blue', width: '200px', height: '200px' },
  { transform: 'rotate(720deg)', background: 'green', width: '300px', height: '300px' }
], {
  // timing options
  duration: 2000,
  iterations: Infinity
});

 

위 코드는 `myElement` ID를 가진 요소를 선택하고, 해당 요소를 2초 동안(`duration: 2000`) 회전시키고, 색상을 빨강에서 파랑으로 변경하며, 크기를 100px x 100px에서 300px x 300px으로 확대/축소합니다.

요소를 화면에서 이동시키는 애니메이션도 가능합니다.

 

const element = document.querySelector('#myElement');

element.animate([
  // keyframes
  { left: '0px' },
  { left: '500px' }
], {
  // timing options
  duration: 1000,
  iterations: Infinity
});

 

위 코드는 myElement ID를 가진 요소를 선택하고, 해당 요소를 1초 동안(duration: 1000) 화면 왼쪽에서(left: 0px) 오른쪽으로(left: 500px) 이동시키며, 무한히(iterations: Infinity) 반복합니다.

 

Keyframes의 offset 속성값

`keyframes` 배열 내에서 각각의 객체는 애니메이션의 각 단계별로 해당 단계의 속성값을 설정합니다. 이때, `offset` 속성을 사용하여 애니메이션에서 각 단계의 발생 시점을 설정할 수 있습니다.

`offset` 속성은 0에서 1 사이의 값을 가지며, 애니메이션의 시작(0)에서부터 몇 퍼센트 지점(0.1~1)에 해당하는지를 나타냅니다. 

예를 들어, 다음과 같이 `offset` 속성을 사용하여 애니메이션의 첫 번째 단계(`0%`)와 마지막 단계(`100%`)의 속성값을 설정할 수 있습니다.

 

element.animate([
  { opacity: 0, offset: 0 },
  { opacity: 1, offset: 1 }
], {
  duration: 1000,
  iterations: Infinity
});

 

위 코드는 요소의 투명도가 0에서 시작하여 1로 변경되는 요소의 페이드인 애니메이션을 만듭니다.
`offset` 속성을 사용하여 애니메이션의 중간 지점에서 새로운 속성값을 설정할 수도 있습니다.

 

element.animate([
  { transform: 'rotate(0deg)', offset: 0 },
  { transform: 'rotate(90deg)', offset: 0.5 },
  { transform: 'rotate(180deg)', offset: 1 }
], {
  duration: 1000,
  iterations: Infinity
});

 

위 코드는 요소를 0도에서 180도까지 회전시키는 애니메이션을 만듭니다. 애니메이션은 0% 지점(`rotate(0deg)`)에서 시작하여 50% 지점(`rotate(90deg)`)에서 90도로 회전한 후, 100% 지점(`rotate(180deg)`)에서 애니메이션이 끝납니다.

`offset` 속성은 애니메이션의 각 단계별로 발생 시점을 정확히 조절할 수 있으며, 애니메이션의 속도와 반복 등의 옵션과 함께 사용하여 다양한 애니메이션 효과를 만들 수 있습니다.

 

Keyframes의 Easing 속성

`offset` 속성 외에도, `easing` 속성을 사용하여 각 단계별로 타이밍 함수를 지정할 수 있습니다. `easing` 함수는 애니메이션이 시간에 따라 진행되는 방식을 제어하며, `linear`, `ease-in`, `ease-out`, `ease-in-out` 등의 미리 정의된 함수 또는 사용자 정의 함수로 설정할 수 있습니다.

예를 들어, 다음과 같이 `easing` 속성을 사용하여 바운스 효과를 만들 수 있습니다.

 

const element = document.querySelector('#myElement');

element.animate([
  { transform: 'translateY(0px)', easing: 'ease-in-out' },
  { transform: 'translateY(-50px)', easing: 'ease-in-out' },
  { transform: 'translateY(0px)', easing: 'ease-in-out' }
], {
  duration: 1000,
  iterations: Infinity
});

 

이 예제에서는 요소가 50 픽셀만큼 위로 이동한 다음 원래 위치로 돌아와 바운스 효과를 만듭니다. ease-in-out 타이밍 함수가 각 단계별로 사용되어 부드러운 애니메이션을 만듭니다.

 

Keyframes의 Composite 속성

`composite` 속성을 사용하여 이전 키프레임과 어떻게 결합될지 지정할 수 있습니다. `composite` 속성은 다음 값 중 하나로 설정할 수 있습니다.

- `add`: 속성값은 이전 키프레임의 값에 추가됩니다.
- `accumulate`: 속성값은 이전 키프레임의 값과 누적됩니다.
- `replace`: 속성값은 이전 키프레임의 값에 대체됩니다.

예를 들어, 다음과 같이 `composite` 속성을 사용하여 회전 애니메이션을 만들 수 있습니다.

 

const element = document.querySelector('#myElement');

element.animate([
  { transform: 'rotate(0deg)', composite: 'replace' },
  { transform: 'rotate(90deg)', composite: 'replace' },
  { transform: 'rotate(180deg)', composite: 'replace' }
], {
  duration: 1000,
  iterations: Infinity
});

 

이 예제에서는 `rotate` 속성이 `replace`로 설정되어 각 키프레임이 이전 키프레임 값을 대체합니다. 결과적으로 요소는 0도에서 180도까지 부드럽게 회전합니다.

`composite`와 `accumulate`는 `animate()` 메소드의 키프레임에서 사용할 수 있는 두 가지 속성입니다.

 

[
  { opacity: 0, transform: 'translateX(-50px)', composite: 'add' },
  { opacity: 1, transform: 'translateX(50px)', composite: 'add' }
]

 

이 예에서 `opacity`와 `transform` 속성은 각 키프레임마다 `add`로 설정됩니다.
이는 각 키프레임의 `opacity`와 `transform` 값이 이전 키프레임 값에 추가되는 것을 의미합니다.

`composite` 속성을 `add` 대신 `accumulate`로 설정하면 각 키프레임의 `opacity`와 `transform` 값이 이전 키프레임 값과 누적되어 부드러운 애니메이션을 만들 수 있습니다.

 

[
  { opacity: 0, transform: 'translateX(-50px)', composite: 'accumulate' },
  { opacity: 1, transform: 'translateX(50px)', composite: 'accumulate' }
]

 

이 예에서 `opacity`와 `transform` 속성은 각 키프레임마다 `accumulate`로 설정됩니다. 이는 각 키프레임의 `opacity`와 `transform` 값이 이전 키프레임 값과 누적되어 부드러운 애니메이션을 만들게 됩니다.

 

`animate()` 메소드의 두 번째 인수

`animate()` 메소드의 두 번째 인수는 애니메이션의 지속 시간, 반복 횟수 등을 지정하는 객체입니다. 다양한 옵션이 있으며, 주요 옵션은 다음과 같습니다.

 

Duration

`duration` 옵션은 애니메이션의 지속 시간을 밀리초 단위로 지정합니다. 예를 들어, 다음과 같이 왼쪽에서 오른쪽으로 이동하는 요소를 2초 동안 움직이는 애니메이션을 만들려면 다음 코드를 사용할 수 있습니다.

 

const element = document.querySelector('#myElement');

element.animate([
  { left: '0px' },
  { left: '500px' }
], {
  duration: 2000,
  iterations: Infinity
});

 

이 애니메이션은 요소를 2초 동안 왼쪽에서 오른쪽으로 이동시킵니다(`duration: 2000`). `iterations` 옵션은 `Infinity`로 설정되어 애니메이션이 무한 반복됩니다.

`duration` 외에도, `delay`, `easing`, `iterations` 등 다른 옵션을 사용하여 애니메이션의 타이밍과 동작을 제어할 수 있습니다.

다음은 `duration`과 `easing`을 함께 사용하여 바운싱 효과를 만드는 예제입니다.

 

const element = document.querySelector('#myElement');

element.animate([
  { transform: 'translateY(0px)', easing: 'ease-in-out' },
  { transform: 'translateY(-50px)', easing: 'ease-in-out' },
  { transform: 'translateY(0px)', easing: 'ease-in-out' }
], {
  duration: 1000,
  iterations: Infinity
});

 

이 애니메이션은 1초 동안 요소를 위아래로 바운싱합니다(`duration: 1000`). `easing` 옵션은 `ease-in-out`으로 설정되어 애니메이션의 시작과 끝이 느리게, 중간이 빠르게 움직입니다.

`duration` 옵션은 애니메이션의 타이밍과 동작을 제어하는 중요한 도구입니다. 적절하게 설정하면 웹 페이지와 애플리케이션에서 부드러우면서 동적이고 시각적으로 매력적인 애니메이션을 만들 수 있습니다.

 

Easing

`easing`은 각 키프레임에 사용되는 타이밍 함수를 결정하는 옵션입니다. 이는 애니메이션이 시간에 따라 어떻게 진행되는지를 제어하며, 부드러운 움직임부터 불규칙한 움직임까지 다양한 효과를 만들어낼 수 있습니다. 기본 타이밍 함수는 `linear`이지만, `ease-in`, `ease-out`, `ease-in-out`과 같은 다른 미리 정의된 함수뿐만 아니라 사용자 정의 함수도 만들 수 있습니다.

예를 들어, 다음 코드는 `ease-in-out` 타이밍 함수를 사용하여 바운싱 효과를 만듭니다.

 

const element = document.querySelector('#myElement');

element.animate([
  { transform: 'translateY(0px)', easing: 'ease-in-out' },
  { transform: 'translateY(-50px)', easing: 'ease-in-out' },
  { transform: 'translateY(0px)', easing: 'ease-in-out' }
], {
  duration: 1000,
  iterations: Infinity
});

 

이 코드는 요소를 위아래로 바운싱하는 애니메이션을 1초동안(`duration: 1000`) `ease-in-out` 타이밍 함수를 사용하여 만듭니다. 다른 타이밍 옵션은 애니메이션을 천천히 시작하게 하거나(`ease-in`), 느리게 끝나게 할 수도 있습니다(`ease-out`).

`cubic-bezier()` 함수를 사용하여 사용자 정의 타이밍 함수를 만들 수도 있습니다. 이 함수는 타이밍 함수에 사용되는 곡선의 모양을 정의하는 0과 1 사이의 네 개의 값이 필요합니다. 

 

다음 코드는 천천히 시작하고 이후 빠르게 가속하는 바운싱 효과를 만들기 위해 사용자 정의 타이밍 함수를 사용합니다.

 

const element = document.querySelector('#myElement');

const timingFunction = 'cubic-bezier(0.36, 0.04, 0.98, 0.34)';

element.animate([
  { transform: 'translateY(0px)', easing: timingFunction },
  { transform: 'translateY(-50px)', easing: timingFunction },
  { transform: 'translateY(0px)', easing: timingFunction }
], {
  duration: 1000,
  iterations: Infinity
});

 

이 코드는 cubic-bezier() 함수를 사용하여 (0.36, 0.04, 0.98, 0.34) 값으로 정의된 사용자 정의 타이밍 함수를 사용하여 천천히 시작하고 빠르게 가속하는 바운싱 효과를 만듭니다. 사용자 정의 타이밍 함수는 각 키프레임의 타이밍과 모션을 정확하게 제어해야 하는 더 복잡한 애니메이션을 만드는 데 유용합니다.

 

Delay

`delay` 옵션은 애니메이션 시작 전에 대기할 시간을 밀리초 단위로 지정합니다.

예를 들어, 다음 코드는 애니메이션 시작을 1초 동안 지연시킵니다.

 

const element = document.querySelector('#myElement');

element.animate([
  { transform: 'translateY(0px)' },
  { transform: 'translateY(-50px)' },
  { transform: 'translateY(0px)' }
], {
  duration: 1000,
  delay: 1000,
  iterations: Infinity
});

 

위 코드는 요소가 위아래로 움직이는 바운싱 애니메이션을 만드는데, 애니메이션 시작을 1초(`delay: 1000`) 동안 지연시킵니다. `duration` 및 `iterations` 옵션도 지정하여 애니메이션의 시간 및 동작을 제어합니다.

`delay`는 여러 애니메이션 간에 간격을 두거나 특정 이벤트가 발생할 때까지 애니메이션 시작을 지연시키는 등 다양한 용도로 사용할 수 있습니다.

 

Iterations

`iterations` 옵션은 애니메이션을 몇 번 반복할지 지정합니다. 기본값은 1입니다. 무한 반복을 원하는 경우, 이 값을 `Infinity`로 설정할 수 있습니다.

다음 코드는 무한 반복하는 바운싱 애니메이션을 만듭니다:

 

const element = document.querySelector('#myElement');

element.animate([
  { transform: 'translateY(0px)' },
  { transform: 'translateY(-50px)' },
  { transform: 'translateY(0px)' }
], {
  duration: 1000,
  iterations: Infinity
});

 

이 애니메이션은 요소를 반복적으로 위아래로 튕기게 만듭니다(`translateY`), 각 사이클은 1초(`duration: 1000`)씩 소요됩니다. `iterations` 옵션은 `Infinity`로 설정되어 있으므로 애니메이션은 무한히 반복됩니다.

 

const element = document.querySelector('#myElement');

element.animate([
  { transform: 'rotate(0deg)' },
  { transform: 'rotate(180deg)' }
], {
  duration: 1000,
  iterations: 2
});

 

이 애니메이션은 요소를 1초(`duration: 1000`) 동안 180도 회전(`rotate`)합니다. `iterations` 옵션은 `2`로 설정되어 있으므로 애니메이션은 두 번 반복됩니다.

일반적으로 `iterations` 옵션은 애니메이션을 몇 번 반복할지 제어하는 데 사용됩니다. 기본적으로 애니메이션은 한 번만 실행되지만 이 옵션을 사용하여 루핑 애니메이션을 만들거나 특정 반복 횟수를 지정할 수 있습니다.

Direction

`direction` 옵션은 애니메이션의 방향을 제어하는 옵션입니다. 기본값은 `normal`이며, 이는 애니메이션을 정방향으로 실행하는 것을 의미합니다. `reverse` 옵션을 사용하면 애니메이션을 역방향으로 실행할 수 있습니다.

 

const element = document.querySelector('#myElement');

element.animate([
  { left: '0px' },
  { left: '500px' }
], {
  duration: 2000,
  iterations: 1,
  direction: 'reverse'
});

 

이 코드는 요소를 2초 동안 왼쪽에서 오른쪽으로 이동시키는 애니메이션을 만듭니다. 그런 다음 `direction` 옵션을 `reverse`로 설정하여 애니메이션을 역방향으로 실행합니다. 이렇게 하면 요소가 다시 오른쪽에서 왼쪽으로 이동됩니다.

`alternate` 옵션을 사용하면 애니메이션을 정방향과 역방향으로 번갈아가며 실행할 수 있습니다. 다음 코드는 요소를 왼쪽에서 오른쪽으로 이동시키는 애니메이션을 만들고, 그런 다음 `direction` 옵션을 `alternate`로 설정하여 애니메이션을 정방향과 역방향으로 번갈아가며 실행합니다.

 

const element = document.querySelector('#myElement');

element.animate([
  { left: '0px' },
  { left: '500px' }
], {
  duration: 2000,
  iterations: Infinity,
  direction: 'alternate'
});

 

이 코드는 요소를 2초 동안 왼쪽에서 오른쪽으로 이동시키는 애니메이션을 만듭니다. 그런 다음 `direction` 옵션을 `alternate`로 설정하여 애니메이션을 정방향과 역방향으로 번갈아가며 실행합니다. 

`direction` 옵션은 다른 옵션과 함께 사용하여 다양한 애니메이션 효과를 만들 수 있습니다. 예를 들어, `alternate` 옵션과 `iterations` 옵션을 함께 사용하여 요소를 왼쪽에서 오른쪽으로 이동시키는 애니메이션을 3회 반복하고, 각각의 애니메이션을 정방향과 역방향으로 번갈아가며 실행하는 애니메이션을 만들 수 있습니다.

 

const element = document.querySelector('#myElement');

element.animate([
  { left: '0px' },
  { left: '500px' }
], {
  duration: 2000,
  iterations: 3,
  direction: 'alternate'
});

 

Fill

`fill` 옵션은 애니메이션이 완료된 후 요소가 어떻게 스타일링되어야 할지를 결정합니다. `none`, `forwards`, `backwards`, `both`의 4가지 옵션이 있습니다.
- `none`: 애니메이션 완료 후 요소의 스타일이 변경되지 않습니다.
- `forwards`: 애니메이션 완료 후 요소는 마지막 키프레임의 스타일을 유지합니다.
- `backwards`: 애니메이션 적용 시 요소의 스타일이 첫 번째 키프레임의 스타일로 설정됩니다. (애니메이션이 시작될 때 요소가 점프하는 것처럼 보일 수 있습니다.)
- `both`: 애니메이션 시작 시 요소는 첫 번째 키프레임의 스타일을 유지하고, 애니메이션 완료 후 마지막 키프레임의 스타일을 유지합니다.

 

// 애니메이션 완료 후 마지막 키프레임의 스타일을 유지합니다.
element.animate(
  [{ opacity: 0 }, { opacity: 1 }],
  { duration: 1000, fill: 'forwards' }
);

// 애니메이션 시작 시 첫 번째 키프레임의 스타일을 유지합니다.
element.animate(
  [{ opacity: 0 }, { opacity: 1 }],
  { duration: 1000, fill: 'backwards' }
);

// 애니메이션 시작 시 요소는 첫 번째 키프레임의 스타일을 유지하고, 마지막 키프레임의 스타일을 유지합니다.
element.animate(
  [{ opacity: 0 }, { opacity: 1 }],
  { duration: 1000, fill: 'both' }
);

// 애니메이션 완료 후 요소의 스타일이 변경되지 않습니다.
element.animate(
  [{ opacity: 0 }, { opacity: 1 }],
  { duration: 1000, fill: 'none' }
);

 

첫 번째 예제에서는 `fill`이 `'forwards'`로 설정되어 애니메이션이 완료된 후 요소의 투명도가 1로 유지됩니다. 

 

두 번째 예제에서는 `fill`이 `'backwards'`로 설정되어 애니메이션이 적용될 때 요소의 투명도가 0으로 설정되며, 애니메이션 완료 후에는 투명도가 1로 설정됩니다. 

 

세 번째 예제에서는 `fill`이 `'both'`로 설정되어 애니메이션 시작 시 요소의 투명도가 0으로 설정되고, 애니메이션 완료 후에는 투명도가 1로 설정됩니다. 

 

마지막 예제에서는 `fill`이 `'none'`으로 설정되어 애니메이션이 완료된 후 요소의 스타일이 변경되지 않습니다.

`endDelay` 옵션은 애니메이션이 끝나기 전에 대기할 시간을 밀리초 단위로 지정합니다. 이 옵션은 애니메이션이 반복되기 전이나 요소의 스타일이 리셋되기 전에 일시적인 일시 정지를 추가하는 데 유용합니다.

다음은 `endDelay`를 사용하는 예제입니다.

 

const element = document.querySelector('#myElement');

element.animate(
  [
    { transform: 'translateY(0px)' },
    { transform: 'translateY(-50px)' },
    { transform: 'translateY(0px)' }
  ],
  {
    duration: 1000,
    iterations: Infinity,
    endDelay: 1000
  }
);

 

이 예제에서 요소는 위아래로 이동한 다음 1초 동안 일시 정지한 후 다시 시작됩니다. `endDelay` 옵션은 1000밀리초(1초)로 설정됩니다.

`endDelay`는 `delay`와 동일하지 않습니다. `delay` 옵션은 애니메이션이 시작하기 전에 대기할 시간을 지정하며, `endDelay`는 애니메이션이 끝난 후 대기할 시간을 지정합니다.

 

animate()는 CSS와는 별개의 독립적인 애니메이션을 구현할 수 있으며 Animation 인스턴스를 반환합니다. 반환된 Animation 객체는 애니메이션을 세밀하게 다룰 수 있는 프로퍼티와 메소드, 이벤트를 제공합니다.
상황과 상태에 따른 정밀한 애니메이션 동작을 구현하고자 한다면 이 메소드를 사용하는 것이 좋습니다.