guillermolg00/morphicons

해결하는 문제

morphicons는 두 가지 서로 다른 선 기반 아이콘(Lucide, Tabler 또는 Heroicons와 같은) 사이의 전환을 애니메이션화하는 방법을 제공하여, 하나가 다른 하나로 부드럽게 "모핑"되도록 합니다. 수학적 정렬을 사용하여 두 모양 사이의 가장 자연스러운 경로를 찾아냄으로써, 보간 과정에서 모양이 축소되거나 기울어지는 문제를 해결하거나 회전 그룹을 수동으로 정의할 필요를 없애줍니다.

작동 방식

이 라이브러리는 2D Procrustes 분석과 극좌표 보간법을 사용하여 닫힌 형식으로 모양 사이의 최적의 유사성을 해결합니다. 이를 통해 두 아이콘이 회전 시 합동이라면, 전환이 왜곡된 모핑이 아닌 회전처럼 보이게 됩니다. 세 가지 작동 모드를 지원합니다: 비제어(prop이 변경될 때 자동 애니메이션), 제어(제스처나 스크롤을 위한 명시적 진행률), 그리고 명령형(핸들을 사용하여 코드를 통해 애니메이션을 트리거함).

대상 사용자

복잡한 설정이나 런타임 종속성 없이 고품질의 물리 기반 아이콘 애니메이션을 원하는 React, Vue, Svelte, React Native 또는 일반 HTML/Web Components를 사용하는 프론트엔드 개발자.

주요 특징

• 범용 호환성: 모든 선 기반 아이콘 데이터(Lucide, Tabler, Heroicons, Iconoir 등)와 작동합니다.
• 멀티 프레임워크 지원: React, Vue, Svelte, React Native, Astro를 위한 전용 바인딩과 vanilla JS DOM 드라이버를 제공합니다.
• 물리 기반: 부드럽고 자연스러운 전환을 위해 스프링 물리 엔진을 사용합니다.
• 제로 런타임 종속성: 핵심 로직은 어떤 프레임워크와도 독립적입니다.
• 유연한 출력 대상: 인라인 SVG, CSS 마스크(maskTarget을 통해), 또는 2D Canvas(canvasTarget을 통해)로 렌더링할 수 있습니다.
• 접근성 우선: OS의 reduced-motion 설정을 지원합니다.