今天同樣是要來介紹 Animate UI 1.0 更新後的新元件庫 -- Effects。有時候你只是想要一個簡單的圖片元件,稍微有些動作,或是只是 Button 想要藏一些小彩蛋,這時候這些 Primitives 的小元件可以幫助你快速的達成目標。
使用 Shadcn CLI 加入
npx shadcn@latest add @animate-ui/primitives-effects-slide
Import 元件並將想要作動的元件包在 <Slide>
import {
Slide,
type SlideDirection,
} from '@/components/animate-ui/primitives/effects/slide';
<Slide>Slide</Slide>
使用 Shadcn CLI 加入
npx shadcn@latest add @animate-ui/primitives-effects-fade
Import 元件並將想要作動的元件包在 <Fade>
import { Fade } from '@/components/animate-ui/primitives/effects/fade';
<Fade>Fade</Fade>
使用 Shadcn CLI 加入
npx shadcn@latest add @animate-ui/primitives-effects-zoom
Import 元件並將想要作動的元件包在 <Zoom>
import { Zoom } from '@/components/animate-ui/primitives/effects/zoom';
<Zoom>Zoom</Zoom>
使用 Shadcn CLI 加入
npx shadcn@latest add @animate-ui/primitives-effects-blur
Import 元件並將想要作動的元件包在 <Blur>
import { Blur } from '@/components/animate-ui/primitives/effects/blur';
<Blur>Blur</Blur>
若有想要一次套用多個,可以在元件加上 s,像是 <Blur>
改成 <Blurs>
就可以囉~
<Blurs>
<div>Blur 1</div>
<div>Blur 2</div>
<div>Blur 3</div>
</Blurs>
可以看到 Slide / Fade / Zoom / Blur 各自對應的動作,若想要結合多個效果呢?總不可能 html 無限疊加吧 ♾️,這時候就可以看到我們的元件 - Effect,設定好就可以一次產生多種動作。
使用 Shadcn CLI 加入 Effect
npx shadcn@latest add @animate-ui/primitives-effects-effect
Import 元件並將元件放在想要的位置上
import { Effect } from '@/components/animate-ui/primitives/effects/effect';
<Effect
delay={0}
blur={true}
slide={true}
fade={true}
zoom={true}
className="px-6 py-4 bg-accent"
>
Effect
</Effect>
這邊想說應該會有需要一次使用多個參數,就把參數附在這~
同樣,如果有需要許多 div 一起動作,可以改成 <Effects>
<Effects
delay={1}
blur={true}
slide={true}
fade={true}
zoom={true}
>
<div>Effect 1</div>
<div>Effect 2</div>
<div>Effect 3</div>
</Effects>
若還有想要微調,可以增加更多參數 (? 表示為選填參數)
參數 | 參數型態 | 說明 |
---|---|---|
delay | number |
動畫延遲時間(秒),預設為 0 |
inView | boolean |
滑動到進入顯示畫面時才觸發動畫 |
inViewMargin | string |
定義觸發動畫的視窗邊界距離(Intersection Observer Margin),預設為 '0px' |
inViewOnce | boolean |
是否在首次進入畫面時觸發動畫,預設為 true |
blur | boolean |
是否啟用模糊效果,預設為 false |
slide | boolean |
是否啟用滑入效果,預設為 false |
fade | boolean |
是否啟用淡入效果,預設為 false |
zoom | boolean |
是否啟用縮放效果,預設為 false |
經過 Animate UI – Effects 的洗禮,有沒有覺得他就像是為你的介面灑上一點魔法粉,讓元件之間的互動更有「靈魂」—— 從滑動、淡入到縮放,每個細節都能被精準掌控。Effects 不只是讓畫面動起來,而是讓你的 UI「活」起來 🎃