mcpField
U
universal-elements

universal-elements

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

关于 universal-elements

面向 UI 设计师与开发者的通用元素动画指南，说明如何将迪士尼 12 项原则用于界面动效。它提供时长建议、关键属性和 CSS 基础设置。

主要功能

  1. 01将 12 项动画原则用于界面
  2. 02按元素类型提供时长范围
  3. 03涵盖常见 CSS 动画属性
  4. 04提供 CSS 基础配置

适用场景

  1. 01规划按钮和图标的交互反馈
  2. 02设计卡片与输入框的状态变化
  3. 03为页面和覆盖层安排转场
  4. 04统一界面动效的层级与节奏

安装

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

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

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

详细介绍

通用元素动画原则

将 Disney 的 12 条原则应用于任何 UI 元素，打造一致、专业的动效设计。

原则的通用应用

1. 挤压与拉伸

任何响应交互的元素都可以挤压（受击或按压时收缩）和拉伸（释放时延展）。幅度应保持细微：UI 中最大为 2-5%。

2. 预备动作

任何重要动作发生前，都应以短暂的预备动作提示接下来的变化。放大前先缩小，前推前先回拉。持续时间为 50-100ms。

3. 演出布局

将注意力引导到最重要的元素。通过动作、尺寸、颜色、z-index 和模糊效果的对比，建立清晰的视觉层级。

4. 逐帧动画与关键姿势动画

大多数 UI 适合使用关键姿势动画：清晰定义起始和结束状态。粒子或有机形状等自然流畅的动画则适合使用逐帧动画。

5. 跟随动作与重叠动作

所有元素不会同时停止。子元素会稍晚于父元素停止。阴影会在物体停止后才稳定下来。相关元素之间的动画错开 20-50ms。

6. 缓入与缓出

黄金法则：UI 动效绝不使用 linear。进入时使用 ease-out，退出时使用 ease-in，过渡时使用 ease-in-out。

7. 弧线运动

自然运动遵循曲线路径。水平过渡时加入细微的垂直移动。平移时同时旋转。避免机械的直线运动。

8. 次要动作

每个主要动作都值得搭配辅助动画。阴影变化、颜色变化、图标旋转和发光效果可以强化动作，但不会喧宾夺主。

9. 时长
元素类型快速正常缓慢
微小元素（图标、按钮）50-100ms100-200ms200-300ms
小型元素（卡片、输入框）150-200ms200-300ms300-400ms
中型元素（模态框、菜单）200-250ms250-350ms350-500ms
大型元素（页面、叠加层）300-400ms400-600ms600-800ms
10. 夸张

让动画强度与具体情境相匹配。庆祝时刻可以夸张 20-30%。专业场景中应控制在 10% 以内。错误状态可以表现得更强烈。

11. 扎实绘制

保持视觉一致性：圆角比例、阴影方向、间距节奏和字体大小比例。动画过程中不应出现变形或错乱。

12. 吸引力

目标是带来愉悦感，而不造成干扰。流畅的动画能够建立信任。干脆的反馈让交互更灵敏。最好的动画能让人感受到，却不会引人注意。

CSS 基础

/* Universal transition base */
* {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Standard durations as custom properties */
:root {
  --duration-fast: 100ms;
  --duration-normal: 200ms;
  --duration-slow: 350ms;
  --ease-out: cubic-bezier(0.0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* Apply to any interactive element */
.interactive {
  transition: transform var(--duration-normal) var(--ease-standard),
              opacity var(--duration-normal) var(--ease-standard),
              box-shadow var(--duration-normal) var(--ease-standard);
}

关键属性（适用于任何元素）

  • transform：通用定位和缩放
  • opacity：可见性过渡
  • transition：状态变化
  • animation：复杂动画序列
  • box-shadow：深度和强调

评论

支持 Markdown