HarmonyOS 的动效设计规范并不是一份简单的参数列表，而是一套围绕“引力”理念构建起来的完整设计语言。本文会尽量从一个讲解者的角度，把规范背后的设计逻辑和思考方式拆解清楚，帮助你理解为什么这些规则是这样制定的，以及在实际设计中应该怎么用。

引言：为什么叫“引力动效体系”？

HarmonyOS 的动效体系有一个很有诗意的名字——引力动效体系。

“引力”是自然界普遍存在的一种力，它作用于万物，并且表现出丰富多样的形态。HarmonyOS 的设计团队把这种自然力的概念提炼出来，运用到了操作系统的动效设计中。我们可以从三个层面来理解这种“引力”的转化：

• 转场动效中，物体运动表现出“力”的节奏感；
• 手势动效中，元素之间互相影响，体现出“力”的力量感；
• 特征动效中，呈现出天体运动般的“星体即视感”。

这背后的设计理念是“回归本源”——动效不应该只是装饰，它应该模拟我们熟悉的物理世界，让用户在数字界面中也能感受到自然、流畅、有品质的操作体验。

规范中进一步把这种“力”的体验拆解为三种具体的感受：

1. 力的即视感
   把“力”赋予元素，让元素形象化、拟物化、动态化。这样不仅能更直观地传递设计理念，还能在不同的场景中表达新颖个性，同时凸显独特的品牌调性。

2. 力的秩序感
   元素有序、一致、有节奏地运动，能够创造更强的秩序感。这可以让主要信息更容易引起用户注意。尤其在转场元素的运动编排上，秩序感的体现尤为重要。

3. 力的控制感
   动效延伸了我们对物理世界的认知。摩擦力、重力、斥力在交互界面中以另一种方式被感知。当用户操作界面时，力被传递到界面上，并与心理预期产生呼应。元素通过速度、节奏等显性因子，传达出仿真物理世界的感受。

所以，“引力动效体系”并不是一个抽象的口号，它实际上定义了 HarmonyOS 动效设计的核心目标：让动效像自然力一样，既有真实感，又有秩序感，还能被用户“掌控”。

一、动效的六大设计原则：好动效的评判标准

在开始设计动效之前，首先要清楚动效在系统中承载的作用。规范明确指出，动效要始终围绕三个目标：操作符合用户心理预期、物体运动符合真实世界、元素表现形态凸显产品品牌与调性。

基于这些目标，HarmonyOS 提出了六条设计原则。我把它们理解为“好动效的六个侧面”。

1. 自然流畅

流畅性是人对加工信息难易程度的一种主观体验，它指的是手势触控、视觉感知、心理预期三者合一的综合体验。

这里的关键在于：流畅不仅仅是“不卡顿”。它要求帧率稳定、响应及时、跟手操作。也就是说，用户手指一动，界面就要跟着动，眼睛看到的和心里预期的要一致。三者缺一，都会让人觉得“不流畅”。

2. 简洁高效

界面元素的运动应该尽可能少且简洁，减少路径和不必要的元素，快速完成用户任务。

这条原则提醒我们：界面元素越多，用户消耗的时间就越长，容易造成“慢”的体验。动效不是越多越好，而是要克制。每一个动效都应该有明确的沟通目的，而不是为了炫技。

3. 快速响应

高效响应并减少过长的位移和时间。规范给出了非常具体的时长参考：

• 长距离动效保持在 350ms 以内；
• 短距离动效保持在 250ms 以内；
• 较短的动画保持在 150ms 以内完成动作。

这些数值不是随意定的，而是为了整体体现“动画快速呈现”。用户的操作需要得到即时反馈，任何不必要的等待都会破坏体验。

4. 运动一致

在动作编排时，应遵循运动路径方式一致，避免不一致的运动来分散用户视觉焦点。运用适当的编排手法，引导用户聚焦操作任务。

简单说，就是同一场景中的元素运动应该协调统一，不能东一个方向西一个方向。一致的运动路径能帮助用户快速理解界面发生了什么变化。

5. 隐藏等待

