微交互动画设计指南：迪士尼12条动画原理在UI反馈中的应用与实践

micro-interactions by dylantarre/animation-principles

244 周安装量

22 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/dylantarre/animation-principles --skill micro-interactions

开发设计用户体验

🇨🇳中文介绍

微交互动画

将迪士尼的 12 条动画原理应用于小型 UI 反馈时刻和界面细节。

快速参考

原理	微交互实现
挤压与拉伸	按钮按压压缩，开关弹跳
预备动作	悬停状态提示，点击前反馈
演出布局	将注意力集中在活动元素上
连续动作与姿态对应	进度变化与状态变化
跟随与重叠动作	涟漪效果，稳定运动
慢入慢出	快速但平滑的过渡
弧形运动	切换开关，圆形菜单
次要动作	图标响应父级状态变化
时间节奏	大多数交互控制在 100-300 毫秒
夸张手法	清晰但不分散注意力
扎实的描绘	一致的变换行为
吸引力	令人愉悦、有目的的反馈

原理应用

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

相关 Skills

find-skills 技能搜索工具 - Vercel Labs 开源智能体技能包管理器

827,200 周安装

Vercel React 最佳实践指南 | 58条Next.js性能优化规则与代码重构

273,700 周安装

Vercel Web界面规范检查工具 - 自动检测代码是否符合Web设计指南

221,200 周安装

agent-browser 浏览器自动化工具 - Vercel Labs 命令行网页操作与测试

150,000 周安装

挤压与拉伸：按钮在按压时轻微压缩（scaleY: 0.95）。开关滑块在碰到边界时挤压。通知徽章在更新时弹跳。保持微妙——这是 UI，不是卡通。

预备动作：悬停状态为点击做准备。按钮在按压动画前轻微抬起/放大。可拖拽元素在抓取开始时抬起。加载指示器在旋转前蓄力。

演出布局：活动的表单字段清晰可辨。错误状态需要引起注意。成功确认明确无误。一次只展示一个交互反馈。

连续动作与姿态对应：进度指示器持续动画（连续动作）。复选框在状态间快速切换（姿态对应）。结合使用：加载指示器以状态变化的快速切换结束。

跟随与重叠动作：涟漪效果从点击点向外扩散。切换开关会过冲然后稳定。对勾标记在方框填充后略有延迟地绘制。菜单项错开进入。

慢入慢出：使用快速的缓出效果以获得响应感。100 毫秒配合缓出感觉瞬间完成。避免线性——看起来像是故障。快速进入，平缓稳定。

弧形运动：切换开关沿轻微弧线移动。圆形操作按钮径向扩展。下拉箭头平滑旋转。菜单项可以遵循曲线路径。

次要动作：图标颜色随按钮状态变化而变化。徽章计数随父级通知更新。帮助文本在输入框获得焦点时出现。阴影响应高度变化。

时间节奏：即时反馈：50-100 毫秒。标准过渡：100-200 毫秒。复杂的微交互：200-300 毫秒。对于小型 UI 来说，任何更长的时长都会感觉迟钝。

夸张手法：足够引人注意，但不足以分散注意力。错误抖动：3-5 像素，而非 20 像素。成功缩放：1.05-1.1 倍，而非 1.5 倍。微妙但明确无误。

扎实的描绘：变换原点很重要——按钮从中心缩放，工具提示从指针处缩放。相似元素的行为保持一致。在动画过程中保持视觉完整性。

吸引力：微交互在不压倒用户的情况下增添个性。用户应感受到界面是响应迅速且富有生机的。小小的愉悦感汇聚成整体的体验质量。

