1# @ohos.curves (插值计算) 2 3本模块提供设置动画插值曲线功能，用于构造阶梯曲线对象、构造三阶贝塞尔曲线对象和构造弹簧曲线对象。 4 5> **说明：** 6> 7> 本模块首批接口从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 导入模块 11 12```ts 13import { curves } from '@kit.ArkUI'; 14``` 15 16 17## Curves.initCurve<sup>9+</sup> 18 19initCurve(curve?: Curve): ICurve 20 21插值曲线的初始化函数，可以根据入参创建一个插值曲线对象。 22 23**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 24 25**系统能力：** SystemCapability.ArkUI.ArkUI.Full 26 27**参数：** 28 29| 参数名 | 类型 | 必填 | 说明 | 30| ------ | --------------- | ---- | ----------------------------------- | 31| curve | [Curve](#curve枚举说明) | 否 | 曲线类型。<br/>默认值：Curve.Linear | 32 33**返回值：** 34 35| 类型 | 说明 | 36| ---------------------------------- | ---------------- | 37| [ICurve](#icurve9) | 曲线的插值对象。 | 38 39## Curve枚举说明 40 41插值曲线，动效请参考<!--RP1-->[贝塞尔曲线](../../../design/ux-design/animation-attributes.md)<!--RP1End-->。 42 43**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 44 45**系统能力：** SystemCapability.ArkUI.ArkUI.Full 46 47| 名称 | 说明 | 48| ------------------- | ------------------------------------------------------------ | 49| Linear | 表示动画从头到尾的速度都是相同的。 | 50| Ease | 表示动画以低速开始，然后加快，在结束前变慢，cubic-bezier(0.25, 0.1, 0.25, 1.0)。 | 51| EaseIn | 表示动画以低速开始，cubic-bezier(0.42, 0.0, 1.0, 1.0)。 | 52| EaseOut | 表示动画以低速结束，cubic-bezier(0.0, 0.0, 0.58, 1.0)。 | 53| EaseInOut | 表示动画以低速开始和结束，cubic-bezier(0.42, 0.0, 0.58, 1.0)。 | 54| FastOutSlowIn | 标准曲线，cubic-bezier(0.4, 0.0, 0.2, 1.0)。 | 55| LinearOutSlowIn | 减速曲线，cubic-bezier(0.0, 0.0, 0.2, 1.0)。 | 56| FastOutLinearIn | 加速曲线，cubic-bezier(0.4, 0.0, 1.0, 1.0)。 | 57| ExtremeDeceleration | 急缓曲线，cubic-bezier(0.0, 0.0, 0.0, 1.0)。 | 58| Sharp | 锐利曲线，cubic-bezier(0.33, 0.0, 0.67, 1.0)。 | 59| Rhythm | 节奏曲线，cubic-bezier(0.7, 0.0, 0.2, 1.0)。 | 60| Smooth | 平滑曲线，cubic-bezier(0.4, 0.0, 0.4, 1.0)。 | 61| Friction | 阻尼曲线，cubic-bezier(0.2, 0.0, 0.2, 1.0)。 | 62 63**示例：** 64 65```ts 66import { curves } from '@kit.ArkUI'; 67curves.initCurve(Curve.EaseIn) // 创建一个默认先慢后快插值曲线 68``` 69 70 71## Curves.stepsCurve<sup>9+</sup> 72 73stepsCurve(count: number, end: boolean): ICurve 74 75构造阶梯曲线对象。 76 77**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 78 79**系统能力：** SystemCapability.ArkUI.ArkUI.Full 80 81**参数：** 82 83| 参数名 | 类型 | 必填 | 说明 | 84| ------ | ------- | ----| ------------------------------------------------------------ | 85| count | number | 是 | 阶梯的数量，需要为正整数。<br/>取值范围：[1, +∞)<br/>**说明：** <br/>设置小于1的值时，按值为1处理。 | 86| end | boolean | 是 | 在每个间隔的起点或是终点发生阶跃变化。<br>-true：在终点发生阶跃变化。<br>-false：在起点发生阶跃变化。 | 87 88**返回值：** 89 90| 类型 | 说明 | 91| ---------------------------------- | ---------------- | 92| [ICurve](#icurve9) | 曲线的插值对象。 | 93 94**示例：** 95 96```ts 97import { curves } from '@kit.ArkUI'; 98curves.stepsCurve(9, true) //创建一个阶梯曲线 99``` 100 101 102## Curves.cubicBezierCurve<sup>9+</sup> 103 104cubicBezierCurve(x1: number, y1: number, x2: number, y2: number): ICurve 105 106构造三阶贝塞尔曲线对象，曲线的值必须处于0-1之间。 107 108**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 109 110**系统能力：** SystemCapability.ArkUI.ArkUI.Full 111 112**参数：** 113 114| 参数名 | 类型 | 必填 | 说明 | 115| ------ | ------ | ---- | ------------------------------------------------------------ | 116| x1 | number | 是 | 确定贝塞尔曲线第一点横坐标。<br/>取值范围：[0, 1]<br/>**说明：** <br/>设置的值小于0时，按0处理；设置的值大于1时，按1处理。 | 117| y1 | number | 是 | 确定贝塞尔曲线第一点纵坐标。<br/>取值范围：(-∞, +∞) | 118| x2 | number | 是 | 确定贝塞尔曲线第二点横坐标。<br/>取值范围：[0, 1]<br/>**说明：** <br/>设置的值小于0时，按0处理；设置的值大于1时，按1处理。 | 119| y2 | number | 是 | 确定贝塞尔曲线第二点纵坐标。<br/>取值范围：(-∞, +∞) | 120 121**返回值：** 122 123| 类型 | 说明 | 124| ---------------------------------- | ---------------- | 125| [ICurve](#icurve9) | 曲线的插值对象。 | 126 127 128**示例：** 129 130```ts 131import { curves } from '@kit.ArkUI'; 132curves.cubicBezierCurve(0.1, 0.0, 0.1, 1.0) // 创建一个三阶贝塞尔曲线 133``` 134 135 136## Curves.springCurve<sup>9+</sup> 137 138springCurve(velocity: number, mass: number, stiffness: number, damping: number): ICurve 139 140构造弹簧曲线对象，曲线形状由弹簧参数决定，动画时长受animation、animateTo中的duration参数控制。 141 142**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 143 144**系统能力：** SystemCapability.ArkUI.ArkUI.Full 145 146**参数：** 147| 参数名 | 类型 | 必填 | 说明 | 148| --------- | ------ | ---- | ------------------------------------------------------------ | 149| velocity | number | 是 | 初始速度。是由外部因素对弹性动效产生的影响参数，其目的是保证对象从之前的运动状态平滑的过渡到弹性动效。该速度是归一化速度，其值等于动画开始时的实际速度除以动画属性改变值。<br/>取值范围：(-∞, +∞) | 150| mass | number | 是 | 质量。弹性系统的受力对象，会对弹性系统产生惯性影响。质量越大，震荡的幅度越大，恢复到平衡位置的速度越慢。<br/>取值范围：(0, +∞)<br/>**说明：** <br/>设置的值小于等于0时，按1处理。 | 151| stiffness | number | 是 | 刚度。是物体抵抗施加的力而形变的程度。在弹性系统中，刚度越大，抵抗变形的能力越强，恢复到平衡位置的速度就越快。<br/>取值范围：(0, +∞)<br/>**说明：** <br/>设置的值小于等于0时，按1处理。 | 152| damping | number | 是 | 阻尼。用于描述系统在受到扰动后震荡及衰减的情形。阻尼越大，弹性运动的震荡次数越少、震荡幅度越小。<br/>取值范围：(0, +∞)<br/>**说明：** <br/>设置的值小于等于0时，按1处理。 | 153 154 155**返回值：** 156 157| 类型 | 说明 | 158| ---------------------------------- | ---------------- | 159| [ICurve](#icurve9) | 曲线的插值对象。 | 160 161 162**示例：** 163 164```ts 165import { curves } from '@kit.ArkUI'; 166curves.springCurve(10, 1, 228, 30) // 创建一个弹簧插值曲线 167``` 168 169 170## Curves.springMotion<sup>9+</sup> 171 172springMotion(response?: number, dampingFraction?: number, overlapDuration?: number): ICurve 173 174构造弹性动画曲线对象。如果对同一对象的同一属性进行多个弹性动画，每个动画会替换掉前一个动画，并继承之前的速度。 175 176**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 177 178**系统能力：** SystemCapability.ArkUI.ArkUI.Full 179 180**参数：** 181 182| 参数名 | 类型 | 必填 | 说明 | 183| --------- | ------ | ---- | ----- | 184| response | number | 否 | 弹簧自然振动周期，决定弹簧复位的速度。<br>默认值：0.55<br/>单位：秒<br/>取值范围：(0, +∞)<br/>**说明：** <br/>设置小于等于0的值时，按默认值0.55处理。 | 185| dampingFraction | number | 否 | 阻尼系数。<br>0表示无阻尼，一直处于震荡状态；<br>大于0小于1的值为欠阻尼，运动过程中会超出目标值；<br>等于1为临界阻尼；<br>大于1为过阻尼，运动过程中逐渐趋于目标值。<br>默认值：0.825<br/>单位：秒<br/>取值范围：[0, +∞)<br/>**说明：** <br/>设置小于0的值时，按默认值0.825处理。 | 186| overlapDuration | number | 否 | 弹性动画衔接时长。发生动画继承时，如果前后两个弹性动画response不一致，response参数会在overlapDuration时间内平滑过渡。<br/>默认值：0<br/>单位：秒<br/>取值范围：[0, +∞)<br/> **说明：** <br/>设置小于0的值时，按默认值0处理。<br>弹性动画曲线为物理曲线，[animation](arkui-ts/ts-animatorproperty.md)、[animateTo](arkui-ts/ts-explicit-animation.md)、[pageTransition](arkui-ts/ts-page-transition-animation.md)中的duration参数不生效，动画持续时间取决于springMotion动画曲线参数和之前的速度。时间不能归一，故不能通过该曲线的interpolate函数获得插值。 | 187 188 189**返回值：** 190 191| 类型 | 说明 | 192| ---------------------------------- | ---------------- | 193| [ICurve](#icurve9) | 曲线对象。<br>**说明:** <br>弹性动画曲线为物理曲线，[animation](arkui-ts/ts-animatorproperty.md)、[animateTo](arkui-ts/ts-explicit-animation.md)、[pageTransition](arkui-ts/ts-page-transition-animation.md)中的duration参数不生效，动画持续时间取决于springMotion动画曲线参数和之前的速度。时间不能归一，故不能通过该曲线的[interpolate](#interpolate9)函数获得插值。 | 194 195**示例：** 196 197```ts 198import { curves } from '@kit.ArkUI' 199curves.springMotion() // 创建一个默认弹性动画曲线 200curves.springMotion(0.5) // 创建指定response、其余参数默认的弹性动画曲线 201curves.springMotion(0.5, 0.6) // 创建指定response和dampingFraction、其余参数默认的弹性动画曲线 202curves.springMotion(0.5, 0.6, 0) // 创建三个参数均自定义的弹性动画曲线 203``` 204 205 206## Curves.responsiveSpringMotion<sup>9+</sup> 207 208responsiveSpringMotion(response?: number, dampingFraction?: number, overlapDuration?: number): ICurve 209 210构造弹性跟手动画曲线对象，是[springMotion](#curvesspringmotion9)的一种特例，仅默认参数不同，可与springMotion混合使用。 211 212**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 213 214**系统能力：** SystemCapability.ArkUI.ArkUI.Full 215 216**参数：** 217 218| 参数名 | 类型 | 必填 | 说明 | 219| --------- | ------ | ---- | ----- | 220| response | number | 否 | 解释同springMotion中的response。<br/>默认值：0.15<br/>单位：秒<br/>取值范围：(0, +∞)<br/>**说明：** <br/>设置小于等于0的值时，按默认值0.15处理。 | 221| dampingFraction | number | 否 | 解释同springMotion中的dampingFraction。<br/>默认值：0.86<br/>单位：秒<br/>取值范围：[0, +∞)<br/>**说明：** <br/>设置小于0的值时，按默认值0.86处理。 | 222| overlapDuration | number | 否 | 解释同springMotion中的overlapDuration。<br/>默认值：0.25<br/>单位：秒<br/>取值范围：[0, +∞)<br/>**说明：** <br/>设置小于0的值时，按默认值0.25处理。<br/>弹性跟手动画曲线为springMotion的一种特例，仅默认值不同。如果使用自定义参数的弹性曲线，推荐使用springMotion构造曲线。如果使用跟手动画，推荐使用默认参数的弹性跟手动画曲线。<br/>[animation](arkui-ts/ts-animatorproperty.md)、[animateTo](arkui-ts/ts-explicit-animation.md)、[pageTransition](arkui-ts/ts-page-transition-animation.md)中的duration参数不生效，动画持续时间取决于responsiveSpringMotion动画曲线参数和之前的速度，也不能通过该曲线的interpolate函数获得插值。 | 223 224**返回值：** 225 226| 类型 | 说明 | 227| ---------------------------------- | ---------------- | 228| [ICurve](#icurve9) | 曲线对象。<br>**说明:** <br>1、弹性跟手动画曲线为springMotion的一种特例，仅默认值不同。如果使用自定义参数的弹性曲线，推荐使用springMotion构造曲线；如果使用跟手动画，推荐使用默认参数的弹性跟手动画曲线。<br>2、[animation](arkui-ts/ts-animatorproperty.md)、[animateTo](arkui-ts/ts-explicit-animation.md)、[pageTransition](arkui-ts/ts-page-transition-animation.md)中的duration参数不生效，动画持续时间取决于responsiveSpringMotion动画曲线参数和之前的速度，也不能通过该曲线的[interpolate](#interpolate9)函数获得插值。 | 229 230**示例：** 231 232```ts 233import { curves } from '@kit.ArkUI' 234curves.responsiveSpringMotion() // 创建一个默认弹性跟手动画曲线 235``` 236 237 238## Curves.interpolatingSpring<sup>10+</sup> 239 240interpolatingSpring(velocity: number, mass: number, stiffness: number, damping: number): ICurve 241 242构造插值器弹簧曲线对象，生成一条从0到1的动画曲线，实际动画值根据曲线进行插值计算。动画时间由曲线参数决定，不受animation、animateTo中的duration参数控制。 243 244**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 245 246**系统能力：** SystemCapability.ArkUI.ArkUI.Full 247 248**参数：** 249| 参数名 | 类型 | 必填 | 说明 | 250| --------- | ------ | ---- | ----- | 251| velocity | number | 是 | 初始速度。外部因素对弹性动效产生的影响参数，目的是保证对象从之前的运动状态平滑地过渡到弹性动效。该速度是归一化速度，其值等于动画开始时的实际速度除以动画属性改变值。<br/>取值范围：(-∞, +∞) | 252| mass | number | 是 | 质量。弹性系统的受力对象，会对弹性系统产生惯性影响。质量越大，震荡的幅度越大，恢复到平衡位置的速度越慢。<br/>取值范围：(0, +∞)<br/>**说明：** <br/>设置的值小于等于0时，按1处理。 | 253| stiffness | number | 是 | 刚度。表示物体抵抗施加的力而形变的程度。刚度越大，抵抗变形的能力越强，恢复到平衡位置的速度越快。<br/>取值范围：(0, +∞)<br/>**说明：** <br/>设置的值小于等于0时，按1处理。 | 254| damping | number | 是 | 阻尼。用于描述系统在受到扰动后震荡及衰减的情形。阻尼越大，弹性运动的震荡次数越少、震荡幅度越小。<br/>取值范围：(0, +∞)<br/>**说明：** <br/>设置的值小于等于0时，按1处理。 | 255 256**返回值：** 257 258| 类型 | 说明 | 259| ---------------------------------- | ---------------- | 260| [ICurve](#icurve9) | 曲线对象。<br>**说明:** 弹性动画曲线为物理曲线，[animation](arkui-ts/ts-animatorproperty.md)、[animateTo](arkui-ts/ts-explicit-animation.md)、[pageTransition](arkui-ts/ts-page-transition-animation.md)中的duration参数不生效，动画持续时间取决于interpolatingSpring动画曲线参数。时间不能归一，故不能通过该曲线的[interpolate](#interpolate9)函数获得插值。 | 261 262**示例：** 263 264```ts 265import { curves } from '@kit.ArkUI' 266curves.interpolatingSpring(10, 1, 228, 30) // 创建一个时长由弹簧参数决定的弹簧插值曲线 267``` 268 269## Curves.customCurve<sup>10+</sup> 270 271customCurve(interpolate: (fraction: number) => number): ICurve 272 273构造自定义曲线对象。 274 275**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 276 277**系统能力：** SystemCapability.ArkUI.ArkUI.Full 278 279**参数：** 280 281| 参数名 | 类型 | 必填 | 说明 | 282| ----------- | ---------------------------- | ---- | ------------------------------------------------------------ | 283| interpolate | (fraction: number) => number | 是 | 用户自定义的插值回调函数。<br/>fraction为动画开始时的插值输入x值。取值范围：[0,1]<br/>返回值为曲线的y值。取值范围：[0,1]<br />**说明：**<br />fraction等于0时，返回值为0对应动画起点，返回不为0，动画在起点处有跳变效果。<br/>fraction等于1时，返回值为1对应动画终点，返回值不为1将导致动画的终值不是状态变量的值，出现大于或者小于状态变量值，再跳变到状态变量值的效果。 | 284 285**返回值：** 286 287| 类型 | 说明 | 288| ------------------ | ---------------- | 289| [ICurve](#icurve9) | 曲线的插值对象。 | 290 291**示例：** 292 293```ts 294import { curves } from '@kit.ArkUI' 295let interpolate = (fraction:number):number => { 296 return Math.sqrt(fraction) 297} 298let curve = curves.customCurve(interpolate) // 创建一个用户自定义插值曲线 299``` 300 301## ICurve<sup>9+</sup> 302 303曲线对象。 304 305 306### interpolate<sup>9+</sup> 307 308interpolate(fraction: number): number 309 310插值曲线的插值计算函数，可以通过传入的归一化时间参数返回当前的插值 311 312**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 313 314**系统能力：** SystemCapability.ArkUI.ArkUI.Full 315 316**参数：** 317 318| 参数名 | 类型 | 必填 | 说明 | 319| -------- | ------ | ---- | ------------------------------------------------------------ | 320| fraction | number | 是 | 当前的归一化时间参数。<br/>取值范围：[0,1]<br/>**说明：** <br/>设置的值小于0时，按0处理；设置的值大于1时，按1处理。 | 321 322**返回值：** 323 324| 类型 | 说明 | 325| ------ | ------------------------------------ | 326| number | 返回归一化time时间点对应的曲线插值。 | 327 328**示例：** 329 330```ts 331import { curves } from '@kit.ArkUI' 332let curveValue = curves.initCurve(Curve.EaseIn) // 创建一个默认先慢后快插值曲线 333let value: number = curveValue.interpolate(0.5) // 计算得到时间到一半时的插值 334``` 335 336 337## Curves.init<sup>(deprecated)</sup> 338 339init(curve?: Curve): string 340 341 342插值曲线的初始化函数，可以根据入参创建一个插值曲线对象，从API version9开始废弃，推荐使用[Curves.initCurve](#curvesinitcurve9)。 343 344**系统能力：** SystemCapability.ArkUI.ArkUI.Full 345 346**参数：** 347 348| 参数名 | 类型 | 必填 | 说明 | 349| ------ | --------------- | ---- | ----------------------------------- | 350| curve | [Curve](#curve枚举说明) | 否 | 曲线类型。<br/>默认值：Curve.Linear | 351 352 353## Curves.steps<sup>(deprecated)</sup> 354 355steps(count: number, end: boolean): string 356 357 358构造阶梯曲线对象，从API version9开始废弃，推荐使用[Curves. stepsCurve](#curvesstepscurve9)。 359 360**系统能力：** SystemCapability.ArkUI.ArkUI.Full 361 362**参数：** 363 364| 参数名 | 类型 | 必填 | 说明 | 365| ------ | ------- | ----| ------------------------------------------------------------ | 366| count | number | 是 | 阶梯的数量，需要为正整数。 | 367| end | boolean | 是 | 在每个间隔的起点或是终点发生阶跃变化。<br>-true：在终点发生阶跃变化。<br>-false：在起点发生阶跃变化。 | 368 369 370## Curves.cubicBezier<sup>(deprecated)</sup> 371 372cubicBezier(x1: number, y1: number, x2: number, y2: number): string 373 374 375构造三阶贝塞尔曲线对象，曲线的值必须处于0-1之间，API version9开始废弃，推荐使用 [Curves.cubicBezierCurve](#curvescubicbeziercurve9)。 376 377**系统能力：** SystemCapability.ArkUI.ArkUI.Full 378 379**参数：** 380| 参数名 | 类型 | 必填 | 说明 | 381| ---- | ------ | ---- | -------------- | 382| x1 | number | 是 | 确定贝塞尔曲线第一点横坐标。 | 383| y1 | number | 是 | 确定贝塞尔曲线第一点纵坐标。 | 384| x2 | number | 是 | 确定贝塞尔曲线第二点横坐标。 | 385| y2 | number | 是 | 确定贝塞尔曲线第二点纵坐标。 | 386 387 388## Curves.spring<sup>(deprecated)</sup> 389 390spring(velocity: number, mass: number, stiffness: number, damping: number): string 391 392 393构造弹簧曲线对象，从API version9开始废弃，推荐使用[Curves.springCurve](#curvesspringcurve9)。 394 395**系统能力：** SystemCapability.ArkUI.ArkUI.Full 396 397**参数：** 398 399| 参数名 | 类型 | 必填 | 说明 | 400| --------- | ------ | ---- | ----- | 401| velocity | number | 是 | 初始速度。是由外部因素对弹性动效产生的影响参数，其目的是保证对象从之前的运动状态平滑地过渡到弹性动效。 | 402| mass | number | 是 | 质量。弹性系统的受力对象，会对弹性系统产生惯性影响。质量越大，震荡的幅度越大，恢复到平衡位置的速度越慢。 | 403| stiffness | number | 是 | 刚度。是物体抵抗施加的力而形变的程度。在弹性系统中，刚度越大，抵抗变形的能力越强，恢复到平衡位置的速度就越快。 | 404| damping | number | 是 | 阻尼。是一个纯数，无真实的物理意义，用于描述系统在受到扰动后震荡及衰减的情形。阻尼越大，弹性运动的震荡次数越少、震荡幅度越小。 | 405 406## 整体示例 407 408```ts 409// xxx.ets 410import { curves } from '@kit.ArkUI' 411 412@Entry 413@Component 414struct ImageComponent { 415 @State widthSize: number = 200 416 @State heightSize: number = 200 417 418 build() { 419 Column() { 420 Text() 421 .margin({ top: 100 }) 422 .width(this.widthSize) 423 .height(this.heightSize) 424 .backgroundColor(Color.Red) 425 .onClick(() => { 426 let curve = curves.cubicBezierCurve(0.25, 0.1, 0.25, 1.0); 427 this.widthSize = curve.interpolate(0.5) * this.widthSize; 428 this.heightSize = curve.interpolate(0.5) * this.heightSize; 429 }) 430 .animation({ duration: 2000, curve: curves.stepsCurve(9, true) }) 431 }.width("100%").height("100%") 432 } 433} 434``` 435 436 437
