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