@ohos.curves (插值计算)

本模块提供设置动画插值曲线功能，用于构造阶梯曲线对象、构造三阶贝塞尔曲线对象和构造弹簧曲线对象。

说明：

本模块首批接口从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

导入模块

import Curves from '@ohos.curves'

Curves.initCurve⁹⁺

initCurve(curve?: Curve): ICurve

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

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

参数：

返回值：

Curve

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

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

示例：

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

Curves.stepsCurve⁹⁺

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

构造阶梯曲线对象。

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

参数：

返回值：

示例：

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

Curves.cubicBezierCurve⁹⁺

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.springCurve⁹⁺

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

构造弹簧曲线对象，曲线形状由弹簧参数决定，动画时长受animation、animateTo中的duration参数控制。

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

参数：

返回值：

示例：

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

Curves.springMotion⁹⁺

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.responsiveSpringMotion⁹⁺

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

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

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

参数：

返回值：

示例：

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

Curves.interpolatingSpring¹⁰⁺

interpolatingSpring(velocity: number, mass: number, stiffness: number, damping: number): ICurve

构造插值器弹簧曲线对象，生成一条从0到1的动画曲线，实际动画值根据曲线进行插值计算。动画时间由曲线参数决定，不受animation、animateTo中的duration参数控制。

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

参数：

返回值：

示例：

import Curves from '@ohos.curves'
Curves.interpolatingSpring(10, 1, 228, 30) // 创建一个时长由弹簧参数决定的弹簧插值曲线

Curves.customCurve¹⁰⁺

customCurve(interpolate: (fraction: number) => number): ICurve

构造自定义曲线对象。

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

参数：

返回值：

示例：

import Curves from '@ohos.curves'
let interpolate = (fraction:number):number => {
  return Math.sqrt(fraction)
}
let curve = Curves.customCurve(interpolate) // 创建一个用户自定义插值曲线

ICurve

interpolate⁹⁺

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。

系统能力： 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%")
  }
}