이 뒤집기 기교를 사용하면 더욱 좋은 애니메이션 효과를 얻을 수 있다

소개하다.
애니메이션이 아주 좋아요.그것들은 사용자로 하여금 주의력을 집중하게 하고 사이트를 빠르게 느끼게 한다.그러나 잘못하면 반대로 사이트를 둔감하고 경직시킬 수 있다.

옌키?
브라우저에서 엔티티의 모양새를 변경해야 하는 경우 변경에 영향을 받는 각 엔티티를 다시 계산해야 합니다.
많은 엔티티가 영향을 받고 다시 계산해야 하는 경우 브라우저의 계산 시간이 더 길어야 합니다.이 절차가 화면 새로 고침에 필요한 시간을 초과하면 프레임을 건너뜁니다.
예를 들어 대부분의 장치는 초당 60 프레임으로 운행한다.따라서 프레임당 재계산 시간은 약 10밀리초(1초/60=>16.66밀리초-브라우저에서 정리)를 초과해서는 안 된다.그렇지 않으면 애니메이션이 매끄럽지 않고 말을 더듬게 됩니다.

그럼 어떡하지?
애니메이션을 매끄럽게 하고 60FPS와 jank free를 유지하는 두 가지 방법이 있습니다.

CSS 모드
DOM을 변경할 때마다 키 렌더 경로 계산이 트리거되어 픽셀 업데이트가 화면에 표시됩니다.여기에는 최대 3단계가 포함됩니다.

레이아웃/롤백 용접
이 단계에서 브라우저는 문서 루트부터 각 요소의 크기와 공간을 계산합니다.이로써 원소box-model가 생겼다.

페인트
이 단계에서는 레이어를 작성하고 픽셀로 채우는 방법에 대해 설명합니다.텍스트, 색상, 이미지, 프레임 및 섀도우를 포함하되 이에 국한되지 않습니다.

합성
여기서 브라우저는 도면층을 GPU로 보내서 최종적으로 정확한 순서로 화면에 그립니다.이것은 서로 다른 노선에서 발생한다.

이러한 절차가 관련될수록 브라우저가 해야 할 일이 많아진다.transform 및 opacity 속성은 작성 단계만 변경하면 되므로 매우 효과적입니다.

어떻게 써요?뒤척이다
작은 시각 변화 (예를 들어 단추를 누르는 것) 에만 적용될 수 있지만, 카드가 펼쳐지거나 새 보기로 바뀌는 등 복잡한 레이아웃 변화에 애니메이션을 설정할 수도 있다.
요소의 시작 모양을 확대/변환/회전하여 끝 모양처럼 보이도록 하는 것(예: 카드를 전체 화면 보기로 확대)과는 달리 카드를 최종 형식으로 변경하고 애니메이션 없이 이전 크기로 축소하는 것과는 반대의 작업을 수행할 수 있습니다.이 단계는 너무 빨리 발생해서 아무 일도 일어나지 않은 것처럼 보인다.그런 다음 차이 애니메이션을 설정합니다(지금은 배율 조정 작업).
이 과정은 4단계를 포함하기 때문에 뒤집기(제1, 마지막, 뒤집기, 재생-originaliy by Paul Lewis)를 창조했다.

애플 뉴스
코드 예
CodeSandbox 코드 보기
live site 실제 효과 봐봐.

우선: 시작 요소의 크기 가져오기

first = collapsedImage.getBoundingClientRect();

빠른 새로 고침: getBoundingClientRect() 높이, 너비, 위, 오른쪽, 아래, 왼쪽, x와 y 값을 가진 대상을 되돌려줍니다.

마지막: 레이아웃을 변경하고 크기를 가져옵니다.

  collapsedCard.classList.add("active");
    ...
  last = fullscreenImage.getBoundingClientRect();

이 예에서는 표시 속성을 수정하여 레이아웃을 변경합니다.이것은 간단하지만 매우 직관적인 변화로 회류를 촉발한다.

반전: 요소를 마지막 형식에서 시작 형식으로 변환

  widthDifference = first.width / last.width;
  heightDifference = first.height / last.height;
  xDifference = first.left - last.left;
  yDifference = first.top - last.top;

    ...
  requestAnimationFrame(() => {
        fullscreenImage.style.transform = `translate(${xDifference}px, ${yDifference}px) scale(${widthDifference}, ${heightDifference})`;
        fullscreenImage.style.transition = "transform 0ms";
    ...
  });

다음에 다시 그릴 수 있을 때, 이미지는 시작 이미지에 놓을 수 있도록 변환되고 축소됩니다.이러한 변화는 과도하지 않은 상황에서 발생하고 시각적으로 뚜렷하지 않다(변화의 계산 시간이 100밀리초보다 적으면 우리는 그것이 순간적으로 발생한 것이라고 생각할 것이다)

재생:시각적으로 차이 애니메이션 만들기

  requestAnimationFrame(() => {
        ...
    requestAnimationFrame(() => {
        fullscreenImage.style.transform = "";
        fullscreenImage.style.transition = `transform ${transitionTime}ms ${easing}`;
    });
  });

다시 한 번, 다음 가능한 재그림에서 이러한 변화는 회복되었지만, 이번에는 완화되었다.따라서 원래의 모양으로 돌아가 아름답고 매끄러운 과도기를 갖게 된다.
이것은 두 동작 사이에 최소한 하나의 프레임이 있어야 한다.그렇지 않으면,javascript는 명령을 한꺼번에 처리할 뿐, 우리는 어떠한 시각적 효과도 볼 수 없습니다.이 명령들을 분리하기 위해서, 우리는 RequestAnimationFrame에서 RequestAnimationFrame를 사용할 수 있습니다.이 화제에 대한 더 많은 정보는 곧 발표될 것이다.

고려 사항

이 과정에서 일부 CSS 속성(특히 border-radius)은 달라 보이고 이런 착각을 파괴할 수 있다.

예를 들어'테두리 반경: 20px'와 transform: scale(0.5)가 있는 200x200px장방체는 같은 테두리 반경을 가진 100x100px장방체와 다르게 보이지만 백분율에 근거한 값이 작용한다)

참고: 각 요소에 대해 이 작업을 수행해야 하기 때문에 매우 빠르게 복잡해질 수 있습니다. 특히 여러 요소가 영향을 받을 때(현대 프레임워크는 복잡성을 줄이는 데 도움이 될 수 있습니다)

기대 많이 해주세요.
리퀘스트 Animation Frame과 performant javascript 애니메이션에 대한 더 많은 정보는 다음 주에 발표될 것입니다.