React의 플립 애니메이션에 대해 알아야 할 모든 것

최신 Safari 업데이트 후 WAAPI (Web Animation API)는 이제 모든 최신 브라우저 (IE 제외)에 플래그없이 지원됩니다. 다음은 브라우저가 지원하는 기능을 확인할 수있는 편리한 예입니다. WAAPI는 애니메이션을 실행하는 좋은 방법입니다 (JavaScript에서 실행해야 함)는 기본 API에 속하므로 추가 라이브러리없이 작동 함을 의미합니다. Waapi를 전혀 모른다면 Dan Wilson이 제공 한 소개에 대한 아주 좋은 소개가 있습니다.

플립은 가장 효과적인 애니메이션 방법 중 하나입니다. Flip에는 일부 JavaScript 코드가 실행되어야합니다.

Waapi를 사용하여 교차로를 살펴보고 뒤집어 반응에 통합 해보자. 그러나 우리는 먼저 반응없이 시작한 다음 반응으로 전환합니다.

뒤집고 와이프

Waapi는 플립 애니메이션을 더 쉽게 만듭니다!

Flip Quick Review : 핵심 아이디어는 먼저 당신이 끝나기를 원하는 요소를 배치하는 것입니다. 다음으로 변환을 적용하여 시작 위치로 이동하십시오. 그런 다음 이러한 변환을 취소하십시오.

애니메이션 변환은 매우 효율적이므로 플립은 매우 효율적입니다. WAAPI 전에, 우리는 변환을 설정하고 다음 프레임이 취소/반전 될 때까지 요소의 스타일을 직접 조작해야합니다.

 // WAAPI 전에 뒤집습니다
el.style.transform =`Translatey (200px)`;

requestAnimationFrame (() => {
  el.style.transform = '';
});

이 접근법에 따라 많은 라이브러리가 구축되었습니다. 그러나 여기에는 몇 가지 문제가 있습니다.

• 모든 것이 큰 해킹처럼 느껴졌습니다.
• 플립 애니메이션을 뒤집는 것은 매우 어렵습니다. 클래스가 삭제되면 CSS 변환이 "자유"로 되돌아 가지만 여기에는 그렇지 않습니다. 이전 애니메이션이 실행되는 동안 새 플립을 시작하면 실패가 발생합니다. 반전은 GetComputedStyles를 사용하여 변환 매트릭스를 구문 분석해야하며 새로운 애니메이션을 설정하기 전에 현재 크기를 계산하는 데 사용했습니다.
• 고급 애니메이션은 거의 불가능합니다. 예를 들어, 스케일링 된 부모의 자녀를 왜곡하지 않으려면 각 프레임에서 현재 스케일 값에 액세스해야합니다. 이것은 변환 매트릭스를 구문 분석하는 것만으로 만 수행 할 수 있습니다.
• 브라우저에는주의를 기울여야 할 것이 많습니다. 예를 들어, Firefox에서 플립 애니메이션을 완벽하게 실행하려면 requestAnimationFrame을 두 번 호출해야합니다.

 requestAnimationFrame (() => {
  requestAnimationFrame (() => {
    el.style.transform = '';
  });
});

WAAPI를 사용할 때 이러한 문제가 발생하지 않습니다. 역 함수를 쉽게 되돌릴 수 있습니다. 어린이의 역 스케일링도 가능합니다. 오류가 발생하면 범인을 쉽게 찾을 수 있습니다. 우리는 requestAnimationFrame 메소드와 같은 다양한 것들을 빗질하는 대신 애니메이션 및 리버스와 같은 간단한 기능 만 사용하기 때문에 범인을 쉽게 찾을 수 있습니다.

다음은 WAAPI 버전의 요약입니다.

 el.classlist.toggle ( 'someclass');
const 키 프레임 =/* 크기/위치 차이 계산*/;
el.animate (KeyFrames, 2000);

뒤집고 반응

반응에서 플립 애니메이션이 어떻게 작동하는지 이해하려면 순수한 JavaScript에서 어떻게 작동하는지, 가장 중요한 이유를 아는 것이 중요합니다. 플립 애니메이션의 구성을 상기하십시오.

