mcpField
M
modals-dialogs

modals-dialogs

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

关于 modals-dialogs

面向界面设计的模态框与对话框动画技能，将 Disney 的 12 条动画原则应用于弹出层。内容涵盖状态转换、时长、缓动和分层动作，并介绍 CSS 属性与实现示例。

主要功能

  1. 01将 12 条原则用于对话框
  2. 02定义模态框动画状态
  3. 03协调背景与内容的动作
  4. 04提供时长和缓动建议
  5. 05使用 CSS 变换与透明度

适用场景

  1. 01设计模态框进入与退出效果
  2. 02错开对话框内容的出现
  3. 03制作提示与错误反馈动画

安装

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

$npx skills add https://github.com/dylantarre/animation-principles --skill modals-dialogs

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

详细介绍

模态框与对话框动画原则

将迪士尼的 12 条原则应用于模态框，实现流畅、不突兀的过渡。

应用于模态框的原则

1. 挤压与拉伸

模态框进入时可从 0.9 缩放至 1.0，营造轻微扩张的感觉。退出时反向播放。效果应保持克制，以维持专业感。

2. 预备动作

触发元素（按钮）应在模态框出现前做出反应。先让触发元素短暂缩小，然后模态框从该位置出现。

3. 舞台呈现

将背景遮罩调暗（不透明度为 0.5-0.7），使注意力集中在模态框上。背景内容可轻微模糊（4-8px）。模态框是视觉焦点。

4. 连续动作与关键姿势

定义状态：隐藏、进入、可见、退出。为每个状态设置明确的关键帧。关键姿势动画能确保动画可预测、可控。

5. 跟随动作与重叠动作

模态框容器先出现，内容在 50-100ms 后淡入。关闭按钮结束时可轻微弹跳。表单字段依次错开出现。

6. 缓入与缓出

进入：使用 ease-out（逐渐减速）。退出：使用 ease-in（逐渐加速）。使用 cubic-bezier(0.16, 1, 0.3, 1) 实现流畅且带有弹性的进入效果。

7. 弧线运动

如果模态框从按钮处出现，应沿弧线移动至中心，而不是沿直线移动。这样能形成更自然的运动路径。

8. 次要动作

模态框缩放进入时（主要动作），背景遮罩淡入（次要动作），内容依次出现（第三层动作）。每种动作都应相互配合，而非彼此争抢注意力。

9. 时长
  • 背景遮罩淡入：200-250ms
  • 模态框进入：250-350ms
  • 模态框退出：200ms（更快退出）
  • 内容错开出现：每项 30-50ms
  • 错误时抖动：300ms
10. 夸张

重要提醒可使用戏剧化的入场效果。先轻微超调至 1.02，再稳定在 1.0。错误模态框可短暂抖动。

11. 扎实绘制

模态框阴影应与界面的光源方向一致。保持圆角半径一致。动画过程中内容绝不能溢出。

12. 吸引力

流畅的入场效果显得精致。以触发点为起点的动画让元素之间更有连贯感。突兀的模态框会令人不适。应重视模态框的过渡效果。

CSS 实现

.modal-backdrop {
  transition: opacity 250ms ease-out;
}

.modal {
  animation: modalEnter 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalEnter {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

关键属性

  • transform：缩放、平移（原点）
  • opacity：淡入/淡出
  • backdrop-filter：模糊背景
  • animation：关键帧序列
  • transform-origin：起始点

评论

支持 Markdown