提示词
将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。
在[应用位置]添加“摇摆”(Swing)提示效果。
元素要像悬挂的招牌一样来回摆动,一开始摆幅很大,然后很快平息。
以顶边而不是中心为支点摆动,触发时只播放一次。相似的动效
A
元素像不稳的物体一样,带着倾斜左右摇晃。
适用场景
吸引用户注意图标或按钮
在[应用位置]添加“晃动”(Wobble)提示效果。
元素要带着倾斜左右摇晃,一开始幅度很大,每摆一次就变小,直到停稳。
触发时只播放一次,并避免相邻内容移位。A
Head Shake (摇头)
别称 Headshake, No Shake
元素带着轻微旋转左右摆动,就像摇头表示“不”。
适用场景
输入无效或操作被拒绝
在[应用位置]添加“摇头”(Head Shake)提示效果,也叫 headshake 或 no shake。
元素要像摇头表示“不”一样,带着轻微扭转快速左右转动,每次幅度都比上一次小,最后停稳。
每次触发时只播放一次(比如操作被拒绝时),并且不要让周围的布局跟着移动。A
元素以左上角为铰链摆动、晃荡几下,然后掉出屏幕。
适用场景
以滑稽的方式移除元素
在[应用位置]添加“铰链掉落”(Hinge)退场动画。
元素像螺丝松脱一样以左上角为轴向下摆,来回晃荡,然后一边淡出一边掉出屏幕:缓慢、滑稽、刻意。
让它从其他内容上方掉落,不要挤动布局或产生滚动条,掉落后移除元素;如果用户开启了“减少动态效果”(prefers-reduced-motion),则立即隐藏。A
将鼠标悬停在上面
悬停时元素旋转几度。
适用场景
图标、缩略图
在[应用位置]添加“旋转”(Rotate)悬停效果。
指针悬停时,元素顺时针轻微转动,指针离开后转回:顺滑而含蓄。
避免周围布局移位;键盘聚焦时也显示同样的效果。Emphasis 中的其他动效
A
元素放大后带着旋转左右晃动,再恢复原来大小,像在庆祝一样。
适用场景
成功状态、庆祝时刻
在[应用位置]添加“庆祝抖动”(Tada)提示效果。
元素要先微微缩小,再放大并快速倾斜着左右晃动,然后恢复正常大小,像一次小小的庆祝。
只播放一次(比如在操作成功后立即播放);如果用户开启了“减少动态效果”(prefers-reduced-motion),就跳过这个动画。Vibrate (震动)
别称 Vibration, Buzz
元素向各个方向快速地细微颤动,就像手机在震动。
适用场景
警报提醒、来电式提示
在[应用位置]添加“震动”(Vibrate)提示效果,也叫 buzz 或 vibration。
元素要像手机震动一样,向不同方向快速地细微颤动片刻,然后停下来。
动作幅度要非常小,确保内容仍然清晰可读;每次提醒只播放一次,不要循环。