mcpField
U
universal-patterns

universal-patterns

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

关于 universal-patterns

基于 Disney 的 12 条原则提供动画基础模式的设计技能，涵盖 UI 动效的时间与缓动指导、可复用 CSS 示例和无障碍默认设置。

主要功能

  1. 01常见动画类型的时间刻度
  2. 02CSS 缓动建议
  3. 0312 条原则速查
  4. 04可复用动画类示例
  5. 05减少动态效果的无障碍默认设置
  6. 06响应式 UI 动画规则

适用场景

  1. 01为新界面设定动画默认值
  2. 02选择进入和状态变化的缓动方式
  3. 03添加减少动态效果的替代方案
  4. 04检查动画时长和属性

安装

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

$npx skills add https://github.com/dylantarre/animation-principles --skill universal-patterns

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

详细介绍

通用动画模式

将迪士尼的 12 条原则作为所有动画的基础默认准则。

核心时长尺度

类别时长适用场景
即时100-150ms悬停、切换、微状态
快速150-250ms反馈、小型过渡
标准250-400ms模态框、显现、状态变化
缓慢400-600ms页面过渡、连续动作
有意600-1000ms戏剧性显现、庆祝效果

通用缓动库

:root {
  /* Standard easings */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);        /* Entrances */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);         /* Exits */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);   /* State changes */

  /* Spring easings */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* Overshoot */
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Playful */
}

12 条原则速查

  1. 挤压与拉伸：缩放范围为 0.95-1.05，营造自然感
  2. 预备动作：动作开始前反向移动 2-3px，或暂停 50ms
  3. 演出布局：将动画引向用户注意力所在，保持清晰的视觉层级
  4. 连续动作与姿势到姿势：定义关键帧，规划状态
  5. 跟随与重叠动作：超调 2-5%，再回到稳定状态
  6. 缓入与缓出：始终使用缓动，不要使用线性动画（转圈动画除外）
  7. 弧线：结合 X、Y 方向的移动，采用自然路径
  8. 次要动作：最多叠加 2-3 种属性（透明度 + 变换 + 阴影）
  9. 时机：根据移动距离和重要性匹配时长
  10. 夸张：用于 UI 时应保持微妙（偏差低于 10%）
  11. 扎实绘图：运动过程中保持视觉一致性
  12. 吸引力：动画应让人感到有帮助，而非刻意炫技

基础动画类

/* Standard entrance */
.animate-in {
  animation: fade-in 250ms var(--ease-out) forwards;
}

/* Standard exit */
.animate-out {
  animation: fade-out 200ms var(--ease-in) forwards;
}

/* State transition */
.animate-state {
  transition: all 200ms var(--ease-in-out);
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-10px); }
}

通用规则

  1. 100ms 响应时间：用户操作必须在 100ms 内触发可见变化
  2. UI 动画不超过 400ms：功能性动画时长不应超过 400ms
  3. 减少动态效果：始终提供 prefers-reduced-motion 替代方案
  4. GPU 属性：仅使用 transform 和 opacity，以实现流畅的 60fps
  5. 退出时间 < 进入时间：退出动画比进入动画快 20-30%

无障碍默认设置

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

决策树

  1. 元素是否正在进入？→ 使用 ease-out，时长 200-300ms
  2. 元素是否正在退出？→ 使用 ease-in，时长 150-250ms
  3. 元素是否正在改变状态？→ 使用 ease-in-out，时长 150-250ms
  4. 是否为连续动画？→ 使用 linear（旋转）或 ease-in-out（脉冲）
  5. 是否在响应手势？→ 使用带超调的 ease-out，时长低于 200ms

不确定时，请从以下设置开始：250ms cubic-bezier(0.4, 0, 0.2, 1)

评论

支持 Markdown