插值计算

导入模块

import Curves from '@ohos.curves'

Curves.initCurve9+

initCurve(curve?: Curve)：ICurve

插值曲线的初始化函数，可以根据入参创建一个插值曲线对象。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

返回值：

示例：

import Curves from '@ohos.curves'
Curves.initCurve(Curve.EaseIn) // 创建一个默认先慢后快插值曲线

Curve

从API version 9开始，该接口支持在ArkTS卡片中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

Curves.stepsCurve9+

stepsCurve(count: number, end: boolean)：ICurve

构造阶梯曲线对象。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

返回值：

示例：

import Curves from '@ohos.curves'
Curves.stepsCurve(9, true)  //创建一个阶梯曲线

Curves.cubicBezierCurve9+

cubicBezierCurve(x1: number, y1: number, x2: number, y2: number)：ICurve

构造三阶贝塞尔曲线对象，曲线的值必须处于0-1之间。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

返回值：

示例：

import Curves from '@ohos.curves'
Curves.cubicBezierCurve(0.1, 0.0, 0.1, 1.0) // 创建一个三阶贝塞尔曲线

Curves.springCurve9+

springCurve(velocity: number, mass: number, stiffness: number, damping: number)：ICurve

构造弹簧曲线对象。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

返回值：

示例：

import Curves from '@ohos.curves'
Curves.springCurve(100, 1, 228, 30) // 创建一个弹簧插值曲线

Curves.springMotion9+

springMotion(response?: number, dampingFraction?: number, overlapDuration?: number): ICurve

构造弹性动画曲线对象。如果对同一对象的同一属性进行多个弹性动画，每个动画会替换掉前一个动画，并继承之前的速度。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

返回值：

示例：

import Curves from '@ohos.curves'
Curves.springMotion() // 创建一个默认弹性动画曲线
Curves.springMotion(0.5) // 创建指定response、其余参数默认的弹性动画曲线
Curves.springMotion(0.5, 0.6) // 创建指定response和dampingFraction、其余参数默认的弹性动画曲线
Curves.springMotion(0.5, 0.6, 0) // 创建三个参数均自定义的弹性动画曲线

Curves.responsiveSpringMotion9+

responsiveSpringMotion(response?: number, dampingFraction?: number, overlapDuration?: number): ICurve

构造弹性跟手动画曲线对象，是springMotion的一种特例，仅默认参数不同，可与springMotion混合使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

返回值：

示例：

import Curves from '@ohos.curves'
Curves.responsiveSpringMotion() // 创建一个默认弹性跟手动画曲线

ICurve

interpolate9+

interpolate(fraction: number): number

插值曲线的插值计算函数，可以通过传入的归一化时间参数返回当前的插值

从API version 9开始，该接口支持在ArkTS卡片中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

返回值：

示例：

import Curves from '@ohos.curves'
let curveValue = Curves.initCurve(Curve.EaseIn) // 创建一个默认先慢后快插值曲线
let value: number = curveValue.interpolate(0.5) // 计算得到时间到一半时的插值

Curves.init(deprecated)

init(curve?: Curve): string

插值曲线的初始化函数，可以根据入参创建一个插值曲线对象，从API version9开始废弃，推荐使用Curves.initCurve。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

Curves.steps(deprecated)

steps(count: number, end: boolean): string

构造阶梯曲线对象，从API version9开始废弃，推荐使用[Curves. stepsCurve](# curvesstepscurve9)。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

Curves.cubicBezier(deprecated)

cubicBezier(x1: number, y1: number, x2: number, y2: number): string

构造三阶贝塞尔曲线对象，曲线的值必须处于0-1之间，API version9开始废弃，推荐使用 Curves.cubicBezierCurve。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

Curves.spring(deprecated)

spring(velocity: number, mass: number, stiffness: number, damping: number): string

构造弹簧曲线对象，从API version9开始废弃，推荐使用Curves.springCurve。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

整体示例

// xxx.ets
import Curves from '@ohos.curves'
@Entry
@Component
struct ImageComponent {
  @State widthSize: number = 200
  @State heightSize: number = 200

  build() {
    Column() {
      Text()
        .margin({top:100})
        .width(this.widthSize)
        .height(this.heightSize)
        .backgroundColor(Color.Red)
        .onClick(()=> {
          let curve = Curves.cubicBezierCurve(0.25, 0.1, 0.25, 1.0);
          this.widthSize = curve.interpolate(0.5) * this.widthSize;
          this.heightSize = curve.interpolate(0.5) * this.heightSize;
        })
        .animation({ duration: 2000 , curve: Curves.stepsCurve(9, true) })
    }.width("100%").height("100%")
  }
}