Day 15 - Animate UI Icons

前言

#

在介面設計中，圖示（Icons）是最常見也最直覺的元素，不僅能提升辨識度，還能讓操作更有效率。

Animate UI 提供的 Icons 元件，不只是簡單的圖示，還能搭配動畫效果，就讓我們一起打造出既美觀又實用的介面吧🥳

好的圖示應該可以提高使用者的操作效率，不易讓人發生操作失誤

From Wikipedia

Icons

#

1. 前往 Animate UI Icons 挑選想要增加的 Icon，目前有 204 個 icons

2. 今天我想要使用 Wheel 這個 Icon，點擊它會跳出如下圖

   

   將 Sheet 上方的 Installation 複製

   npx shadcn@latest add @animate-ui/icons-loader-pinwheel
   

3. Import 元件並將元件放在想要的位置上

   import { LoaderPinwheel } from "@/components/animate-ui/icons/loader-pinwheel";
   

   這邊有個 Small Tips

   前一步安裝後輸出的 Icons 安裝位置複製下來，在 @/ 後貼上去 Import 就不用自己找檔案路徑在哪裡了

   

   在 Sheet 上的 Usage 中複製貼到想要呈現的位置

   <LoaderPinwheel animateOnHover />
   

   

4. 若還有想要微調，可以增加更多參數 (? 表示為選填參數)

   在 <LoaderPinwheel animateOnHover /> 後有個 animateOnHover 指的是只有在滑鼠游標移到圖示上方才動作，有其他功能如下：

   參數	說明
   animateOnHover	滑鼠游標移到圖示上方才動作
   animateOnTap	滑鼠游標點擊圖示動作
   animateOnView	網頁視角移動到才動作

   另外 Icon 動作的方式也有幾種預設的方式，以 Wheel 這個 Icon 有三個 default、path、path-loop

   

   不同效果的呈現結果如下：

   

   程式碼如下：

   <div className="flex gap-[24px] flex-wrap items-center justify-center">
       <AnimateIcon animateOnView animation={"default"}>
           <LoaderPinwheel />
       </AnimateIcon>
       <h3>Default</h3>
   </div>
   
   <div className="flex gap-[24px] flex-wrap items-center justify-center">
       <AnimateIcon animateOnView animation={"path"}>
           <LoaderPinwheel />
       </AnimateIcon>
       <h3>Path</h3>
   </div>
   
   <div className="flex gap-[24px] flex-wrap items-center justify-center">
       <AnimateIcon animateOnView animation={"path-loop"}>
           <LoaderPinwheel />
       </AnimateIcon>
       <h3>Path Loop</h3>
   </div>
   

   另外還有其他參數如下：

   參數	參數型態	說明
   onAnimateChange	(state: boolean) => void	當動畫狀態改變時觸發Function
   animateOnViewMargin	string	觸發動畫的 viewport margin（同 CSS rootMargin 格式），預設為 '0px'
   animateOnViewOnce	boolean	是否僅在第一次進入 viewport 時觸發動畫，預設為 true
   loop	boolean	是否讓動畫循環播放，預設為 false
   loopDelay	number	循環播放時的延遲時間（毫秒 ms），預設為 0
   onAnimateStart	() => void	動畫開始時觸發的 Function
   onAnimateEnd	() => void	動畫結束時觸發的 Function
   delay	number	動畫延遲開始的時間（毫秒 ms），預設為 0

小結

#

Icons 圖示在介面中雖然常被視為小細節，但實際上能大幅影響使用者體驗。透過 Animate UI 的 Icons 元件，不只能維持清晰的識別性，還能加入細緻的動態效果，讓你的設計更具吸引力與互動感。

Reference

#

• Animate UI Docs