mcpField
A
attention-grabbers

attention-grabbers

github.com/dylantarre设计与 UI132523 次安装43 周前更新
代码仓库

关于 attention-grabbers

一项运用 Disney 的 12 条原则设计界面吸睛动画的设计技能，涵盖徽标、通知、错误和提醒的时长建议与无障碍规则。

主要功能

  1. 01用 12 条动画原则设计注意提示
  2. 02提供时长与循环次数建议
  3. 03规定动画限制与关闭方式
  4. 04包含减少动态效果及无障碍指导

适用场景

  1. 01设计徽标和通知动画
  2. 02突出错误或紧急提醒
  3. 03为界面提示设定动态限制

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/dylantarre/animation-principles --skill attention-grabbers

安装后在 Claude Code 中输入/attention-grabbers确认已加载。

详细介绍

吸引注意力的动画

运用迪士尼的 12 条原则，让动态效果吸引注意力。

原则应用

挤压与拉伸：通过缩放脉冲吸引注意力。按 1.0 → 1.1 → 1.0 的周期变化，能抓住用户的余光。

预备动作：在注意力动画开始前短暂停顿。先蓄势，再释放。

舞台布局：将吸引注意力的元素放在用户能看到的位置，例如角标和行内高亮。

连续动作与关键帧动作：设计好注意力状态：静止、激活／脉冲、已确认。

跟随与重叠动作：先让角标脉冲，再更新计数。错开注意力信号的时序。

慢入与慢出：脉冲开始和结束时使用缓动。平滑振荡比急促弹跳更不突兀。

弧线运动：抖动动画遵循弧线轨迹。左右移动时略微上下振荡。

次要动作：结合脉冲、发光和颜色变化，最大限度地吸引注意力（谨慎使用）。

时长：

  • 单次吸引注意力：300-500ms
  • 重复脉冲：每周期 2000-3000ms
  • 紧急脉冲：每周期 1000-1500ms
  • 衰减：3-5 个周期或 10 秒后停止

夸张：夸张在这里能大显身手。缩放至 1.2，使用鲜艳色彩和醒目的动态效果。

扎实绘制：吸引注意力的元素仍须融入 UI，不应显得漂浮或脱离界面。

吸引力：注意力提示应像贴心的通知，而不是咄咄逼人的要求。

时长建议

注意力类型时长周期数衰减
角标脉冲300ms2-3动画结束后停止
通知圆点2000ms3总计 6 秒
新功能500ms2保持轻微
错误抖动400ms1无
紧急提醒1000ms无限直到关闭
推广内容3000ms26 秒

实现模式

/* Pulse attention */
.badge-pulse {
  animation: pulse 2000ms ease-in-out 3;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* Subtle glow */
.glow-attention {
  animation: glow 2000ms ease-in-out 3;
}

@keyframes glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
  50% { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.3); }
}

/* Error shake */
.shake {
  animation: shake 400ms ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

/* Ring animation (notification) */
.ring {
  animation: ring 2500ms ease-in-out 2;
}

@keyframes ring {
  0%, 100% { transform: rotate(0); }
  10%, 30% { transform: rotate(10deg); }
  20%, 40% { transform: rotate(-10deg); }
  50%, 100% { transform: rotate(0); }
}

注意力预算

// Auto-stop attention after timeout
const attention = element.animate([
  { transform: 'scale(1)' },
  { transform: 'scale(1.15)' },
  { transform: 'scale(1)' }
], {
  duration: 2000,
  iterations: 3
});

// Or with CSS
setTimeout(() => {
  element.classList.remove('attention');
}, 6000);

关键规则

  1. 同一时间最多显示 1 个吸引注意力的动画
  2. 运行 3-5 个周期后自动停止（最长 10 秒）
  3. 提供永久关闭的方式
  4. 切勿用于非必要内容
  5. prefers-reduced-motion：仅显示静态指示，不播放动画
  6. 紧急动画必须提供音频／触觉替代方式，以满足无障碍需求

评论

支持 Markdown