mcpField
G
gaming-entertainment

gaming-entertainment

github.com/dylantarre设计与 UI132539 次安装43 周前更新
代码仓库

关于 gaming-entertainment

这是一项将 Disney 的 12 条动画原则用于游戏和娱乐界面的设计技能,提供动作示例与时长参考,帮助设计富有表现力的交互和戏剧性效果。

主要功能

  1. 01应用 12 条动画原则
  2. 02提供游戏与界面动作示例
  3. 03提供时长与缓动参考
  4. 04指导表现性动画设计

适用场景

  1. 01设计游戏按钮和菜单动画
  2. 02规划成就与胜利效果
  3. 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. 吸引力
  • 个性十足:每个元素都独具个性
  • 丰富的情感:从紧张到胜利
  • 令人难忘的时刻:创造值得分享的体验

行业标准时长

动作时长缓动
按钮按下100msease-out
菜单转场200msease-out
胜利动画1000-2000mscustom-bounce
成就弹出500msspring
卡片翻转300msease-in-out

核心原则

娱乐关乎情感。运用动画放大情绪——兴奋、紧张、胜利与喜悦。当时刻需要盛大场面时,不要有所保留。

评论

支持 Markdown