提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「心跳」(Heartbeat) 效果,也叫 heart beat。
元素要快速地連續膨脹、回縮兩次,接著稍作停頓再開始下一次,就像跳動的心臟。
無縫循環播放並保留兩次心跳之間的停頓;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就停止動畫。相似的動效
A
Pulse (脈動)
別稱 Pulsing
元素反覆地輕柔縮放或淡入淡出。
適用情境
骨架屏載入、即時狀態指示、CTA 按鈕
在[套用位置]加入「脈動」(Pulse) 效果,也叫 pulsing。
元素要以緩慢、穩定的節奏輕輕膨脹再回縮:含蓄,不要有彈跳感。
無縫循環播放,不要讓周圍版面移動;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就停止動畫。點擊試試
Like / Heart Burst (愛心迸發)
別稱 Heart animation, Twitter heart, Favorite toggle
點擊時愛心圖示填滿顏色,並迸發出小粒子或跳動一下。
適用情境
按讚和收藏按鈕
在[套用位置]加入「愛心迸發」(Like / Heart Burst) 動畫,也叫愛心動畫 (heart animation) 或收藏切換 (favorite toggle)。
按讚時愛心填滿顏色並帶彈性地彈一下,同時一圈光環和小圓點向外迸發並淡出,整體快速、俏皮;取消按讚時愛心只是安靜地變空。
做成帶有按下狀態的真正切換按鈕,只在開啟時播放迸發效果。A
元素放大後帶著旋轉左右晃動,再恢復原本大小,像在慶祝一樣。
適用情境
成功狀態、慶祝時刻
在[套用位置]加入「慶祝晃動」(Tada) 提示效果。
元素要先微微縮小,再放大並快速傾斜著左右晃動,然後恢復正常大小,像一次小小的慶祝。
只播放一次(例如在操作成功後立刻播放);如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就略過這個動畫。A
將滑鼠移到上面
元素快速放大,再帶著彈性「啵」地回到原樣。
適用情境
圖示、按鈕
在[套用位置]加入「輕彈」(Pop) 懸停效果。
每次游標移入時,元素快速鼓起一次再回到正常大小,像一次帶彈性的輕快彈跳。
每次懸停只播放一次,不要停在放大狀態,也不要循環;避免周圍版面位移。Emphasis 中的其他動效
A
Jello (果凍晃動)
別稱 Jelly
元素像晃動的果凍一樣來回傾斜變形,幅度逐漸減小。
適用情境
俏皮地強調按鈕或 Logo
在[套用位置]加入「果凍晃動」(Jello) 提示效果,也叫 jelly。
元素要像晃動的果凍一樣來回傾斜變形:一開始幅度大,接著很快平息下來。
觸發時只播放一次,並維持元素佔用的空間不變,避免周圍內容位移。A
Ping (雷達波)
別稱 Radar Ping, Ripple Ping, Ping (Radar Pulse), Pulse ring, Notification ping, Pulsating Button
元素的副本反覆放大並淡出,就像雷達波紋。
適用情境
通知小圓點、即時狀態
在[套用位置]加入「雷達波」(Ping) 效果,也叫 radar ping 或脈衝環 (pulse ring)。
元素的一個副本要向外擴大並淡出,以穩定的節奏一次又一次重複,而元素本身保持不動。
把圓環畫在獨立的圖層上,確保它絕不影響版面;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就停止循環。