关于 secondary-action-mastery
这份实践指南讲解动画与动效设计中的次要动作,面向动画师和界面设计师,帮助添加强化主要动作但不抢焦点的辅助运动。
主要功能
- 01次要动作的从属原则
- 02区分次要动作与重叠动作
- 03辅助动作的类别
- 04时机与构图指导
- 05移除测试评估方法
适用场景
- 01为按钮交互添加细微动效
- 02丰富角色行走与对话
- 03为界面环境细节添加动画
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ dylantarre/ animation-principles --skill secondary-action-mastery安装后在 Claude Code 中输入/secondary-action-mastery确认已加载。
详细介绍
次要动作精通
丰富画面的原则
次要动作能为场景注入活力,又不会分散对主要动作的注意力。角色行走(主要动作)时吹着口哨并摆动手臂(次要动作)。按钮按下(主要动作)时伴有微妙的涟漪效果(次要动作)。这就是功能性动画与丰富、沉浸式动态效果之间的区别。
核心理论
从属原则:次要动作绝不能与主要动作争夺注意力。如果观众关注的是次要动作而非主要动作,那就失败了。辅助角色必须始终处于辅助地位。
强化作用:好的次要动作会强化主要动作的含义。它不只是增加动态效果,还为讲述中的故事增添层次。
区别:次要动作与重叠动作
这两者经常被混淆:
- 重叠动作:物理上的结果(头部移动带动头发摆动)
- 次要动作:独立的辅助动作(走路时吹口哨)
重叠动作是对动作的反应;次要动作则是额外添加的动作。
次要动作的类别
情绪强化:对话时紧张地坐立不安,得分后得意地挥拳庆祝 环境响应:衣物在风中飘动,寒冷时呼吸可见 角色小动作:调整眼镜、摆弄头发、用手指敲击 环境活力:背景角色、环境动画、闲置行为
与其他原则的相互作用
构图决定次要动作的可见程度:次要动作在构图中必须保持从属地位。
错开时序可避免争抢注意力:次要动作的时序通常与主要动作不同。
重叠动作常会成为次要动作:由物理规律驱动的动态效果能丰富画面,又不会分散注意力。
缓冲动作提供过渡:主要动作结束时,次要动作也随之稳定下来。
领域应用
UI/动态设计
- 按钮交互:主要动作是按下按钮,次要动作是细微的阴影变化或图标微动画
- 加载状态:主要动作是旋转指示器,次要动作是背景脉动或粒子漂浮
- 卡片组件:主要动作是内容动画,次要动作是环境光晕或阴影移动
- 表单提交:主要动作是成功状态,次要动作是彩纸或轻微的庆祝效果
- 导航:主要动作是页面转场,次要动作是细微的视差图层
角色动画
- 行走循环:主要动作是移动,次要动作是摆臂、头部起伏、呼吸
- 对话:主要动作是口型同步和表情,次要动作是手势、重心转移
- 动作场景:主要动作是战斗,次要动作是环境反应、群众反应
- 闲置状态:主要动作是保持姿势,次要动作是轻微呼吸、眨眼、细微动作
界面润色
- 仪表板:主要动作是数据更新,次要动作是图表的环境呼吸效果
- 通知:主要动作是消息出现,次要动作是徽标脉冲
- 空状态:主要动作是消息,次要动作是动画插图
- 转场:主要动作是内容切换,次要动作是骨架屏加载、背景淡出
游戏手感
- 玩家动作:主要动作是攻击动画,次要动作是屏幕震动、粒子爆发
- 环境:主要动作是玩家移动,次要动作是草丛摇曳、扬起灰尘
- 菜单:主要动作是选项切换,次要动作是悬停粒子、背景动画
常见错误
- 喧宾夺主:次要动作过于突出,分散了对主要动作的注意力
- 无关的次要动作:动作与主要动作的含义无关
- 次要动作过多:辅助动作太多,造成杂乱
- 完全缺少次要动作:场景显得呆板、缺乏生气、不完整
微妙程度的层次
极简(专业场景):主要动作幅度的 10-20% 适中(消费级产品):主要动作幅度的 30-40% 富有表现力(娱乐、游戏):主要动作幅度的 50-60% 戏剧化(卡通、庆祝场景):主要动作幅度的 70% 以上
应与场景和品牌个性相匹配。
“移除并测试”方法
先添加次要动作进行动画处理,然后暂时移除它。如果场景显得死气沉沉,说明次要动作起了作用。如果你没注意到它消失了,那它可能太不明显,或者根本没必要。
实现启发
对于每个主要动作,都要问:“还有什么会移动、产生反应或发生变化?”添加最有价值的一个次要动作。只有当第一个动作没有造成竞争时,才添加更多动作。安排次要动作的时机,使其与主要动作错开——可以稍早开始、在停顿阶段开始,或在动作结束后的稳定阶段开始。