动效能够减少用户在操作时的等待感。通过元素的运动或转场过渡，减少用户对界面等待产生的焦虑感。

规范特别提到，除了用动画掩盖等待，还可以优化实现机制：优先处理当前任务，或者将串行的逻辑优化为并行，做到“所见即所得”。这说明动效设计不只是视觉层面的工作，还需要和开发实现紧密配合。

6. 凸显品牌

通过动效设计为产品增加亮点，它可以为产品带来惊喜的体验，并凸显品牌的气质，赋予产品生命力。

规范中列举了一些系统级的元素特效设计，比如拖尾、融球、发光、磁吸等效果。把这些特效属性贯穿到适合的界面中，可以营造品牌的氛围感。但要注意，品牌动效应该是有节制的，不能喧宾夺主。

小结：这六条原则可以分成两组——前三条（自然流畅、简洁高效、快速响应）偏重“基础体验”，确保动效不会给用户带来负担；后三条（运动一致、隐藏等待、凸显品牌）偏重“品质提升”，让动效成为体验的加分项。

二、动效的三大基本属性：时长、曲线、帧率

任何类型的动效都包含三大基本的动效属性：时长、曲线、帧率。这些基本属性形成了动效不可缺少的基本要素。通过组合这些基本属性，可以塑造产品动效的不同风格特点，例如稳重、活泼、轻盈、舒缓等。

下面我们分别来解读。

1. 时长：多长才合适？

时间是产生动效的基本要素。不同类型的元素、场景适用不同的时长，过短或太长都会让用户不适。

单位

动效设计的时长单位一般使用**毫秒（ms）**表示，1秒 = 1000毫秒。在帧率（FPS）60帧的环境下，1帧 = 16.67毫秒。这个换算关系很重要，因为动效的细腻程度和帧率直接相关。

复杂程度

复杂的动画比简单的动画需要更多的时间来表达，需要基于图形的特点来进行动画设计。

规范给出了两个典型例子：

• 简单动画：前后状态只通过颜色动效来实现，时长 100ms；
• 复杂动画：旋转动画需要合适的时间来保证，时长 300ms。

这说明：动效越复杂，需要给用户的时间就越长，否则信息来不及被理解。

区域范围

动效运动在一定的范围内进行，小范围内比全屏幕运动所用的时间相对更短。

规范给出了三个层级：

• 小范围内运动：开关图标动效，时长 150ms；
• 局部范围内运动：删除一条列表，时长 200ms；
• 全屏范围的运动：打开一张图片，时长 350ms。

这个逻辑很直观：运动距离越长、涉及面积越大，用户需要追踪的时间就越长，所以时长也要相应增加。但整体上，所有时长都被控制在 350ms 以内，这与“快速响应”原则是一致的。

2. 曲线：动效的灵魂

曲线与时长相互配合产生运动的韵律感。调整曲线能使物体实现加速和减速，而不是以恒定的速率运动。在自然定律下，物体不会突然开始或停止移动，它们需要一定的时间来加速和减速。

如果没有缓和曲线，过渡看起来会僵硬和机械。

贝塞尔曲线

贝塞尔曲线是一种数学曲线，在动效设计中广泛使用。从曲线形态的类型上可以分为三类：标准曲线、减速曲线、加速曲线。

标准曲线

最常用的曲线类型，开始和结束处静止，速度峰值在中段，加速阶段相对于减速阶段用时更少。

• 使用原则：运动前后始终在用户视线范围内的物体，符合物体启动和停止的真实规律。
• 应用场景：图片缩放、Tab切换、Switch开关等。
• 典型参数：cubic-bezier(0.40, 0.00, 0.20, 1.00)，另外还有 cubic-bezier(0.20, 0.00, 0.10, 1.00) 和 cubic-bezier(0.33, 0.00, 0.67, 1.00) 等变体。

减速曲线

开始处物体运动速度最快，初始即达到峰值速度，渐渐变缓，在结束处完全静止。

