Morphicons: biến icon này thành icon khác thật mượt, không cần viết animation

Đổi icon bằng cách xoay hoặc fade thường trông “giật cục”. Morphing — nét vẽ uốn dần từ hình này sang hình kia — cho người dùng thấy rõ trạng thái vừa thay đổi (menu thành dấu X, play thành pause). Tự code thì khó vì hai icon SVG thường có số điểm path khác nhau. Morphicons là thư viện giúp các icon SVG biến hình mượt sang nhau bằng chuyển động mô phỏng lò xo, dùng được với các bộ icon phổ biến và không kéo theo dependency nặng.

Vì sao morphing hay hơn đổi icon thẳng?

• Truyền đạt thay đổi trạng thái: mắt người theo dõi được quá trình biến đổi, hiểu “điều gì vừa xảy ra”.
• Cảm giác mượt và có chất lượng: chuyển động có quán tính tự nhiên hơn easing tuyến tính.
• Tiết kiệm không gian: một nút có thể đảm nhiệm hai trạng thái.

Tính năng

Khó khăn mà thư viện giải quyết

Để biến hình mượt, hai path phải có cùng số điểm và thứ tự tương ứng. Nếu không, nét vẽ bị xoắn hoặc nhảy. Thư viện xử lý việc đối chiếu và nội suy giữa các path khác cấu trúc, giúp bạn không phải chuẩn hoá thủ công từng cặp icon.

Dùng ở đâu?

• Menu ↔ đóng (hamburger sang X).
• Play ↔ Pause.
• Thêm ↔ Đã thêm (dấu cộng sang dấu tích).
• Sáng ↔ Tối (mặt trời sang mặt trăng).
• Sao yêu thích, bookmark, like.

Nguyên tắc dùng tốt

• Giữ thời lượng 150–300ms để hiệu ứng có ý nghĩa mà không làm chậm thao tác.
• Luôn đổi kèm aria-label (ví dụ “Mở menu” → “Đóng menu”) vì người dùng trình đọc màn hình không thấy hiệu ứng.
• Tôn trọng prefers-reduced-motion: đổi icon ngay không hoạt hình.
• Không lạm dụng: chỉ dùng cho các nút đổi trạng thái, không phải mọi icon.

Áp dụng thế nào?

• Frontend dev: thử với một nút (menu/đóng) trong dự án đang dùng Lucide/Heroicons.
• Designer: xác định các cặp icon đáng morph; kiểm tra rằng ý nghĩa vẫn rõ ở trạng thái giữa chừng.
• PM/QA: kiểm thử trên thiết bị yếu và với trình đọc màn hình.