Day 07 - Animate UI Text Animations - Shimmering / Splitting / Typing Text

前言

#

本篇將會介紹 Animate UI 中的 Shimmering Text、Splitting Text、Typing Text，這些效果能夠賦予文字更多層次，讓畫面更具互動感。

Shimmering Text (流光閃爍文字)

#

1. 使用 Shadcn CLI 加入 Shimmering Text

   npx shadcn@latest add @animate-ui/primitives-texts-shimmering
   

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

   import { ShimmeringText } from '@/components/animate-ui/primitives/texts/shimmering';
   
   <ShimmeringText text="Shimmering Text" wave={false}/>
   

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

   參數	參數型態	說明
   text	string	顯示的文字
   duration?	number	閃閃發光文字動畫時長，預設為 1。注意這不是整段文字的時長，是一個 char 的時長，設太高會變超級慢啊
   wave?	boolean	文字擺動效果，預設為 false
   color?	string	文字顏色，預設為 var(--color-neutral-500)，可以參考 Tailwind-cSS-Color 找到需要的顏色
   shimmeringColor?	string	文字擺動時的顏色，預設為 var(--color-neutral-300)，可以參考 Tailwind-cSS-Color 找到需要的顏色
   transition?	Transition	控制文字漸層過渡效果，有三個參數 (duration 持續時間 : number, repeat 重複次數 : number, ease 動畫播放速度曲線 : string) ease 可以參考 Highlight Text 元件的參數說明

Splitting Text (逐字分解文字)

#

1. 使用 Shadcn CLI 加入 Splitting Text

   npx shadcn@latest add @animate-ui/primitives-texts-splitting
   

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

   import {
       SplittingText,
       type SplittingTextProps,
   } from '@/components/animate-ui/primitives/texts/splitting';
   
   
   <SplittingText 
       text="Splitting Text"
       type="char"
   />
   

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

   參數	參數型態	說明
   text	string	顯示的文字內容
   type	'chars' | 'words' | 'lines'	文字拆分的方式，預設為 chars（逐字拆分），也可選擇依照字詞 words 或行數 lines。要注意的是中文字也是要用空白才能分，標點符號可是不會斷 der
   initial	object	動畫初始狀態（例如 { x: 150, opacity: 0 }）
   animate	object	動畫結束狀態（例如 { x: 0, opacity: 1 }）
   transition	object	動畫過渡效果，包含 duration、ease，詳細請看 Highlight Text 元件的參數說明呦 (ゝ∀･)
   stagger	number	元素之間的動畫間隔時間（秒）。對你沒看錯這邊是 sec，我也不懂為什麼作者有的是秒有的是毫秒 ( ºωº )
   delay	number	動畫延遲開始的時間（秒），預設為 0
   inView	boolean	是否在元素進入 viewport 時才觸發動畫，預設為 false
   inViewMargin	string	用來定義 viewport margin 的參數，格式同 CSS rootMargin，預設 0px
   inViewOnce	boolean	是否僅在第一次進入 viewport 時觸發動畫，預設為 true
   disableAnimation	boolean	是否停用動畫，預設為 false (true 的話你用心酸的膩 (☉д⊙))

Typing Text (打字文字)

#

1. 使用 Shadcn CLI 加入 Typing Text

   npx shadcn@latest add @animate-ui/primitives-texts-typing
   

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

   import {
       TypingText,
       TypingTextCursor,
   } from '@/components/animate-ui/primitives/texts/typing';
   
   <TypingText text="Typing Text" />
   

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

   參數	參數型態	說明
   text	string	顯示的文字
   delay	number	動畫延遲開始的時間（毫秒 ms），預設為 0
   inView	boolean	是否在元素進入 viewport 時才觸發動畫，預設為 false
   inViewMargin	string	用來定義 viewport margin 的參數，格式同 CSS rootMargin，預設 0px
   inViewOnce	boolean	是否僅在第一次進入 viewport 時觸發動畫，預設為 true
   loop	boolean	是否巡迴打字動畫，預設為 false
   holdDelay	number	loop 設為 true 時才會用到的元件。當打字動畫將字打完時，需要等待多久後開始 Backspace，時間（毫秒 ms），預設為 1000 (也就是 1 秒)

小結

#

終於把 Shimmering、Splitting、Typing Text 這幾種文字動畫玩透了！在嘗試的過程中，也發現了不少只有在深入元件參數後才會注意到的細節，這些小地方有時候在官方文件裡可是不會明講的。

希望這篇能幫助到想用文字動畫的你。不過也要提醒大家，文字動畫雖然酷炫，但真的不要過度使用。像是讓長篇文章的段落都在那邊閃啊抖啊，讀者可能會直接關掉網頁（或是直接對你翻白眼 😆）。適量使用在標題或重點提示上，才會真正加分。當然，如果你的目標就是惡搞使用者，那當我沒說過囉。

Reference

#

• Shadcn/ui Docs
• Animate UI Docs
• CSS動畫-Animation(二)(name/duration/delay/timing-function)