前言

在前端開發中，數字的展示常常扮演關鍵角色，例如儀表板上的統計數據、即時更新的價格資訊，或是排行榜的分數變動。然而，若只是單純以靜態文字呈現，往往難以在視覺上吸引用戶的注意力。這時候，文字動畫（Text Animations） 就成為提升使用體驗的一種有效手段。

Animate UI 提供了多種文字動畫效果，今天來介紹其中兩種 Counting Number 與 Sliding Number。前者能夠透過遞增的動畫，表達數值變化的過程；後者以滑動的形式，讓數字更新更自然且具動態感。

Counting Number

1. 使用 Shadcn CLI 加入 Counting Number

   npx shadcn@latest add @animate-ui/primitives-texts-counting-number
   

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

   import { CountingNumber } from '@/components/animate-ui/text/counting-number';
   
   <CountingNumber number={1000}/>
   

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

Sliding Number

基本上可以與上個元件共用許多地方的參數，主要是呈現的效果不同，可以依照自己的需求來調整。

1. 使用 Shadcn CLI 加入 Sliding Number

   npx shadcn@latest add @animate-ui/primitives-texts-sliding-number
   

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

   import { SlidingNumber } from '@/components/animate-ui/text/sliding-number';
   
   <SlidingNumber
       number={12345.67}
       decimalSeparator=","
       decimalPlaces={2}
       padStart
       className="text-lg"
       inView
   />
   

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

小結

今天主要練習如何在數字上使用 Animate UI 文字動畫，讓數字不再只是靜態顯示，而是能夠透過逐步變化的方式，帶來更直觀的動態效果。明天我們將要針對 Text 來讓他動起來 (๑•̀ㅂ•́)و✧

Reference

• Animate UI Docs