用途
这套动画原则用于指导健身应用、健康平台、运动追踪器与冥想类产品的界面动效设计。其目标是把迪士尼十二项动画原则转化为能够激励用户、增强能量感、庆祝成就并支持健康习惯养成的动效语言。
主要能力
资料将十二项原则逐一对应到健身与健康场景:
- 挤压与拉伸:训练按钮点击时的能量挤压、进度环随成就脉冲、活动图标完成时的弹跳。
- 预期:训练开始前的倒计时积累能量、计时器启动的“准备—就绪—开始”序列、目标完成前的悬念铺垫。
- 舞台化:当前动作全屏聚焦、训练中数据展示处于辅助角色、休息时段突出恢复指标。
- 逐帧与姿势到姿势:直播训练采用连续计时流(逐帧),动作序列采用逐动作推进(姿势到姿势),冥想引导采用明确的呼吸阶段。
- 跟随与重叠动作:训练完成时徽章先落定、随后数据出现;卡路里计数带跟随感落定;活动环按顺序带重叠地动画。
- 慢入与慢出:高能量时刻使用快速有力的节奏,恢复与冥想使用缓慢平缓的缓动,转场匹配当前活动强度。
- 弧线:进度圆的平滑弧线完成、跑步路线的曲线路径可视化、手势控制的自然弧线运动。
- 次要动作:命中目标时成就保存伴随烟花、个人纪录出现皇冠庆祝、连续打卡保持时火焰燃烧同时计数更新。
- 时间节奏:激烈时刻使用 100–150ms 的快速动效,正念场景使用 500–700ms 的缓慢动效,常规 UI 使用 200–300ms。
- 夸张:大幅庆祝,健身依赖激励感;个人纪录采用戏剧化的成就揭示;连续里程碑采用令人难忘的庆祝。
- 扎实造型:身体力学动作演示准确、数据可视化清晰可读、动作插画体现正确姿势。
- 吸引力:动效令人振奋、鼓励;双模式区分训练的高强度与健康的平静;每个成就都显得重要。
使用方式
资料给出了一套行业常见的动效时长与缓动标准,可直接作为实现参考:
| 动作 | 时长 | 缓动 |
|---|---|---|
| 按钮按下 | 150ms | ease-out |
| 进度环完成 | 600ms | spring |
| 训练转场 | 250ms | ease-in-out |
| 冥想淡入淡出 | 500ms | ease-in-out |
| 成就弹窗 | 800ms | custom-bounce |
适用场景
适用于健身应用、健康平台、运动追踪器与冥想体验的界面动效设计与实现,尤其适合需要同时兼顾“训练激励”与“身心放松”两类氛围的产品。
限制
资料未提供具体的技术框架、代码实现、组件库或平台适配说明,也未提及收费、价格或效果数据,这些信息暂未提供。