重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
gesture-responses by dylantarre/animation-principles
npx skills add https://github.com/dylantarre/animation-principles --skill gesture-responses将迪士尼的 12 条动画原则应用于引导用户交互。
挤压与拉伸:元素在按下时压缩(缩放至 0.95-0.97),释放时弹回。
预备动作:按下动作本身就是预备动作。响应应该是即时的——没有延迟。
演出布局:响应源自交互点。涟漪从点击位置向外扩散。
逐帧动画与姿势对应:定义静止、按下和释放三种姿势。过渡动画在这些姿势之间流畅进行。
跟随与重叠动作:释放动画会超过静止位置。先缩放到 1.02,再恢复到 1.0。
慢入慢出:按下:瞬间完成。释放:使用带超调的缓出效果 cubic-bezier(0.34, 1.56, 0.64, 1)。
弧形运动:拖拽元素跟随手指移动,在曲线上略有延迟。吸附回位时沿弧线运动到目标位置。
次要动作:按下动作同时触发涟漪、缩放和阴影变化。
时间节奏:
夸张:按下时效果要微妙(0.97),释放时可以有趣味性(超调到 1.03)。
扎实的描绘:按下状态应感觉像是“被按进去了”——更小的缩放比例、减弱的阴影、变化的颜色。
吸引力:手势应该让人感觉有物理上的满足感。就像按下真实的按钮一样。
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 手势 |
|---|
| 按下时长 |
|---|
| 释放时长 |
|---|
| 缓动效果 |
|---|
| 点击 | 50ms | 200ms | ease-out + 超调 |
| 长按 | 50ms | 300ms | ease-out |
| 拖拽开始 | 100ms | - | ease-out |
| 拖拽释放 | - | 300ms | spring |
| 滑动 | - | 200-400ms | ease-out |
| 捏合 | 实时 | 300ms | spring |
/* Button press */
.button {
transition: transform 50ms ease-out;
}
.button:active {
transform: scale(0.97);
}
/* Release with overshoot */
.button:not(:active) {
transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Material ripple */
.ripple {
animation: ripple 600ms ease-out forwards;
}
@keyframes ripple {
from {
transform: scale(0);
opacity: 0.5;
}
to {
transform: scale(4);
opacity: 0;
}
}
// Smooth drag with slight lag
element.style.transform = `translate(${x}px, ${y}px)`;
element.style.transition = 'transform 50ms ease-out';
// Snap back with spring
element.style.transition = 'transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1)';
element.style.transform = 'translate(0, 0)';
手势响应必须在 100 毫秒以内,才能让人感觉与动作相连。任何比这更慢的响应都会破坏直接操作的错觉。请在真实的触摸设备上进行测试。
每周安装量
54
代码仓库
GitHub 星标数
20
首次出现
2026 年 1 月 24 日
安全审计
安装于
codex46
opencode44
gemini-cli43
cursor42
claude-code39
github-copilot37
Apply Disney's 12 principles to direct user interactions.
Squash & Stretch: Elements compress on press (scale 0.95-0.97), spring back on release.
Anticipation : The press IS the anticipation. Response should be immediate - no delay.
Staging : Response originates from interaction point. Ripples expand from tap location.
Straight Ahead vs Pose-to-Pose : Define rest, pressed, and released poses. Transitions flow between them.
Follow Through & Overlapping: Release animation overshoots rest position. Scale to 1.02, settle to 1.0.
Slow In/Slow Out : Press: instant. Release: ease-out with overshoot cubic-bezier(0.34, 1.56, 0.64, 1).
Arcs : Drag elements follow finger with slight lag on curves. Snapping follows arc to destination.
Secondary Action : Press triggers ripple + scale + shadow change simultaneously.
Timing :
Exaggeration : Subtle for press (0.97), playful for release (overshoot 1.03).
Solid Drawing : Pressed state should feel "pushed in" - smaller scale, reduced shadow, shifted color.
Appeal : Gestures should feel physically satisfying. Like pressing a real button.
| Gesture | Press Duration | Release Duration | Easing |
|---|---|---|---|
| Tap/Click | 50ms | 200ms | ease-out + overshoot |
| Long Press | 50ms | 300ms | ease-out |
| Drag Start | 100ms | - | ease-out |
| Drag Release | - | 300ms | spring |
| Swipe | - | 200-400ms | ease-out |
| Pinch | real-time | 300ms | spring |
/* Button press */
.button {
transition: transform 50ms ease-out;
}
.button:active {
transform: scale(0.97);
}
/* Release with overshoot */
.button:not(:active) {
transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Material ripple */
.ripple {
animation: ripple 600ms ease-out forwards;
}
@keyframes ripple {
from {
transform: scale(0);
opacity: 0.5;
}
to {
transform: scale(4);
opacity: 0;
}
}
// Smooth drag with slight lag
element.style.transform = `translate(${x}px, ${y}px)`;
element.style.transition = 'transform 50ms ease-out';
// Snap back with spring
element.style.transition = 'transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1)';
element.style.transform = 'translate(0, 0)';
Gesture responses must be under 100ms to feel connected to the action. Anything slower breaks the direct manipulation illusion. Test on actual touch devices.
Weekly Installs
54
Repository
GitHub Stars
20
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex46
opencode44
gemini-cli43
cursor42
claude-code39
github-copilot37
前端设计系统技能:生产级UI设计、设计令牌与可访问性指南
8,500 周安装
专业市场研究报告生成工具 - 50+页咨询级行业分析,含PESTLE、SWOT、波特五力等框架
171 周安装
表单验证最佳实践:React Hook Form、TypeScript与Vue VeeValidate完整指南
170 周安装
竞争分析师智能体:系统性竞争对手分析、市场定位评估与战略优势识别
170 周安装
ADHD/自闭症任务拆解指南:DECOMPOSE方法助你克服执行功能障碍,提升生产力
187 周安装
查询缓存策略指南:Redis、Memcached与数据库级缓存实现多级缓存优化
171 周安装
CI/CD 流水线实战指南:GitHub Actions、GitLab CI 设计优化与安全
172 周安装