• 使用原则：适用从视线中新出现的物体，结束时通过相对较长的缓冲让人眼适应运动变化。
• 应用场景：弹框出现等。
• 典型参数：cubic-bezier(0.00, 0.00, 0.40, 1.00)，另外还有 cubic-bezier(0.00, 0.00, 0.20, 1.00) 和 cubic-bezier(0.00, 0.00, 0.00, 1.00) 等变体。

加速曲线

从静止启动，逐渐加速，在达到峰值速度时结束（出场）。

• 使用原则：适用原本在视线中的物体，需要消失或出场，逐渐加速符合退场行为特征。
• 应用场景：窗口出场、卡片删除等。

理解这三种曲线的关键是：标准曲线用于“一直在视线内”的物体，减速曲线用于“入场”的物体，加速曲线用于“出场”的物体。它们分别对应了物体从静止到运动再到静止的不同阶段。

弹性曲线：更接近物理世界的选择

弹性曲线（Spring curve）是一种物理曲线，它可以将速度值作为参数输入到曲线公式里，因此同一组参数在不同速度下可以产生差异化的曲线表现。同时，弹性曲线通过刚性和阻尼等物理属性参数，产生自然的弹簧效果。

HarmonyOS 提供了两种弹性曲线描述方式：

interpolatingSpring 曲线

由四个物理属性决定：

名称	含义
Stiffness 刚性	单位形变量所需弹力的大小
Damping 阻尼	弹簧在振动过程中的减震力，使得弹簧振幅逐渐减小直至停止在平衡位置
Mass 质量	附着在弹簧上的对象的质量
Velocity 速度	附着在弹簧上的对象的初始速度

springMotion 和 responsiveSpringMotion 曲线

由三个参数决定：

名称	含义
Response 响应	无阻尼自然振荡周期
DampingFraction 阻尼比	应用于动画值的阻尼力
overlapDuration 重叠时长	两段弹性动画衔接时长

规范特别指出，interpolatingSpring 曲线类型与 springMotion 和 responsiveSpringMotion 曲线类型可以通过换算相互转换，达到相同的动画效果。例如：

• interpolatingSpring：Stiffness: 128, Damping: 12, Mass: 1, Velocity: 0
• springMotion：Response: 0.555, DampingFraction: 0.53

这两组参数是等价的。

弹性曲线根据阻尼的不同，会有三种典型表现：

• 临界阻尼：当阻尼使对象刚好能不产生振动，又以最短时间到达稳定平衡状态。
• 欠阻尼：阻尼较弱，对象会通过振荡运动来消耗刚性能量，最后达到稳定平衡状态。
• 过阻尼：阻尼较临界状态过大，对象运动的动画曲线呈现衰减更慢的现象，最后达到稳定平衡状态。

弹性曲线的三大特点

1. 支持可打断时长自动匹配
   打断即更新了目标点的状态，新动效继承上一段动效的速度，过渡自然。打断的时机不固定，打断后动画运动时长自然匹配；而非弹性曲线则需要指定时长。

2. 继承速度
   在同一组弹性曲线参数下，速度入参不同，会产生一定程度地改变曲线形态，让操作对象的运动从体验上更加跟手。

3. 自然时长
   时长受弹性参数、属性变化、入参速度、精度算法共同影响。弹性曲线是物理模型，运动时长的自动计算更符合自然规律。

弹性曲线的使用原则

适用于进行跟手运动的对象，或是需要表现弹簧特性的对象。

典型应用场景包括：

• 列表上下滚动
• 桌面左右翻页
• 手势上滑退出应用

更具体地，弹性曲线可以用于三类动效：

• 手势动效：抛滑、长按触发事件、拖拽松手事件、点击按下抬起等，可以继承手速（动能）或不继承手速（势能）。
• 转场动效：层级切换转场、提示性的事件入场动效。
• 微动效：产生多次振荡的效果适用于小面积的元素上，实现小而精致灵动的体验，不担心因面积大产生干扰。例如图标微动效。

3. 帧率：流畅的物理基础

每秒钟显示的帧数即帧率（FPS）。由于人眼的特殊生理结构，所看画面帧率一般高于每秒约 10~12 帧，就会认为是连贯的，这种现象称为视觉暂留。但连贯不代表感知流畅，运动较快的动画需要更高的帧率来保障流畅度。

