mcpField
N
notifications-toasts

notifications-toasts

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

关于 notifications-toasts

这是一项设计技能，运用 Disney 的 12 项动画原则设计通知和 Toast 动效，说明进入、提醒、堆叠与退出状态，并提供降低干扰的时序建议。

主要功能

  1. 01将 12 项原则用于 Toast 动效
  2. 02定义进入、显示、堆叠和退出状态
  3. 03提供 Toast 动画时序建议
  4. 04协调图标、进度条与 Toast 动画
  5. 05按通知紧急程度调整动画强调

适用场景

  1. 01设计成功与错误 Toast 动画
  2. 02设定堆叠通知的动效
  3. 03协调自动消失进度与 Toast 入场

安装

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

$npx skills add https://github.com/dylantarre/animation-principles --skill notifications-toasts

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

详细介绍

通知与 Toast 动画原则

将迪士尼的 12 条原则应用于通知，让提醒醒目又不打扰用户。

应用于通知的原则

1. 挤压与拉伸

Toast 可以在进入时受到冲击而稍微压缩，然后再拉伸恢复。这样会营造出从屏幕外抵达时的“着陆”感。

2. 预备动作

自动关闭前，Toast 可以稍微收缩（缩放至 95%），持续 100ms。向用户提示 Toast 即将消失。

3. 舞台布局

通知应出现在固定的位置。使用颜色和图标来体现重要性：信息、成功、警告、错误。

4. 连续动作与关键姿势

定义不同状态：进入、显示、退出、堆叠。为进入、提醒（如有需要）和退出设置清晰的关键帧。

5. 跟随动作与重叠动作

容器到位后，图标再执行动画（勾号绘制、铃铛摇摆）。自动关闭的进度条应跟随 Toast 的进入动画。

6. 缓入与缓出

进入：ease-out（快速进入，缓慢停稳）。退出：ease-in（缓慢启动，快速离开）。弹跳效果可使用 cubic-bezier(0.68, -0.55, 0.27, 1.55)。

7. 弧线运动

从角落滑入的 Toast 可以沿轻微弧线移动。铃铛图标应沿弧线摆动，而非僵硬地旋转。

8. 次要动作

Toast 滑入时（主要动作），阴影出现（次要动作），图标执行动画（第三动作），进度条开始移动（第四动作）。

9. 时间控制
  • Toast 进入：200-300ms
  • Toast 退出：150-250ms
  • 自动关闭延迟：3000-5000ms
  • 提醒脉冲：1000ms 循环
  • 成功勾号绘制：300ms
  • 堆叠顺序调整：200ms
10. 夸张

错误通知可以抖动或闪烁红色。关键提醒可以采用更大的尺寸和更醒目的动画。动画应与重要程度相匹配。

11. 扎实绘制

保持 Toast 尺寸一致。图标应清晰锐利。进度条应平滑移动（使用变换，而非宽度）。

12. 魅力

流畅的通知让界面显得精致。突兀的弹窗会惹恼用户。动画设计得当的 Toast 能体现专业性。

CSS 实现

.toast {
  animation: toastEnter 300ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.toast.exiting {
  animation: toastExit 200ms ease-in forwards;
}

@keyframes toastEnter {
  from {
    opacity: 0;
    transform: translateY(-100%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toastExit {
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

.toast-progress {
  transform-origin: left;
  animation: progress 4000ms linear forwards;
}

关键属性

  • transform：位移、缩放
  • opacity：淡入淡出
  • animation：进入/退出序列
  • transform-origin：进度条变换原点
  • box-shadow：深度

评论

支持 Markdown