보라색 배경을 가진 모든 콘텐츠는 렌더링의 "드로우"단계 전에 발생해야합니다. 그렇지 않으면, 우리는 새로운 스타일이 간단히 번쩍이는 것을 볼 수 있습니다. React에서는 모든 DOM 업데이트가 우리에 의해 수행되기 때문에 상황이 약간 더 복잡해집니다.

플립 애니메이션의 마법은 브라우저가 그릴 기회가 있기 전에 요소가 변환된다는 것입니다. 그렇다면 반응에서 "그리기 전"순간을 어떻게 알 수 있습니까?

useLayoutEffect 후크를 살펴 보겠습니다. 당신이 그것이 무엇인지 알고 싶다면… 이 콜백에서 우리가 전달하는 모든 것은 DOM 업데이트 후에도 그리기 전에 동기식으로 발생합니다. 다시 말해, 이것은 플립을 설정하기에 좋은 곳입니다!

플립 기술이 매우 능숙한 일을합시다 : 애니메이션 DOM 위치. 요소가 한 DOM 위치에서 다른 DOM 위치로 어떻게 이동하는지 애니메이션하려면 CSS가 할 수있는 일은 없습니다. (아래 예제에서 프로젝트를 클릭하는 것처럼 할 일 목록에서 작업을 완료하고 완료된 작업 목록으로 옮기는 것을 상상해보십시오.)

가장 간단한 예를 살펴 보겠습니다. 다음 예제에서 두 블록 중 하나를 클릭하면 위치를 바꾸게됩니다. 뒤집지 않으면 즉시 발생합니다.

할 일이 많이 있습니다. Lifecycle Hook Callback : useEffect 및 useLayoutEffect 내에서 모든 작업이 어떻게 발생하는지 주목하십시오. 조금 혼란스러운 것은 플립 애니메이션의 타임 라인이 두 개의 React 렌더링에서 발생하기 때문에 코드 자체에서 분명하지 않다는 것입니다. 다음은 다른 작동 시퀀스를 표시하기 위해 React Flip 애니메이션의 구성입니다.

useEffect useLayoutEffect 에 항상 실행되고 브라우저가 그려진 후에는 항상 실행되지만 첫 번째 렌더링 후 요소의 위치와 크기를 캐시하는 것이 중요합니다. useLayoutEffect 모든 DOM 업데이트 후 실행되기 때문에 두 번째 렌더 에서이 작업을 수행 할 기회가 없습니다. 그러나이 프로세스는 기본적으로 일반 플립 애니메이션과 동일합니다.

주목해야 할 것

대부분의 것들과 마찬가지로 React에서 플립을 사용할 때 고려해야 할 사항이 있습니다.

100 밀리 초 이내에 유지하십시오

플립 애니메이션은 계산입니다. 계산에는 시간이 걸리므로 60fps의 원활한 변환을 보여주기 전에 약간의 작업을 수행해야합니다. 지연이 100 밀리 초 미만인 경우 사람들은 지연을 알지 못하므로 모든 것이이 값 미만인지 확인하십시오. DevTools의 성능 탭은이 콘텐츠를 확인하기에 좋은 장소입니다.

불필요한 렌더링

각 setState 불필요한 렌더링을 유발하고 응용 프로그램을 늦추기 때문에 useState 에 캐시 크기, 위치 및 애니메이션 객체를 사용할 수 없습니다. 최악의 경우 오류로 이어질 수도 있습니다. 대신 useRef 사용하고 그것을 렌더링하지 않고 수정할 수있는 객체로 취급하십시오.

레이아웃 흔들림

브라우저 레이아웃의 반복 트리거링을 피하십시오. 플립 애니메이션의 맥락에서 이것은 요소를 통한 반복을 피하고 getBoundingClientRect 로 위치를 읽은 다음 즉시 animate 을 의미합니다. 가능한 한 "읽기"및 "쓰기"를 배치하십시오. 이것은 매우 부드러운 애니메이션을 허용합니다.

애니메이션이 취소되었습니다

이동할 때 이전 데모의 사각형을 무작위로 클릭하고 중지 후 다시 클릭하십시오. 당신은 결함을 볼 것입니다. 실제로 사용자는 움직일 때 요소와 상호 작용하므로 원활하게 취소, 일시 정지 및 업데이트되도록하는 것이 좋습니다.

