shapcn은 아이콘 모양을 살려 전환한다

shapcn은 아이콘을 점끼리 한꺼번에 옮기지 않고, 도형을 몸체와 부품으로 나눠 순서대로 전환하는 데모입니다. 웹사이트에서 시작 아이콘과 도착 아이콘, 전환 시간을 고를 수 있습니다. 저는 아이콘의 구조를 전환 규칙으로 삼았다는 점이 눈에 들어왔습니다.

아이콘을 화면에 올린 뒤 모양과 색을 코드로 다루려는 흐름과 맞닿아 있습니다. CSS 연결 매개변수로 SVG 색을 바꾸는 방법은 브라우저 지원에 제약이 있습니다. shapcn도 현재 쓸 수 있는 스크립트 방식과 아직 공개되지 않은 패키지 사이에 차이가 있습니다.

제작자는 선의 길이에 따라 도형에 가중치를 주고, 가장 큰 값의 절반 이상인 도형을 몸체로 잡는다고 설명합니다. 기존 부품은 계층의 깊은 곳부터 몸체로 들어가고, 새 부품은 역순으로 자랍니다. 도형이 녹거나 흐려지지 않고 모양이 만들어지는 순서를 보여준다는 점이 반갑습니다.

현재 바로 쓸 수 있는 것은 웹사이트가 제공하는 스크립트 방식입니다. npm 패키지는 아직 공개되지 않았고, 데모에 나오는 사용 방식도 계획 단계입니다. 움직임을 살펴보는 데모로는 만날 수 있지만, 패키지나 데모의 사용 방식을 기준으로 제품 개발을 시작한다면 막힐 수 있습니다.

플레이그라운드에서 시작 아이콘과 도착 아이콘을 바꾸고 전환 시간도 조절해 보십시오. 부품이 어떤 순서로 나타나고 기존 도형이 어떻게 몸체로 모이는지 확인하십시오. 프로젝트에 붙일 생각이라면 제공된 스크립트 방식과 저장소의 소스를 살펴보십시오.

마지막으로 앱 아이콘이 다른 모양으로 바뀌는 순간을 유심히 살펴본 것은 언제입니까?