Animation 순차 처리

move 액션에 대한 처리

사전 지식
animate는 keyframes와 option을 인수로 받는 함수이다.

element.animate(
  [
    {
      // from
      opacity: 0,
      color: "#fff",
    },
    {
      // to
      opacity: 1,
      color: "#000",
    },
  ],

 points = [
  {x: 100, y: 100},
  {x: 200, y: 200},
  {x: 300, y: 300}
]

points 배열 값에 대해 각각 요소의 위치를 들렸다가 마지막 위치로 가야했다.

문제

points에 대해 반복문을 돌려서 각 point 마다 animate를 추가해줬을 때 중간 값들을 생략하고 마지막 포인트로 가는 문제가 있었다.

이유는 forEach로 각각 등록된 애니메이션이 독립적으로 실행되고 마지막 애니메이션이 이전 애니메이션을 덮어쓰게 되기 때문이다.

 points.forEach((point) => {
  element.animate(
    { transform: `translate(${point.x}px, ${point.y}px)` },
    { ...animationConfig, duration: animationConfig.duration / points.length }
  )
})
// 실제로 동작하는 코드
element.animate({transform: 'translate(100px, 100px)'}, {...})  // 첫 번째 애니메이션
element.animate({transform: 'translate(200px, 200px)'}, {...})  // 두 번째 애니메이션
element.animate({transform: 'translate(300px, 300px)'}, {...})  // 세 번째 애니메이션

해결 방법

이런 문제를 해결하기 위해서는 단순히 animation을 여러 번 호출하는 것이 아닌 연속으로 들어갈 값을 가진 배열을 만들어 animate 함수의 첫 번째 인수(keyframes)로 전달한다.

const keyframes = [
  {
    transform: `translate(0,0)`,
  },
  ...animation.points.map((point) => ({
    transform: `translate(${point.x}px, ${point.y}px)`,
  })),
]

element.animate(keyframes, animationConfig)
// 실제로 동작하는 코드
element.animate([
  { transform: 'translate(100px, 100px)' },
  { transform: 'translate(200px, 200px)' },
  { transform: 'translate(300px, 300px)' }
], animationConfig)