交互类动效帧率

移动设备的屏幕一般使用 60赫兹刷新率，动画帧率与其保持一致能让动效呈现最好状态。与观看类动画不同，交互型动效需要更严苛的帧率稳定性，否则易造成体验上的卡顿感受。

也就是说，对于需要用户实时操作的动效，帧率掉到 30FPS 就会明显感觉到不流畅。60FPS 是交互类动效的基本要求。

纯动画帧率

纯动画（如操作引导动画）的帧率要求没有交互类动效那么严苛。早期迪士尼的手绘动画基本帧率是 24FPS，也能满足观看流畅的程度。

高帧率的动画拥有更细腻的视觉体验，特别是针对快速类的动作，细腻度尤为明显。但有些动画创作会选择 8FPS，这更多的是动画风格上的需要。

所以，帧率的选择取决于动效类型：交互类优先保证 60FPS 稳定；纯动画可以更灵活，但也要考虑视觉细腻度。

4. 风格：参数组合塑造品牌语言

通过调整时长、曲线的参数，在转场、特征等动效设计上的差异来表达品牌的动效设计语言。

例如，较多地使用弹性动画会让产品的动效风格显得更加灵动和活泼。也就是说，动效风格不是玄学，而是可以通过时长和曲线的参数组合来精确控制的。

三、转场动效：页面与元素的衔接艺术

衔接页面与页面间或元素与元素间的过渡动画称之为转场动效。它帮助用户理解界面以及元素之间的逻辑关系，比如打开应用动效、日程切换动效。在系统中，转场动效占比最高，达到 60% 以上。

在 HarmonyOS 的转场动效设计上，特别推出了一镜到底的高级转场设计手法，可以提升视觉流畅性，同时增强动效品质感。

1. 层级关系：先理解架构，再设计动效

层级关系由系统架构和应用架构定义，它确定了转场动效的交互目的。不同的转场设计会传递不同的交互层级隐喻，不合理的动效编排会让用户误解，从而导致主观感受下降，流畅体验感较差。

在设计转场动效时，首先要理解应用之间和页面元素之间的架构关系，再运用合适的设计手法完成动效设计表达。

层级关系分为三类：

同层级

转场后的页面或元素与当前的在同一层级上。应用场景：编辑、页签、横竖屏转场等。

上下层级

转场后的页面或元素与当前的存在上下层级关系。应用场景：上下级页面、新建、解锁、搜索转场等。

例如，应用内的父子转场，两个界面通过左右切换明确了层级关系；新建转场、应用退出到桌面图标等，都清晰地展示了层级位置。

跨层级

适用于应用之间的跳转。应用场景：从一个应用转到其他应用。

解读：层级关系决定了动效的“隐喻”。同层级转场应该传递“平级切换”的感觉，上下层级转场要体现“前进/后退”的逻辑，跨层级转场则需要表明“离开当前应用，进入另一个应用”的边界感。

2. 运动编排：场景解构与元素分类

在界面变化过程中，需要将各个部分元素进行分类，协调相互之间的运动方式，使整个过程自然流畅，并合理引导用户的注意力。

场景解构

转场是由交互行为引起的界面变化。分析界面元素在过程中的意义，定义其在转场中所在的类型，并将它们进行分类，元素所属的类别会影响它们使用怎样的转场方式，同时也将决定用什么类型的曲线和时长。

四类元素：

• 进场元素：转场中新出现的元素，一般是结果界面上的构成元素。
• 出场元素：转场中消失的元素，一般是上一界面中的构成元素。
• 持续元素：转场中持续存在的元素，可以是元素在布局上的变化，也可以是某种连续性的动画效果，整个过程无中断。
• 静止元素：转场中无任何变化的元素。

解读：这一步是转场设计的“前期分析”。先搞清楚哪些元素要进来、哪些要出去、哪些保持不变，再针对性地设计运动方式。不同类别元素使用不同的曲线和时长，可以避免“一锅粥”式的混乱转场。

3. 一镜到底：共享元素的高级编排

