关于 gaming-entertainment
这是一项将 Disney 的 12 条动画原则用于游戏和娱乐界面的设计技能,提供动作示例与时长参考,帮助设计富有表现力的交互和戏剧性效果。
主要功能
- 01应用 12 条动画原则
- 02提供游戏与界面动作示例
- 03提供时长与缓动参考
- 04指导表现性动画设计
适用场景
- 01设计游戏按钮和菜单动画
- 02规划成就与胜利效果
- 03设定娱乐界面的动作时长
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ dylantarre/ animation-principles --skill gaming-entertainment安装后在 Claude Code 中输入/gaming-entertainment确认已加载。
详细介绍
游戏与娱乐动画原则
运用迪士尼的 12 条原则,打造沉浸、精彩的体验,最大限度地提升参与度和情感冲击力。
应用 12 条原则
1. 挤压与拉伸
- 按钮按下:点击时产生令人满足的挤压效果
- 角色图标:通过弹跳和拉伸展现个性
- 成就:解锁时徽章大幅拉伸
2. 预备动作
- 播放按钮:启动前先蓄势
- 战利品箱:揭晓前营造戏剧性的铺垫
- 关卡开始:倒计时中逐渐增强气氛
3. 演出布局
- 主打内容:媒体内容铺满整个画面
- 正在播放:置于舞台中央,并添加环境效果
- 通知:吸引注意力,但不遮挡内容
4. 连续动作与关键姿势
- 游戏玩法:流畅连续的动画(连续动作)
- 菜单导航:状态明确、反应灵敏(关键姿势)
- 过场动画:编排好的序列
5. 跟随动作与重叠动作
- UI 元素:依次错开,形成级联动画
- 胜利画面:多重庆祝效果相互交叠
- 菜单项:依次显现,并带有跟随动作
6. 慢入与慢出
- 史诗时刻:运用戏剧性的慢动作效果
- 菜单转场:快速而流畅
- 加载画面:引人入胜的动画循环
7. 弧线运动
- 粒子效果:沿自然的弧形轨迹运动
- 滑动手势:卡片平滑地沿弧线移动
- 投射物:遵循基于物理的弧线路径
8. 次要动作
- 背景动画:始终保持环境动态效果
- 成就弹出:徽章播放动画时同时出现闪光
- 分数更新:数字递增时同时播放特效
9. 节奏
- 快速且灵敏:游戏手感动画时长为 100-200ms
- 戏剧性时刻:放慢至 500-800ms,以增强冲击力
- UI 反馈:即时响应,时长为 50-100ms
10. 夸张
- 放开来做:娱乐体验离不开戏剧性
- 胜利时刻:爆发式庆祝
- 强化道具:超大幅度的视觉反馈
11. 扎实绘制
- 美术指导:整个 UI 风格保持一致
- 3D 元素:深度与透视表现准确
- 角色动画:姿势与动作富有吸引力
12. 吸引力
- 个性十足:每个元素都独具个性
- 丰富的情感:从紧张到胜利
- 令人难忘的时刻:创造值得分享的体验
行业标准时长
| 动作 | 时长 | 缓动 |
|---|---|---|
| 按钮按下 | 100ms | ease-out |
| 菜单转场 | 200ms | ease-out |
| 胜利动画 | 1000-2000ms | custom-bounce |
| 成就弹出 | 500ms | spring |
| 卡片翻转 | 300ms | ease-in-out |
核心原则
娱乐关乎情感。运用动画放大情绪——兴奋、紧张、胜利与喜悦。当时刻需要盛大场面时,不要有所保留。
评论
支持 Markdown