이 애니메이션 라이브러리는 단 한 줄의 코드만으로 구성 요소에 전환 애니메이션을 자동으로 추가할 수 있는데, 왜 그렇게 쉽고 효율적일까요?
AutoAnimate는 구성 없이 우리가 개발하는 웹 프로젝트에 부드러운 전환 애니메이션을 자동으로 추가하는 JavaScript 도구 라이브러리 입니다. 이전에 권장된 일부 js 애니메이션 라이브러리 와 비교할 때 AutoAnimate의 가장 큰 장점은 구성이 전혀 필요하지 않으며 해당 애니메이션이 자동으로 추가된다는 것입니다. 애니메이션 효과가 매우 매끄러워서 사용자 경험을 향상시키는 데 매우 도움이 됩니다. 제품.
이 js 애니메이션 라이브러리를 자세히 소개하겠습니다.
UI 상호작용에서 구성요소의 위치, 표시, 숨기기, 크기 및 기타 상태가 변경됩니다. 전환 애니메이션이 없으면 다음과 같습니다.
- 버튼을 클릭하면 갑자기 깜박이는 팝업 상자가 열립니다.
- 요소를 삭제하면 해당 요소가 즉시 사라집니다.
- 목록을 정렬할 때 정렬 후 차이를 느끼기 어렵습니다.
이러한 상호작용에 대한 전환 애니메이션이 없으면 사용자에게 매우 경직되고 갑작스러운 느낌을 줄 뿐만 아니라, 더 심각하게는 사용자가 변화를 알아차리지 못하고 작업이 성공하지 못했다고 생각하여 오작동으로 이어질 것입니다. 따라서 사용자 경험을 향상시키기 위해 많은 UI 구성 요소가 애니메이션화되었지만 이러한 작은 인터랙티브 애니메이션을 구현하는 것은 실제로 쉽지 않습니다. 전환 애니메이션에는 다양한 매개 변수와 수명 주기가 포함됩니다. 저는 진입 및 퇴장 애니메이션을 직접 구현했는데 비용이 많이 들었습니다. 매개 변수를 조정하는 데 많은 시간이 걸리며 이는 매우 시간 소모적이고 노동 집약적입니다.
Ruan Yifeng 선생님의 주간지에서 이 애니메이션 라이브러리를 보았습니다. 이전에 Anime.js , GSAP , SpriteJS 와 같은 애니메이션 라이브러리 를 추천했기 때문에 첫 번째 반응은 AutoAnimate가 비슷한 효과를 가질 수 있다는 것이었습니다. 그러나 이해한 후에는 여전히 피상적이었습니다. 이 애니메이션 라이브러리에서 가장 중요한 것은 "자동"입니다. 웹 애플리케이션에 전환 애니메이션을 완전히 자동으로 추가하려면 코드 한 줄만 있으면 됩니다. 효과를 보고 눈물이 났습니다. 정말 대단합니다. .
설치 및 사용
npm / Yarn / pnmp 설치를 지원합니다. npm 설치 방법은 다음과 같습니다.
간단한 코드 예
Vue3 프로젝트를 예로 들면, 저는 애니메이션을 전혀 고려하지 않고 제 생각대로 컴포넌트를 직접 작성합니다. 예를 들어, 다음 코드는 "Expand Paragraph" 버튼을 클릭하면 단락 DOM 노드가 표시됩니다. 상위 노드만 제공하면 나머지 애니메이션 작업이 자동으로 완료됩니다!
위의 코드를 실행한 후 문단이 풀다운 애니메이션 형태로 부드럽게 페이드 아웃되는 효과가 있는데, 이는 매우 매끄럽습니다.
자동 애니메이션의 원리
애니메이션을 추가하는 AutoAnimate의 원리도 매우 간단합니다. 바인딩된 DOM 노드의 DOM 구조 변경을 모니터링하고 해당 전환 애니메이션을 자동으로 추가합니다.
- 하위 노드 추가 => 애니메이션으로 페이드됩니다.
- 하위 노드 삭제 => 애니메이션 페이드 아웃;
- 하위 노드 이동 => 위치 애니메이션 교체
이는 자동으로 추가되는 효과이며, 애니메이션을 추가로 사용자 정의하려는 경우 구성도 지원됩니다. 공식 웹사이트에서는 작성 시 참고할 수 있는 많은 코드 예제를 제공합니다. 이 라이브러리를 사용하면 많은 정렬 및 회전식 효과를 실제로 구현하기가 매우 쉽습니다.
AutoAnimate 프로젝트의 코드 대부분은 개발자 Justin Schroeder가 작성했습니다. MIT 오픈소스 라이선스를 기반으로 한 오픈소스 프로젝트로 누구나 무료로 다운로드하여 사용할 수 있습니다. 물론 상용 프로젝트에도 활용 가능합니다. .