关于 joy-delight
一项用于设计活泼动效的设计技能，让积极时刻更生动且令人难忘。它为庆祝、奖励及其他正向界面反馈提供运动原则、缓动和时长建议。
主要功能
- 01活泼动效设计原则
- 02弹跳与缓动指导
- 03按效果分类的时长建议
- 04正向反馈的适用场景
适用场景
- 01为成功确认添加动画
- 02展示成就解锁与奖励
- 03制作入门引导庆祝动效
- 04设计活泼的欢迎动画
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/joy-delight确认已加载。
详细介绍
喜悦与愉悦动画
创建能激发快乐、带来惊喜并令人难忘的愉悦感的动画。
情感目标
喜悦源于意想不到的惊喜、俏皮的动作，以及超出预期的时刻。让动画显得生动、灵敏且真正有趣，便能带来愉悦感。
迪士尼动画原则与喜悦
挤压与拉伸
夸张表现弹跳、有弹性的动作。物体受冲击时挤压 30-40%，会显得生动俏皮。适用于成功状态、奖励和庆祝场景。
预备动作
在揭晓前营造期待感。弹出前稍微回缩一下（100-150ms），能带来令人满足的效果。非常适合通知和成就提示。
演出布局
将注意力引向令人愉悦的时刻。清晰的视觉层次能确保观众充分关注令人欣喜的元素。庆祝动画播放时调暗周围环境。
连贯动作
为彩纸、粒子和庆祝效果创造自发、自然的动作。随机路径显得自然又令人兴奋。
跟随动作与重叠动作
让元素运动过头后，再以弹跳的次级动作稳定下来。主要动作结束后，头发、丝带和装饰元素应继续移动。
慢入与慢出
使用不对称缓动——快速启动，缓慢而令人满足地落定。cubic-bezier(0.34, 1.56, 0.64, 1) 能营造俏皮的过冲效果。
弧线运动
弹跳、弯曲的轨迹比直线路径更显愉悦。庆祝时，元素应沿抛物线轨迹运动。
次要动作
在主要动画中加入闪光、粒子或摇晃效果。让表示“喜欢”的心形向外散发小心形，可以增强喜悦感。
时机
快速、利落的时长（150-250ms）显得充满活力。快速迸发并穿插微停顿，可以形成节奏感。成功动画：200-400ms。
夸张
将比例和动作幅度扩大到超出现实 20-30%。夸张的弹跳、拉伸的笑容和放大的反应。
扎实绘制
在拉伸动作中保持体积感。元素挤压时应横向扩展，以保持质量——这样才显得有真实的物理感。
吸引力
采用圆润的形状、明亮的色彩和平滑的曲线。时机和位置上的不对称能增添个性与魅力。
时长建议
| 元素 | 时长 | 缓动 |
|---|---|---|
| 弹出 | 200-300ms | ease-out-back |
| 弹跳 | 300-500ms | spring(1, 80, 10) |
| 彩纸 | 800-1200ms | ease-out |
| 庆祝 | 400-600ms | ease-out-elastic |
CSS 缓动
--joy-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--joy-pop: cubic-bezier(0.175, 0.885, 0.32, 1.275);
--joy-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
适用场景
- 成功确认和任务完成
- 成就解锁与奖励
- 引导流程中的庆祝效果
- 隐藏彩蛋和惊喜
- 正向反馈状态
- 欢迎动画