一镜到底是属于通过共享元素的一种转场编排方式，有助于提升用户操作任务的效率，增强视觉的流畅感，是转场设计中重点推荐的技法。

一镜到底包含三种共享手法：

共享元素

共享元素一般是转场前后持续存在的界面元素，即“持续元素”。它是转场发生后希望用户关注到的焦点元素，增强了转场的连续感。

例如，搜索框在转场前后保持存在，可以作为共享元素。

共享容器

当一组元素在过渡时包含明确的边界，可使用容器来让转换过程有连续感。容器通过大小、高度、圆角等属性进行补间过渡转换，容器内的元素可通过淡入淡出或共享元素的手法进行过渡。

例如，通过共用容器将转场前后不同界面成组，一致的容器动画让过渡有连续感。

共享动势

无中间属性，无法通过补间变化来实现柔和过渡，需要提取出可用的共享转换属性，来实现前后的平滑过渡。常用的共享运动属性有位移、缩放、旋转等。

例如，共享缩放运动、共享旋转运动（大屏 demo）。

解读：一镜到底的核心思想是“让用户的目光有落脚点”。通过共享元素、容器或动势，让转场前后的视觉焦点保持连续，而不是完全断裂。

4. 淡入淡出：简单但有效的过渡

淡入淡出是通过透明度变化来实现过渡转场，适用于无中间属性的组件或元素之间进行过渡变化。有两种手法：

单向淡入淡出

在前后层叠的场景中，只有前景元素进行淡入或淡出动作，下方元素无变化。

交叉淡入淡出

存在出场元素与进场元素的场景下，根据元素图形特点进行淡入淡出效果处理。

• 一般进出场元素样式一致或近似，可考虑使用同时进行透明度变化的方式；
• 视觉样式上不同类型的进出场元素，为避免交叠状态带来视觉上的混乱，可适当错开出场元素淡出和进场元素淡入的时机。

解读：淡入淡出是最基础的过渡手段，但也要注意时机和元素类型的匹配。尤其是交叉淡入淡出，如果进出场元素样式差异大，同时淡入淡出会产生视觉交叠，这时错开时机是更好的选择。

四、手势动效：让界面“跟手”的物理感

手势动效是指手势在终端屏幕上或者触摸板等输入设备上进行跟手操作的动效，大致分为滑动、点击、拖拽、捏合等持续操作动效，比如手势导航上滑、捏合照片等动效。

HarmonyOS 主张无阻塞感的动效设计，结合运用动效物理引擎，将自然属性运用到界面的操作中，比如摩擦力、弹性、碰撞影响等。

1. 概述

手势动效的设计是为了让用户在使用交互手势时，交互对象与用户手势建立流畅的操作反馈感，通过弹性曲线等物理模型，还原真实可行的手势操作体验。

聚焦在几种常用手势类型：点击、滑动、翻动、夹捏、拖拽。

2. 点击：按下即响应

点击手势通常包含两个行为：按下（touch down）和抬起（touch up）。

规范特别提到：按下接触过程平均时长 100~130ms，这期间对象原本无反馈。但为了提升响应速度，点击手势动效设计在按下那一刻即响应动效反馈。这一可先行的触控响应机制强化了界面元素的视觉反馈，为用户理解界面状态提供了更多的线索信息。

解读：这里的核心是“提前响应”。用户按下时立即给视觉反馈，而不是等到抬起才响应，这样能显著降低感知延迟。

3. 滑动：继承手速是关键

滑动手势是指手抬起时带有方向和速度的动作。以列表样式场景为例，主要分为三个阶段：

• 跟手阶段：着重对象的跟手响应性；
• 离手瞬间：需要对象继承手速进行离手后的动画反馈；
• 离手后阶段：保证对象动效反馈的结果与手势动作的连贯性。

解读：滑动的关键在于“继承手速”。用户松手后，列表不应该突然停下来，而是应该以松手时的速度继续惯性滑动，然后逐渐减速。这种速度继承是滑动手势动效设计的核心。

4. 翻动：限位与过界

翻动通过抛滑和拖拽手势进行操作，由翻页这类场景承载。

