mcpField
W
web-motion-design

web-motion-design

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

关于 web-motion-design

面向前端设计与开发的动画设计技能，将 Disney 的 12 条动画原则转化为 CSS、JavaScript 和前端框架中的实现建议。涵盖交互动画、时序与性能规则。

主要功能

  1. 01将动画原则用于 Web 动效
  2. 02提供 CSS 与 JavaScript 实现模式
  3. 03给出交互动画时序建议
  4. 04列出动效性能规则

适用场景

  1. 01设计按钮按压与悬停动画
  2. 02制作下拉菜单展开效果
  3. 03优化界面动效的性能

安装

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

$npx skills add https://github.com/dylantarre/animation-principles --skill web-motion-design

安装后在 Claude Code 中输入/web-motion-design确认已加载。

详细介绍

Web Motion Design

将迪士尼的 12 条动画原则应用于 CSS、JavaScript 和前端框架。

快速参考

原则Web 实现方式
挤压与拉伸在交互状态下使用 transform: scale()
预备动作动作开始前稍微反向移动
演出布局通过动作层级聚焦用户注意力
连续动作 / 关键帧动作JS 逐帧动画 vs CSS 关键帧
跟随动作 / 重叠动作子元素错开动画、弹性缓动
慢入 / 慢出ease-in-out、cubic-bezier 曲线
弧线运动使用 motion-path 或贝塞尔曲线平移变换
次要动作阴影、光晕随主要动作变化
时间控制时长：微交互 100-200ms，标准 200-400ms
夸张缩放超过 1.0、过冲动画
扎实绘图保持 transform-origin 一致、使用 3D 透视
吸引力流畅的 60fps、有目的的动作设计

原则应用

挤压与拉伸：按下按钮时使用 scaleY 压缩，悬停时使用 scaleX 拉伸。保持体积不变——如果沿 Y 轴压缩，就稍微扩展 X 轴。

预备动作：展开下拉菜单前，先将其缩小 2-3%。将内容向左滑动前，先向右移动 5px。

演出布局：模态窗口聚焦时调暗背景元素。使用动作引导视线流动——先为重要元素添加动画。

连续动作 vs 关键帧动作：使用 CSS @keyframes 实现可预测、可重复的动画（关键帧动作）。使用 JavaScript/GSAP 实现动态、基于物理的运动（连续动作）。

跟随动作与重叠动作：父元素停止后，子元素应继续完成移动。使用递减的 animation-delay 值，形成自然的错开效果。

慢入 / 慢出：UI 动效切勿使用 linear。标准缓动：cubic-bezier(0.4, 0, 0.2, 1)。进入：cubic-bezier(0, 0, 0.2, 1)。退出：cubic-bezier(0.4, 0, 1, 1)。

弧线运动：自然界中的元素沿弧线而非直线移动。使用 offset-path，或组合使用带有不同缓动效果的 X/Y 轴变换。

次要动作：悬停时按钮阴影扩大并变模糊。按钮缩放时，按钮内的图标旋转。背景粒子随主要元素变化。

时间控制：微交互：100-200ms。标准过渡：200-400ms。复杂序列：400-700ms。页面过渡：300-500ms。

夸张：悬停状态缩放至 1.05-1.1，而非 1.01。错误提示抖动移动 10-20px，而非 2px。让动作足够明显，但不要令人不适。

扎实绘图：保持 transform-origin 一致。使用 perspective 营造 3D 深度。避免相互冲突的变换，以免出现视觉故障。

吸引力：以 60fps 为目标——尽可能仅使用 transform 和 opacity。通过自定义缓动曲线增添微妙的个性。动作应让人感觉自然且有意为之。

代码模式

/* Elastic button with squash/stretch */
.button:active {
  transform: scale(0.95, 1.05);
  transition: transform 100ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Anticipation before expansion */
.dropdown-enter {
  animation: dropdown-open 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes dropdown-open {
  0% { transform: scaleY(0.98); opacity: 0; }
  100% { transform: scaleY(1); opacity: 1; }
}

性能规则

  1. 仅为 transform 和 opacity 添加动画，以启用 GPU 加速
  2. 谨慎使用 will-change，并在动画结束后移除
  3. 动画可预测时，优先使用 CSS 而非 JavaScript
  4. 在低性能设备上进行测试

评论

支持 Markdown