1# 动效属性 2 3任何类型的动效都包含三大基本的动效属性：时长、曲线、帧率。这些基本属性形成了动效不可缺少的基本要素。通过组合这些基本的动效属性，可以塑造产品动效的不同风格特点，例如稳重、活泼、轻盈、舒缓等。 4 5 6## 时长 7 8时间是产生动效的基本要素，不同类型的元素、场景适用不同的时长，过短或太长都会让用户不适。以下因素详细说明了时长应如何设计以适应不同类型的动效。 9 10 11## 单位 12 13动效设计的时长单位一般使用毫秒（ms）表示，1秒=1000毫秒。在帧率（FPS）60帧的环境下，1帧=16.67毫秒。 14 15 16## 复杂程度 17 18复杂的动画比简单的动画需要更多的时间来表达，基于图形的特点来进行动画设计。 19 20 | | | 21| -------- | -------- | 22| **简单动画**<br/>前后状态只通过颜色动效来实现, 时长：100ms | **复杂动画**<br/>旋转动画需要合适的时间来保证, 时长：300ms | 23 24 25## 区域范围 26 27动效运动在一定的范围内进行，小范围内比全屏幕运动所用的时间相对更短。 28 29 |  |  |  | 30| -------- | -------- | -------- | 31| **小范围内运动**<br/>开关图标动效 时长：150ms | **局部范围内运动**<br/>删除一条列表, 时长：200ms | **全屏范围的运动**<br/>打开一张图片, 时长：350ms | 32 33 34## 曲线 35 36曲线与时长相互配合产⽣运动的韵律感。调整曲线能使物体实现加速和减速，⽽不是以恒定的速率运动。在自然定律下，物体不会突然开始或停止移动，它们需要一定的时间来加速和减速。 37 38 39没有缓和曲线的过渡看起来僵硬和机械。 40 41## 动效曲线概况 42 43动效曲线也被称为动效差值器，本质上是调整运动对象在时间线上速度的一种手法。 44 45| |  |  || 46| -------- | -------- | -------- | -------- | 47| linear | easing | spring | others | 48 49## 贝塞尔曲线 50 51贝塞尔曲线(Bézier curve)是一种数学曲线，在动效设计中广泛使用。从曲线形态的类型上可以分为这几类：标准曲线、减速曲线、加速曲线。 52 53 54### 标准曲线 55 56最常用的曲线类型，开始和结束处静止，速度峰值在中段，加速阶段相对于减速阶段用时更少。 57使用原则：运动前后始终在用户视线范围内的物体，符合物体启动和停止的真实规律。 58应用场景：图片缩放，Tab切换，Switch开关等。 59 60 61cubic-bezier(0.40,0.00,0.20,1.00) 62 63 64### 标准曲线的其他类型 65 66 | .jpg) | .jpg) | 67| -------- | -------- | 68| cubic-bezier(0.20,0.00,0.10,1.00) | cubic-bezier(0.33, 0.00, 0.67, 1.00) | 69 70 71### 减速曲线 72 73开始处物体运动速度最快，初始即达到峰值速度，渐渐变缓，在结束处完全静止。 74使用原则：适用从视线中新出现的物体，结束时通过相对较长的缓冲让人眼适应运动变化。 75应用场景： 弹框出现等。 76 77cubic-bezier(0.00, 0.00, 0.40, 1.00) 78 79 80### 减速曲线的其他类型 81 82 | .jpg) | .jpg) | 83| -------- | -------- | 84| cubic-bezier(0.00, 0.00, 0.20, 1.00) | cubic-bezier(0.00, 0.00, 0.00, 1.00) | 85 86 87### 加速曲线 88 89从静止启动，逐渐加速，在达到峰值速度时结束（出场）。 90使用原则：适用原本在视线中的物体，需要消失或出场，逐渐加速符合退场行为特征。 91应用场景：窗口出场、卡片删除等。 92 93 94 95## 弹性曲线 96 97弹性曲线(Spring curve)是一种物理曲线，它可以将速度值作为参数输入到曲线公式里，因此同一组参数在不同速度下可以产生差异化的曲线表现；同时弹性曲线通过刚性和阻尼等物理属性参数，产生自然的弹簧效果。 98 99 100### interpolatingSpring 曲线 101 102interpolationSpring曲线由刚性、阻尼、质量、速度四个物理属性决定。 103 104| 名称 | 含义 | 105| -------- | -------- | 106| Stiffness 刚性 | 单位形变量所需弹力的大小 | 107| Damping 阻尼 | 弹簧在振动过程中的减震力，使得弹簧振幅逐渐减小直至停止在平衡位置 | 108| Mass 质量 | 附着在弹簧上的对象的质量 | 109| Velocity 速度 | 附着在弹簧上的对象的初始速度 | 110 111 112### springMotion 和 responsiveSpringMotion 曲线 113 114springMotion 和 responsiveSpringMotion曲线由响应、阻尼比、重叠时长决定。 115 116| 名称 | 含义 | 117| -------- | -------- | 118| Response 响应 | 无阻尼自然振荡周期 | 119| DampingFraction 阻尼比 | 应用于动画值的阻尼力 | 120| overlapDuration 重叠时长 | 两段弹性动画衔接时长 | 121 122interpolationSpring 曲线类型与 springMotion 和 responsiveSpringMotion 曲线类型可以通过换算相互转换，达到相同的动画效果。 123 124 125 126interpolatingSpring：Stiffness:128，Damping:12 ，Msss:1，Velocity:0 127 128springmotion：Response:0.555，DampingFraction:0.53 129 130### 临界阻尼 131 132当阻尼使对象刚好能不产生振动，又以最短时间到达稳定平衡状态的情况。 133 134 135 136 137### 欠阻尼 138 139阻尼较弱，对象会通过振荡运动来消耗刚性能量，最后达到稳定平衡的状态。 140 141 142 143 144### 过阻尼 145 146阻尼较临界状态过大，对象运动的动画曲线呈现衰减更慢的现象，最后达到稳定平衡状态。 147 148 149 150### 弹性曲线的特点 151 152**1、支持可打断时长自动匹配** 153 154- 打断即更新了目标点的状态，新动效继承上一段动效的速度，过渡自然 155 156- 打断的时机不固定，打断后动画运动时长自然匹配；非弹性曲线需要指定时长 157 158**2、继承速度** 159 160- 在同一组弹性曲线参数下，速度入参不同，产生一定程度地改变曲线形态，让操作对象的运动从体验上更加跟手。 161 162**3、自然时长** 163 164- 时长受弹性参数、属性变化、入参速度、精度算法共同影响 165 166- 弹性曲线是物理模型，运动时长的自动计算更符合自然规律 167 168### 设计原则 169 170使用原则：适用于进行跟手运动的对象，或是需要表现弹簧特性的对象。 171 172应用场景：列表上下滚动、桌面左右翻页、手势上滑退出应用等。 173 174#### 手势动效 175 176|  | | 177| -------- | -------- | 178| 继承手速（动能） | 不继承手速（势能） | 179| 抛滑Fling(快/慢) | 长按LongPress 触发事件 | 180| |拖拽Drag 松手事件 | 181| | 点击Click 按下抬起 | 182 183 184#### 转场动效 185 186| | | 187| -------- | -------- | 188| 层级切换转场动效 | 提示性的事件入场动效 | 189 190#### 微动效 191 192产生多次振荡的效果适用于小面积的元素上，实现小而精致灵动的体验，不担心因面积大产生干扰（需要联合人因进行研究）。 193 194| | | 195| -------- | -------- | 196| 图标微动效示例1 | 图标微动效示例2 | 197 198弹性曲线相关的开发文档，详见：[弹簧曲线](../../application-dev/ui/arkts-spring-curve.md)。 199 200 201## 帧率 202 203每秒钟显示的帧数即帧率（FPS）。由于人眼的特殊生理结构，所看画面帧率一般高于每秒约10~12帧，就会认为是连贯的，该现象为视觉暂留。但连贯不代表感知流畅，运动较快的动画需要更高的帧率来保障流畅度。 204 205相同时间和位移距离情况下，不同帧率效果对比（90FPS和120FPS受浏览器播放器的限制，可能无法看出差异）。 206 207 208### 交互类动效帧率 209 210移动设备的屏幕一般使用60赫兹刷新率，动画帧率与其保持一致能让动效呈现最好状态。与观看类动画不同，交互型动效需要更严苛的帧率稳定性，否则易造成体验上的卡顿感受。 211 212 ||| 213| -------- | -------- | 214| 60FPS | 30FPS | 215 216 217### 纯动画帧率 218 219纯动画（如操作引导动画）的帧率要求没有交互类动效那么严苛，早期迪士尼的手绘动画基本帧率是24FPS，也能满足观看流畅的程度。高帧率的动画则拥有更细腻的视觉体验，特别是针对快速类的动作，细腻度尤为明显。有些动画创作会选择8FPS，这更多的是动画风格上的需要。 220 221 | || 222| -------- | -------- | 223| 60FPS 动画过程细腻而流畅 | 12FPS 低帧率导致元素两帧之间变化过大，中间状态缺失导致眼跳感 | 224 225 226## 风格 227 228通过调整时长、曲线的参数，在转场、特征等动效设计上的差异来表达品牌的动效设计语言。例如较多地使用弹性动画会让产品的动效风格显得更加灵动和活泼。 229
