提示词
将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。
在[应用位置]添加“脉冲”(Pulse)效果,也叫 pulsing。
元素要以缓慢、稳定的节奏轻轻膨胀再回缩:含蓄,不要有弹跳感。
无缝循环播放,不要让周围布局移动;如果用户开启了“减少动态效果”(prefers-reduced-motion),就停止动画。相似的动效
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),就停止循环。Pulse Placeholder (脉冲占位)
别称 Skeleton pulse, placeholder-glow
灰色占位块柔和地明暗变化,提示内容正在加载。
适用场景
骨架屏
在[应用位置]添加“脉冲占位”(Pulse Placeholder),也叫 skeleton pulse。
与即将出现的内容形状一致的灰色占位块一起缓慢变亮再恢复,节奏柔和、平稳。
占位块要与真实布局一致,内容加载进来时不能跳动;如果用户开启了“减少动态效果”(prefers-reduced-motion),则保持静止。Flash (闪烁)
别称 Blink
元素通过快速切换不透明度来闪烁。
适用场景
提示有新内容
在[应用位置]添加“闪烁”(Flash)提示效果,也叫 blink。
元素快速淡出再淡入,闪烁两次,然后保持完全可见。
只播放一次,不要无休止地闪烁;快速闪烁可能让人不适,所以对开启了“减少动态效果”的用户则跳过。Emphasis 中的其他动效
A
Rubber Band (橡皮筋)
别称 Rubberband
元素横向拉伸、纵向压扁,经过几次弹性变化后恢复原状。
适用场景
按钮反馈、吸引注意
在[应用位置]添加“橡皮筋”(Rubber Band)提示效果,也叫 rubberband。
元素要先横向拉宽、纵向压扁,再经过几次越来越小的弹性回弹,最后停在正常大小。
触发时只播放一次,并确保拉伸过程中周围布局不会移位。Shake (抖动)
别称 Shake X, Shake Y, Shake Horizontal, Shake Vertical, shakeX, Error shake, Wiggle, Invalid input shake, Headshake
元素沿一个方向快速来回抖动。
适用场景
表单错误反馈
在[应用位置]添加“抖动”(Shake)效果,也叫 error shake 或 invalid input shake。
元素要快速左右抖动几次,然后正好停在起始位置:快速、干脆。
每次出错时播放一次,不要循环;同时显示可见的错误提示,让含义不只依赖动画来传达。Spin (无限旋转)
别称 Rotate Loop, Spinner
元素以恒定速度持续旋转。
适用场景
加载转圈指示器
在[应用位置]添加“无限旋转”(Spin)效果,也叫 spinner 或 rotate loop。
元素要以恒定、均匀的速度持续旋转,每圈之间不要有缓动。
让循环无缝衔接,给 spinner 加上无障碍的“加载中”标签;如果用户开启了“减少动态效果”(prefers-reduced-motion),就放慢或停止旋转。