提示词
将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。
在[应用位置]添加“摇头”(Head Shake)提示效果,也叫 headshake 或 no shake。
元素要像摇头表示“不”一样,带着轻微扭转快速左右转动,每次幅度都比上一次小,最后停稳。
每次触发时只播放一次(比如操作被拒绝时),并且不要让周围的布局跟着移动。相似的动效
Shake (抖动)
别称 Shake X, Shake Y, Shake Horizontal, Shake Vertical, shakeX, Error shake, Wiggle, Invalid input shake, Headshake
元素沿一个方向快速来回抖动。
适用场景
表单错误反馈
在[应用位置]添加“抖动”(Shake)效果,也叫 error shake 或 invalid input shake。
元素要快速左右抖动几次,然后正好停在起始位置:快速、干脆。
每次出错时播放一次,不要循环;同时显示可见的错误提示,让含义不只依赖动画来传达。A
元素像不稳的物体一样,带着倾斜左右摇晃。
适用场景
吸引用户注意图标或按钮
在[应用位置]添加“晃动”(Wobble)提示效果。
元素要带着倾斜左右摇晃,一开始幅度很大,每摆一次就变小,直到停稳。
触发时只播放一次,并避免相邻内容移位。A
元素以顶边为支点,像钟摆一样来回摆动,幅度逐渐减小。
适用场景
悬挂的招牌、通知图标
在[应用位置]添加“摇摆”(Swing)提示效果。
元素要像悬挂的招牌一样来回摆动,一开始摆幅很大,然后很快平息。
以顶边而不是中心为支点摆动,触发时只播放一次。A
Jello (果冻)
别称 Jelly
元素像晃动的果冻一样来回倾斜变形,幅度逐渐减小。
适用场景
俏皮地强调按钮或 Logo
在[应用位置]添加“果冻”(Jello)提示效果,也叫 jelly。
元素要像晃动的果冻一样来回倾斜变形:一开始幅度大,然后很快平息下来。
触发时只播放一次,并保持元素占据的空间不变,避免周围内容移位。Emphasis 中的其他动效
A
Heartbeat (心跳)
别称 Heart Beat
元素以双拍节奏缩放,就像跳动的心脏。
适用场景
点赞和收藏图标、直播状态指示
在[应用位置]添加“心跳”(Heartbeat)效果,也叫 heart beat。
元素要快速地连续膨胀、回缩两次,然后稍作停顿再开始下一次,就像跳动的心脏。
无缝循环播放并保留两次心跳之间的停顿;如果用户开启了“减少动态效果”(prefers-reduced-motion),就停止动画。A
Ping (雷达扩散)
别称 Radar Ping, Ripple Ping, Ping (Radar Pulse), Pulse ring, Notification ping, Pulsating Button
元素的副本反复放大并淡出,就像雷达波纹。
适用场景
通知小圆点、实时状态
在[应用位置]添加“雷达扩散”(Ping)效果,也叫雷达波(radar ping)或脉冲环(pulse ring)。
元素的一个副本要向外扩大并淡出,以稳定的节奏一遍遍重复,而元素本身保持不动。
把圆环画在单独的图层上,确保它永远不影响布局;如果用户开启了“减少动态效果”(prefers-reduced-motion),就停止循环。