翻页是基于设定区域进行对象内容的翻动切换，离手后对象不会处于任一坐标位置上，有明显的限位属性，页在这里等同于设定区域。

翻动有成功与否：未成功会停留在当前内容上；成功则显示下一页/几页的内容。为了提示性翻页，也有过界拖拽的场景。

解读：翻动和滑动的区别在于“限位”。滑动是连续的位置变化，而翻动是离散的页面切换。过界拖拽则是为了告诉用户“已经到边界了，不能再翻了”。

5. 夹捏：双指的自然手势

夹捏手势是指双/多指合拢或分开的动作，是自然手势的重要体现。同样分为三个阶段：

• 跟手阶段：对象需要基于手势动作进行缩放、旋转、移动等反馈；
• 离手瞬间：对象继承手速进行离手后的动画反馈；
• 离手后阶段：完成后续动画。

解读：夹捏常用于图片缩放、地图缩放等场景，跟手阶段要精确响应双指距离的变化，离手后则要根据手速进行惯性动画。

6. 拖拽：显控比与离手动画

拖拽手势是指手指按下同时进行移动的动作。动效设计了对象通过拖拽行为进行状态转换的整个过程，包括：

• 跟手阶段：显控比设计；
• 离手后：对象运动曲线以及属性变化设计。

解读：显控比是指手指移动距离与界面元素移动距离的比例。在拖拽过程中，合理的显控比能让用户感觉“拖得动”；离手后的曲线和属性变化则决定了拖拽结束后的动画表现。

7. 特定联动场景

规范还给出了几个典型的手势联动场景，展示了如何在具体交互中运用上述原则。

标题联动

对象主内容区与标题区的联动设计。在主内容区到达顶部边界时继续进行拖拽操作，除了主内容区因过界显控比设计产生的阻尼感，上方的标题区与其产生不同阻尼感的联动设计，让过界拖拽体验更灵动并富有层次感。

卡片左右滑

卡片横向滑动可扩展更多功能，显控比设计让横向拖拽手势在一定距离后产生阻尼感，提示并引导用户进行后续操作。

下拉返回

下拉过程中加入递进的显控比设计，渐强的阻尼感让对象的拖拽手感更富有质感。离手后对象继承手速并按设定进行动画反馈。

解读：这三个场景都体现了“阻尼感”和“显控比”的精细化设计。通过在不同区域设置不同的阻尼，可以让过界拖拽的手感更有层次，避免单调的线性反馈。

五、总结：动效设计是系统工程

回顾整套 HarmonyOS 动效设计规范，我们可以看到一条清晰的逻辑主线：

1. 理念层：以“引力”为核心，追求自然、流畅、品质一体的操作体验，通过“力的即视感、秩序感、控制感”三个维度落地。

2. 原则层：六条设计原则（自然流畅、简洁高效、快速响应、运动一致、隐藏等待、凸显品牌）为所有动效设计提供评判标准。

3. 属性层：时长、曲线、帧率是动效的三大基本属性。时长要考虑复杂度和区域范围；曲线分为贝塞尔曲线（标准、减速、加速）和弹性曲线（物理模型，支持速度继承和打断）；帧率上交互类动效要保证 60FPS 稳定，纯动画可适当放宽。

4. 转场层：转场动效是系统中占比最高的动效类型。设计时要先理解层级关系（同层级、上下层级、跨层级），然后进行场景解构，把元素分为进场、出场、持续、静止四类，再运用一镜到底（共享元素、共享容器、共享动势）和淡入淡出等手法完成编排。

5. 手势层：手势动效强调无阻塞感和物理真实感。点击要按下即响应，滑动、翻动、夹捏、拖拽都要做好跟手、离手继承和离手后动画三个阶段，并通过显控比和阻尼设计提升手感。

最终，所有这些规范和原则，都是为了一个目标：让用户在操作 HarmonyOS 设备时，感受到像真实物理世界一样自然、跟手、有品质的动效体验。理解了这个目标，再去看具体的时长、曲线、帧率参数，它们就不再是孤立的数字，而是服务于整体体验的系统化设计决策。