Day 27 - Animate UI Effects

前言

#

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

Effects

#

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>
   

   

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

Effect

#

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>
   

   

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

#

• Animate UI Effects