Day 05 - Animate UI Text Animations - Counting Number & Sliding Number

前言

#

在前端開發中，數字的展示常常扮演關鍵角色，例如儀表板上的統計數據、即時更新的價格資訊，或是排行榜的分數變動。然而，若只是單純以靜態文字呈現，往往難以在視覺上吸引用戶的注意力。這時候，文字動畫（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. 若還有想要微調，可以增加更多參數 (? 表示為選填參數)

   參數	參數型態	說明
   number	number	最終要顯示的目標數字，由初始值逐漸變化到這個 number
   fromNumber?	number	動畫的起始數字，預設為 0
   padStart?	boolean	是否自動補零，在一些需要對齊的場景（如時鐘、編號、流水號），可設定為 true
   inView?	boolean	控制動畫是否要等到元素進入畫面（viewport）時才開始播放，避免一進頁面就全部執行
   inViewMargin?	UseInViewOptions['margin']	設定觸發「進入視窗」判斷的邊界範圍
   inViewOnce?	boolean	是否只在元素首次進入視窗時執行動畫
   decimalPlaces?	number	小數點後位數。像是設定為 3，就會顯示 123.456
   decimalSeparator?	string	遇到小數點時，要使用的分隔符號
   transition?	SpringOptions	控制動畫的過渡效果，有兩個參數（stiffness 剛度 : number, damping 阻尼 : number）Stiffness 像是彈簧的剛性，數值越高，產生的運動越突然；Damping 像是彈簧的反作用力。如果設定為 0，彈簧將無限振盪。若覺得太抽象，可以至 The Physics Classroom 試玩
   className	string	可搭配 Tailwind CSS font-family、font-size、font-weight 等 Typography 使用

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. 若還有想要微調，可以增加更多參數 (? 表示為選填參數)

   參數	參數型態	說明
   number	number	最終要顯示的目標數字，由初始值逐漸變化到這個 number
   fromNumber?	number	動畫的起始數字，預設為 0
   padStart?	boolean	是否自動補零，在一些需要對齊的場景（如時鐘、編號、流水號），可設定為 true
   inView?	boolean	控制動畫是否要等到元素進入畫面（viewport）時才開始播放，避免一進頁面就全部執行
   inViewMargin?	UseInViewOptions['margin']	設定觸發「進入視窗」判斷的邊界範圍
   inViewOnce?	boolean	是否只在元素首次進入視窗時執行動畫
   decimalPlaces?	number	小數點後位數。像是設定為 3，就會顯示 123.456
   decimalSeparator?	string	遇到小數點時，要使用的分隔符號
   transition?	SpringOptions	控制動畫的過渡效果，有兩個參數（stiffness 剛度 : number, damping 阻尼 : number, mass 質量 : number）Mass 越小，會感覺比較輕盈；其餘參數請參考 Counting Number 元件的參數說明
   className	string	可搭配 Tailwind CSS font-family、font-size、font-weight 等 Typography 使用

小結

#

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

Reference

#

• Animate UI Docs