1# @ohos.curves (插值计算) 2 3本模块提供设置动画插值曲线功能，用于构造阶梯曲线对象、构造三阶贝塞尔曲线对象和构造弹簧曲线对象。 4 5> **说明：** 6> 7> 本模块首批接口从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 导入模块 11 12```ts 13import Curves from '@ohos.curves' 14``` 15 16 17## Curves.initCurve<sup>9+</sup> 18 19initCurve(curve?: Curve)：ICurve 20 21 22插值曲线的初始化函数，可以根据入参创建一个插值曲线对象。 23 24**系统能力：** SystemCapability.ArkUI.ArkUI.Full 25 26**参数：** 27 28| 参数名 | 类型 | 必填 | 默认值 | 说明 | 29| ------ | ------------------------------------------------------------ | ---- | ------------ | ---------- | 30| curve | [Curve](../arkui-ts/ts-appendix-enums.md#curve) | 否 | Curve.Linear | 曲线类型。 | 31 32**返回值：** 33 34| 类型 | 说明 | 35| ---------------------------------- | ---------------- | 36| [ICurve](#icurve) | 曲线的插值对象。 | 37 38 39**示例：** 40 41```ts 42import Curves from '@ohos.curves' 43Curves.initCurve(Curve.EaseIn) // 创建一个默认先慢后快插值曲线 44``` 45 46 47## Curves.stepsCurve<sup>9+</sup> 48 49stepsCurve(count: number, end: boolean)：ICurve 50 51 52构造阶梯曲线对象。 53 54**系统能力：** SystemCapability.ArkUI.ArkUI.Full 55 56**参数：** 57 58| 参数名 | 类型 | 必填 | 说明 | 59| ------ | ------- | ----| ------------------------------------------------------------ | 60| count | number | 是 | 阶梯的数量，需要为正整数。<br/>取值范围：[0, +∞)<br/>**说明：** <br/>设置小于0的值时，按值为0处理。 | 61| end | boolean | 是 | 在每个间隔的起点或是终点发生阶跃变化。<br>-true：在终点发生阶跃变化。<br>-false：在起点发生阶跃变化。 | 62 63**返回值：** 64 65| 类型 | 说明 | 66| ---------------------------------- | ---------------- | 67| [ICurve](#icurve) | 曲线的插值对象。 | 68 69 70**示例：** 71 72```ts 73import Curves from '@ohos.curves' 74Curves.stepsCurve(9, true) //创建一个阶梯曲线 75``` 76 77 78## Curves.cubicBezierCurve<sup>9+</sup> 79 80cubicBezierCurve(x1: number, y1: number, x2: number, y2: number)：ICurve 81 82 83构造三阶贝塞尔曲线对象，曲线的值必须处于0-1之间。 84 85**系统能力：** SystemCapability.ArkUI.ArkUI.Full 86 87**参数：** 88| 参数名 | 类型 | 必填 | 说明 | 89| ------ | ------ | ---- | ------------------------------------------------------------ | 90| x1 | number | 是 | 确定贝塞尔曲线第一点横坐标。<br/>取值范围：[0, 1]<br/>**说明：** <br/>设置的值小于0时，按0处理；设置的值大于1时，按1处理。 | 91| y1 | number | 是 | 确定贝塞尔曲线第一点纵坐标。<br/>取值范围：(-∞, +∞) | 92| x2 | number | 是 | 确定贝塞尔曲线第二点横坐标。<br/>取值范围：[0, 1]<br/>**说明：** <br/>设置的值小于0时，按0处理；设置的值大于1时，按1处理。 | 93| y2 | number | 是 | 确定贝塞尔曲线第二点纵坐标。<br/>取值范围：(-∞, +∞) | 94 95**返回值：** 96 97| 类型 | 说明 | 98| ---------------------------------- | ---------------- | 99| [ICurve](#icurve) | 曲线的插值对象。 | 100 101 102**示例：** 103 104```ts 105import Curves from '@ohos.curves' 106Curves.cubicBezierCurve(0.1, 0.0, 0.1, 1.0) // 创建一个三阶贝塞尔曲线 107``` 108 109 110## Curves.springCurve<sup>9+</sup> 111 112springCurve(velocity: number, mass: number, stiffness: number, damping: number)：ICurve 113 114 115构造弹簧曲线对象。 116 117**系统能力：** SystemCapability.ArkUI.ArkUI.Full 118 119**参数：** 120| 参数名 | 类型 | 必填 | 说明 | 121| --------- | ------ | ---- | ------------------------------------------------------------ | 122| velocity | number | 是 | 初始速度。是由外部因素对弹性动效产生的影响参数，其目的是保证对象从之前的运动状态平滑的过渡到弹性动效。<br/>取值范围：(-∞, +∞) | 123| mass | number | 是 | 质量。弹性系统的受力对象，会对弹性系统产生惯性影响。质量越大，震荡的幅度越大，恢复到平衡位置的速度越慢。<br/>取值范围：(0, +∞)<br/>**说明：** <br/>设置的值小于0时，按1处理。 | 124| stiffness | number | 是 | 刚度。是物体抵抗施加的力而形变的程度。在弹性系统中，刚度越大，抵抗变形的能力越强，恢复到平衡位置的速度就越快。<br/>取值范围：(0, +∞)<br/>**说明：** <br/>设置的值小于0时，按1处理。 | 125| damping | number | 是 | 阻尼。是一个纯数，无真实的物理意义，用于描述系统在受到扰动后震荡及衰减的情形。阻尼越大，弹性运动的震荡次数越少、震荡幅度越小。<br/>取值范围：(0, +∞)<br/>**说明：** <br/>设置的值小于0时，按1处理。 | 126 127 128**返回值：** 129 130| 类型 | 说明 | 131| ---------------------------------- | ---------------- | 132| [ICurve](#icurve)| 曲线的插值对象。 | 133 134**示例：** 135 136```ts 137import Curves from '@ohos.curves' 138Curves.springCurve(100, 1, 228, 30) // 创建一个弹簧插值曲线 139``` 140 141 142## Curves.springMotion<sup>9+</sup> 143 144springMotion(response?: number, dampingFraction?: number, overlapDuration?: number): ICurve 145 146构造弹性动画曲线对象。如果对同一对象的同一属性进行多个弹性动画，每个动画会替换掉前一个动画，并继承之前的速度。 147 148**系统能力：** SystemCapability.ArkUI.ArkUI.Full 149 150**参数：** 151| 参数名 | 类型 | 必填 | 说明 | 152| --------- | ------ | ---- | ----- | 153| response | number | 否 | 弹簧自然振动周期，决定弹簧复位的速度。<br/>默认值：0.55<br/>单位：秒<br/>取值范围：[0, +∞)<br/>**说明：** <br/>设置小于0的值时，按默认值0.55处理。 | 154| dampingFraction | number | 否 | 阻尼系数。<br/>0表示无阻尼，一直处于震荡状态；<br/>大于0小于1的值为欠阻尼，运动过程中会超出目标值；<br/>等于1为临界阻尼；<br/>大于1为过阻尼，运动过程中逐渐趋于目标值。<br/>默认值：0.825<br/>单位：秒<br/>取值范围：[0, +∞)<br/>**说明：** <br/>设置小于0的值时，按默认值0.55处理。 | 155| 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)中的duration参数不生效，动画持续时间取决于springMotion动画曲线参数和之前的速度。时间不能归一，故不能通过该曲线的interpolate函数获得插值。 | 156 157 158**返回值：** 159 160| 类型 | 说明 | 161| ---------------------------------- | ---------------- | 162| [ICurve](#icurve)| 曲线对象。<br>**说明:** 弹性动画曲线为物理曲线，[animation](../arkui-ts/ts-animatorproperty.md)、[animateTo](../arkui-ts/ts-explicit-animation.md)中的duration参数不生效，动画持续时间取决于springMotion动画曲线参数和之前的速度。时间不能归一，故不能通过该曲线的[interpolate](#interpolate)函数获得插值。 | 163 164**示例：** 165 166```ts 167import Curves from '@ohos.curves' 168Curves.springMotion() // 创建一个默认弹性动画曲线 169Curves.springMotion(0.5) // 创建指定response、其余参数默认的弹性动画曲线 170Curves.springMotion(0.5, 0.6) // 创建指定response和dampingFraction、其余参数默认的弹性动画曲线 171Curves.springMotion(0.5, 0.6, 0) // 创建三个参数均自定义的弹性动画曲线 172``` 173 174 175## Curves.responsiveSpringMotion<sup>9+</sup> 176 177responsiveSpringMotion(response?: number, dampingFraction?: number, overlapDuration?: number): ICurve 178 179构造弹性跟手动画曲线对象，是[springMotion](#curvesspringmotion9)的一种特例，仅默认参数不同，可与springMotion混合使用。 180 181**系统能力：** SystemCapability.ArkUI.ArkUI.Full 182 183**参数：** 184| 参数名 | 类型 | 必填 | 说明 | 185| --------- | ------ | ---- | ----- | 186| response | number | 否 | 解释同springMotion中的response。<br/>默认值：0.15<br/>单位：秒<br/>取值范围：[0, +∞)<br/>**说明：** <br/>设置小于0的值时，按默认值0.15处理。 | 187| dampingFraction | number | 否 | 解释同springMotion中的dampingFraction。<br/>默认值：0.86<br/>单位：秒<br/>取值范围：[0, +∞)<br/>**说明：** <br/>设置小于0的值时，按默认值0.86处理。 | 188| 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)中的duration参数不生效，动画持续时间取决于responsiveSpringMotion动画曲线参数和之前的速度，也不能通过该曲线的interpolate函数获得插值。 | 189 190**返回值：** 191 192| 类型 | 说明 | 193| ---------------------------------- | ---------------- | 194| [ICurve](#icurve)| 曲线对象。<br>**说明:** <br>1、弹性跟手动画曲线为springMotion的一种特例，仅默认值不同。如果使用自定义参数的弹性曲线，推荐使用springMotion构造曲线；如果使用跟手动画，推荐使用默认参数的弹性跟手动画曲线。<br/>2、[animation](../arkui-ts/ts-animatorproperty.md)、[animateTo](../arkui-ts/ts-explicit-animation.md)中的duration参数不生效，动画持续时间取决于responsiveSpringMotion动画曲线参数和之前的速度，也不能通过该曲线的[interpolate](#interpolate)函数获得插值。 | 195 196**示例：** 197 198```ts 199import Curves from '@ohos.curves' 200Curves.responsiveSpringMotion() // 创建一个默认弹性跟手动画曲线 201``` 202 203 204## ICurve 205 206 207### interpolate 208 209interpolate(fraction: number): number 210 211插值曲线的插值计算函数，可以通过传入的归一化时间参数返回当前的插值 212 213从API version 9开始，该接口支持在ArkTS卡片中使用。 214 215**系统能力：** SystemCapability.ArkUI.ArkUI.Full 216 217**参数：** 218 219| 参数名 | 类型 | 必填 | 说明 | 220| -------- | ------ | ---- | ------------------------------------------------------------ | 221| fraction | number | 是 | 当前的归一化时间参数。<br/>取值范围：[0,1]<br/>**说明：** <br/>设置的值小于0时，按0处理；设置的值大于1时，按1处理。 | 222 223**返回值：** 224 225| 类型 | 说明 | 226| ------ | ------------------------------------ | 227| number | 返回归一化time时间点对应的曲线插值。 | 228 229**示例：** 230 231```ts 232import Curves from '@ohos.curves' 233let curve = Curves.initCurve(Curve.EaseIn) // 创建一个默认先慢后快插值曲线 234let value: number = curve.interpolate(0.5) // 计算得到时间到一半时的插值 235``` 236 237 238## Curves.init<sup>(deprecated)</sup> 239 240init(curve?: Curve): string 241 242 243插值曲线的初始化函数，可以根据入参创建一个插值曲线对象，从API version9开始废弃，推荐使用[Curves.initCurve](#curvesinitcurve9)。 244 245**系统能力：** SystemCapability.ArkUI.ArkUI.Full 246 247**参数：** 248 249| 参数名 | 类型 | 必填 | 默认值 | 说明 | 250| ------ | ------------------------------------------------------------ | ---- | ------------ | ---------- | 251| curve |[Curve](../arkui-ts/ts-appendix-enums.md#curve) | 否 | Curve.Linear | 曲线类型。 | 252 253 254## Curves.steps<sup>(deprecated)</sup> 255 256steps(count: number, end: boolean): string 257 258 259构造阶梯曲线对象，从API version9开始废弃，推荐使用[Curves. stepsCurve](# curvesstepscurve9)。 260 261**系统能力：** SystemCapability.ArkUI.ArkUI.Full 262 263**参数：** 264 265| 参数名 | 类型 | 必填 | 说明 | 266| ------ | ------- | ----| ------------------------------------------------------------ | 267| count | number | 是 | 阶梯的数量，需要为正整数。 | 268| end | boolean | 是 | 在每个间隔的起点或是终点发生阶跃变化。<br>-true：在终点发生阶跃变化。<br>-false：在起点发生阶跃变化。 | 269 270 271## Curves.cubicBezier<sup>(deprecated)</sup> 272 273cubicBezier(x1: number, y1: number, x2: number, y2: number): string 274 275 276构造三阶贝塞尔曲线对象，曲线的值必须处于0-1之间，API version9开始废弃，推荐使用 [Curves.cubicBezierCurve](#curvescubicbeziercurve9)。 277 278**系统能力：** SystemCapability.ArkUI.ArkUI.Full 279 280**参数：** 281| 参数名 | 类型 | 必填 | 说明 | 282| ---- | ------ | ---- | -------------- | 283| x1 | number | 是 | 确定贝塞尔曲线第一点横坐标。 | 284| y1 | number | 是 | 确定贝塞尔曲线第一点纵坐标。 | 285| x2 | number | 是 | 确定贝塞尔曲线第二点横坐标。 | 286| y2 | number | 是 | 确定贝塞尔曲线第二点纵坐标。 | 287 288 289## Curves.spring<sup>(deprecated)</sup> 290 291spring(velocity: number, mass: number, stiffness: number, damping: number): string 292 293 294构造弹簧曲线对象，从API version9开始废弃，推荐使用[Curves.springCurve](#curvesspringcurve9)。 295 296**系统能力：** SystemCapability.ArkUI.ArkUI.Full 297 298**参数：** 299 300| 参数名 | 类型 | 必填 | 说明 | 301| --------- | ------ | ---- | ----- | 302| velocity | number | 是 | 初始速度。是由外部因素对弹性动效产生的影响参数，其目的是保证对象从之前的运动状态平滑的过渡到弹性动效。 | 303| mass | number | 是 | 质量。弹性系统的受力对象，会对弹性系统产生惯性影响。质量越大，震荡的幅度越大，恢复到平衡位置的速度越慢。 | 304| stiffness | number | 是 | 刚度。是物体抵抗施加的力而形变的程度。在弹性系统中，刚度越大，抵抗变形的能力越强，恢复到平衡位置的速度就越快。 | 305| damping | number | 是 | 阻尼。是一个纯数，无真实的物理意义，用于描述系统在受到扰动后震荡及衰减的情形。阻尼越大，弹性运动的震荡次数越少、震荡幅度越小。 | 306 307## 整体示例 308 309```ts 310// xxx.ets 311import Curves from '@ohos.curves' 312@Entry 313@Component 314struct ImageComponent { 315 @State widthSize: number = 200 316 @State heightSize: number = 200 317 318 build() { 319 Column() { 320 Text() 321 .margin({top:100}) 322 .width(this.widthSize) 323 .height(this.heightSize) 324 .backgroundColor(Color.Red) 325 .onClick(()=> { 326 let curve = Curves.cubicBezierCurve(0.25, 0.1, 0.25, 1.0); 327 this.widthSize = curve.interpolate(0.5) * this.widthSize; 328 this.heightSize = curve.interpolate(0.5) * this.heightSize; 329 }) 330 .animation({ duration: 2000 , curve: Curves.stepsCurve(9, true) }) 331 }.width("100%").height("100%") 332 } 333} 334``` 335 336 337
