关于 fitness-wellness
一项将 Disney 的 12 条动画原则用于健身与健康界面的设计技能，面向设计师提供动画应用示例和时长参考，并强调根据活动强度调整动效。
主要功能
- 01将 12 条动画原则用于健身界面
- 02涵盖训练、进度与目标示例
- 03区分活力与舒缓动效
- 04提供动画时长与缓动参考
适用场景
- 01设计训练开始与完成动画
- 02展示锻炼进度和个人纪录
- 03制作冥想时的舒缓过渡
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/fitness-wellness确认已加载。
详细介绍
健身与健康动画原则
运用迪士尼 12 项原则，打造激励人心、充满活力的体验，庆祝成就并帮助养成健康习惯。
12 项原则的应用
1. 挤压与拉伸
- 锻炼按钮：点击时充满活力地挤压
- 进度环：随成就脉动
- 活动图标：完成时弹跳
2. 预备动作
- 开始锻炼：倒计时逐渐营造气氛
- 计时器启动：准备、就绪、开始的序列
- 完成目标：以充满悬念的方式逐步接近
3. 演出布局
- 当前运动：将注意力完全集中在正在进行的动作上
- 统计数据展示：锻炼期间起辅助作用
- 休息时段：突出显示恢复指标
4. 连贯动作与关键姿势
- 实时锻炼：计时器持续流动（连贯动作）
- 运动序列：逐个动作推进（关键姿势）
- 冥想引导：划分明确的呼吸阶段
5. 跟随动作与重叠动作
- 锻炼完成：徽章落下后，再显示统计数据
- 卡路里计数器：数字经过后续动作逐渐稳定
- 活动环：依次播放动画，并在时间上重叠
6. 慢入与慢出
- 高能时刻：节奏快速、有力
- 恢复／冥想：缓慢、平和的缓动
- 过渡：匹配当前活动的强度
7. 弧线运动
- 进度圆环：沿平滑弧线完成
- 跑步路线：以曲线路径呈现
- 手势控制：自然的弧线动作
8. 次要动作
- 达成目标：成就保存的同时绽放烟花
- 个人纪录：皇冠伴随庆祝动画出现
- 保持连续记录：火焰燃烧的同时更新计数器
9. 时间控制
- 高强度时刻：快速播放，100-150ms，营造活力
- 正念时刻：缓慢播放，500-700ms，营造平静
- 标准 UI：中等速度，200-300ms
10. 夸张
- 盛大庆祝：健身离不开激励
- 个人纪录：戏剧化地展示成就
- 连续记录里程碑：令人难忘的庆祝
11. 扎实绘制
- 身体力学：准确演示动作
- 数据可视化：指标清晰易读
- 运动插图：正确呈现动作姿势
12. 吸引力
- 激励人心的活力：振奋人心、鼓励向上的动作
- 双重模式：锻炼时充满强度，健康活动时保持平静
- 聚焦成就：让每一次胜利都意义非凡
行业时间标准
| 动作 | 时长 | 缓动 |
|---|---|---|
| 按钮按下 | 150ms | ease-out |
| 环完成 | 600ms | spring |
| 锻炼过渡 | 250ms | ease-in-out |
| 冥想淡出 | 500ms | ease-in-out |
| 成就弹出 | 800ms | custom-bounce |
核心原则
让动画活力与活动强度相匹配。锻炼需要充满活力、激励人心的动作，而冥想则需要平静且与呼吸同步的动画。始终庆祝每一点进步。
评论
支持 Markdown