iT邦幫忙

2025 iThome 鐵人賽

DAY 27
0

前言

今天同樣是要來介紹 Animate UI 1.0 更新後的新元件庫 -- Effects。有時候你只是想要一個簡單的圖片元件,稍微有些動作,或是只是 Button 想要藏一些小彩蛋,這時候這些 Primitives 的小元件可以幫助你快速的達成目標。

Effects

Effects Demo 1

Slide

  1. 使用 Shadcn CLI 加入

    npx shadcn@latest add @animate-ui/primitives-effects-slide
    
  2. Import 元件並將想要作動的元件包在 <Slide>

    import {
    Slide,
    type SlideDirection,
    } from '@/components/animate-ui/primitives/effects/slide';
    
    
    <Slide>Slide</Slide>
    

Fade

  1. 使用 Shadcn CLI 加入

    npx shadcn@latest add @animate-ui/primitives-effects-fade
    
  2. Import 元件並將想要作動的元件包在 <Fade>

    import { Fade } from '@/components/animate-ui/primitives/effects/fade';
    
    
    <Fade>Fade</Fade>
    

Zoom

  1. 使用 Shadcn CLI 加入

    npx shadcn@latest add @animate-ui/primitives-effects-zoom
    
  2. Import 元件並將想要作動的元件包在 <Zoom>

    import { Zoom } from '@/components/animate-ui/primitives/effects/zoom';
    
    
    <Zoom>Zoom</Zoom>
    

Blur

  1. 使用 Shadcn CLI 加入

    npx shadcn@latest add @animate-ui/primitives-effects-blur
    
  2. 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>
    

    Effects Demo 1

    可以看到 Slide / Fade / Zoom / Blur 各自對應的動作,若想要結合多個效果呢?總不可能 html 無限疊加吧 ♾️,這時候就可以看到我們的元件 - Effect,設定好就可以一次產生多種動作。

Effect

Effects Demo 2

  1. 使用 Shadcn CLI 加入 Effect

    npx shadcn@latest add @animate-ui/primitives-effects-effect
    
  2. 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>
    

    Effects Demo 3

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

EffectProps

參數 參數型態 說明
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「活」起來 🎃

Reference


上一篇
Day 26 - Animate UI Theme Toggler
系列文
讓你的 UI 動起來:Animate-UI 初探27
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
chiaominchang222
iT邦新手 5 級 ‧ 2025-10-11 12:56:56

user有按鈕按真幸福

我要留言

立即登入留言