소개

애니메이션 레이아웃은 어렵습니다. 금지 적으로 그렇습니다. 얼마나 많은 야심 찬 디자이너가 앱 품질 UI 애니메이션의 눈부신 비디오를 개발 팀에 제공했지만 거절 당할까요?

웹 개발자 인 경우 클릭하면 항목이 전체 화면보기로 열리는 이러한 종류의 App Store 스타일 상호 작용을 실현하도록 요청하면 어떻게 반응할까요?

https://mattperry.is/writing-code/layout-projection-animate-browser-layout-60fps

전환을 구축하려는 시도조차 없이 두 가지 정적 레이아웃이 구현 될 가능성이 있습니다. 그 이유는 다양하고 합법적 일 것입니다. 시간 제약 대 구현의 완전한 복잡성, 또는 코드베이스의 지속적인 유지 관리가 게임 후반의 Jenga 상태에 남아 있습니다.

웹에서 이런 종류의 애니메이션이 말 그대로 불가능하다는 직감이 들 수도 있습니다.

이러한 이유 (그리고 아마도 그 이상)는 날씨에 닳은 거미의 감각에서 튀어 나와 또 다른 수축 된 디자인 팀의 귀로 곧장 터질 것입니다.

디자이너 : 일치하는 야망이 부족한 것이 아닙니다. 웹의 레이아웃 애니메이션은 엄청나게 다양한 기술적 및 실제적 장벽을 제시합니다.

이 짧은 포스트 시리즈에서는 레이아웃 애니메이션 문제에 대한 개요와 지금까지 시도한 몇 가지 솔루션을 제공 할 것입니다.

그런 다음 고성능 CSS 변환 속성을 사용하여 레이아웃에 애니메이션을 적용하는 새로운 방법 인 레이아웃 프로젝션을 소개합니다. 초기 구현은 이미 Framer의 Magic Motion과 Framer Motion의 레이아웃 애니메이션 기능을 지원합니다.

<motion.div layout /> 

레이아웃 애니메이션의 구현을 쉽게 작성하고, 읽고, 유지 관리 할 수 ​​있다는 것은 그것이 전혀 구현 될 가능성이 더 높다는 것을 의미합니다. 기능이 성공하면 섬세한 코드베이스에 얽매이지 않을 것입니다. 성공하지 못하면 연마에 훨씬 적은 시간을 낭비한 것입니다.

레이아웃 소품은 목록의 항목 순서를 변경하고 출력의 변경 사항을 자동으로 애니메이션하는 것과 같은 상태 기반 레이아웃 애니메이션을 만드는데도 유용합니다.

일반적인 요청은 콘텐츠가 추가 / 제거 될 때 높이를 애니메이션 할 수 있다는 것입니다. 변환으로 수행하는 것이 더 좋습니다.

이 간단한 API를 공유 요소 전환에 사용할 수도 있습니다. 레이아웃을 고유 한 layoutId로 대체하면 마치 하나의 연속 요소 인 것처럼 이전 요소의 새 요소에 애니메이션을 적용 할 수 있습니다.

isSelected && <motion.div layoutId="underline" />; 

레이아웃 애니메이션을 위한 사용자 용 API는 최소한입니다. 그러나 내부적으로도 레이아웃 프로젝션 기술은 단순한 뷰포트 상대 경계 상자로 추상화됩니다.

이 뷰포트 상자가 레이아웃 투영의 복잡성을 추상화 하는 방법을 살펴 보겠습니다. 따라서 공유 요소 전환 및 드래그하여 재정렬과 같은 고급 애니메이션을 만드는 데 사용하는 데 집중할 수 있습니다. 또한 이 뷰포트 상자를 활용하여 SVG 및 WebGL을 성능이 뛰어난 레이아웃 애니메이션에 통합하는 탐색 작업에 대해서도 알아 봅니다.

Framer Motion은 React 라이브러리이지만 마지막 부분에서는 기능 구현의 핵심 비트에 대해 기술적으로 살펴 보겠습니다. 끝까지 독자가 이 기술을 중심으로 자신의 라이브러리를 구현할 수 있는 레이아웃 투영에 대한 이해를 충분히 공유하고자 합니다.

먼저 레이아웃 애니메이션, 수행하기 어려운 이유, 지금까지 시도한 몇 가지 솔루션을 자세히 살펴 보겠습니다.