FLIP을 사용하여 HTML 요소 애니메이션

최신 웹 앱에서는 HTML 요소에 애니메이션을 적용해야 할 필요성이 있습니다. 여러 목록 간의 전환, 한 목록에서 위치 전환, 선택 시 요소 증가 등을 시각화하는 것입니다. 항목에 애니메이션을 적용하여 앱이 더 '화려하게' 느껴지도록 하는 경우가 많습니다.

그렇게 하는 동안 대답해야 할 몇 가지 질문이 있다는 것을 알게 될 것입니다. DOM을 변경하는 요소를 어떻게 처리합니까? 애니메이션을 시작하는 시기와 방법. 요소를 복제하거나 재사용해야 합니다. 어떤 식으로든 FLIP이 모든 질문에 답할 것이라고 제안하는 것은 아닙니다. 그러나 애니메이션 관리를 좀 더 쉽게 할 수 있는 좋은 출발점이 될 것입니다.

트릭은 요소 시작 위치에서 시작하지 않고 최종 위치에서 시작하는 것입니다. FLIP이 무엇을 의미하는지 설명하면 이 모든 것이 더 명확해질 것입니다.

FLIP은 First, Last, Invert 및 Play의 약자이며 Paul Lewis에 의해 만들어졌습니다.

첫 번째: 요소 시작점. DOM에서 이 정보를 수집합니다.

마지막: 요소의 최종 위치입니다. 또한 DOM에서 이 정보를 검색합니다.

반전: 첫 번째 위치에서 마지막 위치까지의 변환(크기 조정, 회전, 변환 등)을 계산하고 반전합니다. 따라서 오른쪽으로 100px 애니메이션을 적용해야 하는 경우 x축에서 -100px를 사용하십시오. 이렇게 하면 이전과 동일한 위치에 요소가 표시됩니다.

재생: 애니메이션을 시작합니다. 이제 반전된 시작 위치에서 현재 위치로 전환됩니다. 다른 작업을 수행할 필요가 없습니다.

예를 살펴보겠습니다.

const flip = () => {
  // retrieve the block to animate
  const block1 = document.querySelector<HTMLDivElement>('#block1')

  // an array with 3 target elements
  const positions: Element[] = [
    document.querySelector('.middle'),
    document.querySelector('.end'),
    document.querySelector('.start'),
  ]
  let index = 0

  if (block1) {
    // animate the block on click
    block1.addEventListener('click', () => {
      // FLIP - First
      // retrieve the position of the block at its starting point
      const start = block1.getBoundingClientRect()

      // Move the element to its destination
      positions[index].appendChild(block1)

      // FLIP - Last
      // retrieve the position of the block at its final position
      const end = block1.getBoundingClientRect()

      // FLIP - Invert
      // Calculate the change from the start to the end position
      const dx = start.left - end.left
      const dy = start.top - end.top
      const dh = start.height - end.height
      const dw = start.width - end.width

      // FLIP - Play
      // Initiate the animation
      block1.animate(
        [
          {
            transformOrigin: 'top left',
            transform: `translate(${dx}px, ${dy}px)`,
            height: `${dh}px`,
            width: `${dw}px`,
          },
          {
            transformOrigin: 'top left',
            transform: 'none',
          },
        ],
        { duration: 400, fill: 'both', easing: 'ease-in-out' }
      )

      index = (index + 1) % positions.length
    })
  }
}

FLIP으로 플레이할 때 몇 가지 문제가 발생할 수 있습니다.

요소의 크기를 조정할 때 둥근 테두리를 처리하기가 상당히 어려울 수 있습니다.

요소 회전이 말처럼 쉽지 않습니다.

여러 애니메이션을 처리하는 것은 다소 까다로울 수 있습니다.

경우에 따라 요소 너비나 높이를 변경하지 않고 크기 조정 변환을 사용하고 싶을 수 있습니다. 그러나 이렇게 하면 둥근 테두리나 글꼴 크기 등을 처리하기가 더 어려워집니다.

어쨌든 이러한 문제 등을 처리할 수 있는 멋진GSAP plugin이 있습니다.


사진 제공: Liam Shaw on Unsplash