그러나 reverse 사용하여 모든 애니메이션을 되돌릴 수있는 것은 아닙니다. 때때로 우리는 그들이 멈추고 새로운 위치로 이동하기를 원합니다 (예 : 요소 목록이 무작위로 중단 될 때). 이 경우 우리는 다음과 같습니다.

• 이동중인 요소의 크기/위치를 가져옵니다
• 현재 애니메이션을 완료하십시오
• 새로운 차원과 위치 차이를 계산합니다
• 새로운 애니메이션을 시작하십시오

React에서는 이것이 보이는 것보다 어렵습니다. 나는이 문제에 대해 많은 시간을 낭비했다. 현재 애니메이션 객체를 캐시해야합니다. 좋은 방법은 ID로 애니메이션을 얻기 위해지도를 만드는 것입니다. 그런 다음 요소의 크기와 위치를 이동해야합니다. 이 작업을 수행하는 두 가지 방법이 있습니다.

1. 기능 구성 요소 사용 : 기능 본문의 각 애니메이션 요소를 반복하고 현재 위치를 캐시하십시오.
2. 클래스 구성 요소 사용 : getSnapshotBeforeUpdate 라이프 사이클 방법을 사용하십시오.

실제로, 공식 반응 문서는 getSnapshotBeforeUpdate 사용하는 것이 좋습니다. "렌더링 단계의 수명주기 (예 : render )와 커밋 단계의 수명주기가 지연 될 수 있기 때문에 (예 : getSnapshotBeforeUpdate 및 componentDidUpdate 와 같은). 그러나 현재이 방법에 대한 후크가 있음을 발견했습니다.

브라우저와 싸우지 마십시오

나는 전에 그것을 말했지만 브라우저와 대면하지 않고 브라우저의 방식으로 일이 일어나도록 노력하십시오. 간단한 크기 변경을 애니메이션 해야하는 경우 CSS가 충분한 지 여부를 고려하십시오 (예 : transform: scale() ). 플립 애니메이션은 브라우저가 실제로 도움이되지 않는 곳에 가장 적합하다는 것을 알았습니다.

• 애니메이션 DOM 위치 변경 (위에서 설명한대로)
• 공유 레이아웃 애니메이션

두 번째는 첫 번째 버전의 버전입니다. 하나의 전체 역할을하고 위치를 바꾸는 두 가지 DOM 요소가 있습니다 (다른 하나는 제거/숨겨져 있습니다). 이 트릭은 멋진 애니메이션을 달성 할 수 있습니다. 예를 들어,이 애니메이션은이 방법을 사용하는 React-Easy-Flip이라는 라이브러리로 만들어졌습니다.

도서관

React에서 플립 애니메이션을보다 쉽고 추상적 인 보일러 플레이트 코드로 만들 수있는 라이브러리가 많이 있습니다. 현재 적극적으로 유지되고있는 라이브러리에는 다음이 포함됩니다. react-flip-toolkit 및 내 라이브러리 react-easy-flip 포함됩니다.

더 무겁지만 더 일반적인 애니메이션을 할 수있는 것을 신경 쓰지 않으면 framer-motion 확인하십시오. 또한 멋진 공유 레이아웃 애니메이션도 허용합니다! 도서관을 깊이 탐색하는 비디오가 있습니다.

자원 및 참조

• Josh W. Comeau의 애니메이션이 아닙니다
• Paul Lewis와 Stephen McGruer의 고성능 확장 및 접기 애니메이션 구축
• Matt Perry의 "Magic Motion Inside"
• @KeyFramers 트윗 "JavaScript의 애니메이션 CSS 변수 사용"
• Mariko Kosaka의 "현대 웹 브라우저의 내부 목록 (3 부)"
• Alex Holachek의 간단한 빌드 복잡한 UI 애니메이션에서 React
• David Khourshid의 "플립 기술을 사용한 레이아웃 애니메이션"
• Kirill Vasiltsov의 "React Hooks가있는 유창한 애니메이션"
• Jayant Bhawal의 "공유 요소 변환에 반응 후크 사용"

이 개정 된 출력은 독창적 인 컨텐츠를 생성하기 위해 텍스트를 역설하면서 원래 이미지 형식과 배치를 유지합니다. 또한 사소한 문법 및 문체 문제를 해결합니다.

위 내용은 React의 플립 애니메이션에 대해 알아야 할 모든 것의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!