.button {
    transition: transform 100ms ease-out,
                box-shadow 100ms ease-out;
}
.button:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.button:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.toggle-thumb {
    transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.toggle-thumb.active {
    transform: translateX(20px);
}

.checkmark {
    stroke-dasharray: 20;
    stroke-dashoffset: 20;
    transition: stroke-dashoffset 200ms ease-out 50ms;
}
.checkbox:checked + .checkmark {
    stroke-dashoffset: 0;
}

交互	时长	缓动效果
悬停	100ms	ease-out
点击/轻触	100ms	ease-out
切换	150-200ms	spring/elastic
复选框	150ms	ease-out
焦点环	100ms	ease-out
工具提示显示	150ms	ease-out
工具提示隐藏	100ms	ease-in
徽章更新	200ms	elastic
表单错误	200ms	ease-out

每个交互元素都需要反馈
禁用状态：无动画，降低不透明度
将相关反馈组合在一起
不要为每次变化都添加动画——过滤不必要的更新
测试无动画情况——功能不应依赖于动画
尊重 prefers-reduced-motion 设置

2026 年 1 月 24 日

🇺🇸English

Micro-interaction Animation

Apply Disney's 12 animation principles to small UI feedback moments and interface details.

Quick Reference

Principle	Micro-interaction Implementation
Squash & Stretch	Button press compression, toggle bounce
Anticipation	Hover state hints, pre-click feedback
Staging	Focus attention on active element
Straight Ahead / Pose to Pose	Progress vs state changes
Follow Through / Overlapping	Ripple effects, settling motion
Slow In / Slow Out	Snappy but smooth transitions
Arc	Toggle switches, circular menus
Secondary Action	Icons respond to parent state
Timing	100-300ms for most interactions
Exaggeration	Clear but not distracting
Solid Drawing	Consistent transform behavior
Appeal	Delightful, purposeful feedback

Principle Applications

Squash & Stretch: Buttons compress slightly on press (scaleY: 0.95). Toggle thumbs squash when hitting bounds. Notification badges bounce on update. Keep subtle—this is UI, not cartoon.

Anticipation : Hover states prepare for click. Buttons lift/grow slightly before press animation. Draggable items elevate on grab start. Loading spinners wind up before spinning.

Staging : Active form field clearly distinguished. Error states demand attention. Success confirmations are unmistakable. One interaction feedback at a time.

Straight Ahead vs Pose to Pose : Progress indicators animate continuously (straight ahead). Checkboxes snap between states (pose to pose). Combine: loading indicator ends with state-change snap.

Follow Through & Overlapping: Ripple effects expand past tap point. Toggle switches overshoot then settle. Checkmarks draw with slight delay after box fills. Menu items stagger in.

Slow In / Slow Out : Quick ease-out for responsive feel. 100ms with ease-out feels instant. Avoid linear—looks broken. Snappy entrance, gentle settling.

Arc : Toggle switches travel in slight arc. Circular action buttons expand radially. Dropdown carets rotate smoothly. Menu items can follow curved path.

Secondary Action : Icon changes color as button state changes. Badge count updates with parent notification. Helper text appears as input focuses. Shadow responds to elevation.

Timing : Immediate feedback: 50-100ms. Standard transitions: 100-200ms. Complex micro-interactions: 200-300ms. Anything longer feels sluggish for small UI.

Exaggeration : Enough to notice, not enough to distract. Error shakes: 3-5px, not 20px. Success scales: 1.05-1.1, not 1.5. Subtle but unmistakable.

Solid Drawing : Transform origin matters—buttons scale from center, tooltips from pointer. Consistent behavior across similar elements. Maintain visual integrity during animation.

Appeal : Micro-interactions add personality without overwhelming. Users should feel the interface is responsive and alive. Small delights build into overall experience quality.

Component Patterns

Button States

.button {
    transition: transform 100ms ease-out,
                box-shadow 100ms ease-out;
}
.button:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.button:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

Toggle Switch

.toggle-thumb {
    transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.toggle-thumb.active {
    transform: translateX(20px);
}

Checkbox

.checkmark {
    stroke-dasharray: 20;
    stroke-dashoffset: 20;
    transition: stroke-dashoffset 200ms ease-out 50ms;
}
.checkbox:checked + .checkmark {
    stroke-dashoffset: 0;
}

Timing Reference

Interaction	Duration	Easing
Hover	100ms	ease-out
Click/tap	100ms	ease-out
Toggle	150-200ms	spring/elastic
Checkbox	150ms	ease-out
Focus ring	100ms	ease-out
Tooltip show	150ms	ease-out
Tooltip hide	100ms	ease-in
Badge update	200ms	elastic
Form error	200ms	ease-out

Best Practices

Every interactive element needs feedback
Disabled states: no animation, reduced opacity
Group related feedback together
Don't animate on every change—filter unnecessary updates
Test without animation—functionality shouldn't depend on it
Respect prefers-reduced-motion

Weekly Installs

216

Repository

dylantarre/anim…inciples

GitHub Stars

First Seen

Jan 24, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

codex195

opencode194

gemini-cli191

cursor180

github-copilot179

kimi-cli162

React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性

111,800 周安装