插值计算

2024-01-23 13:10 更新

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

说明

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

导入模块


import Curves from '@ohos.curves'

Curves.initCurve9+

initCurve(curve?: Curve)：ICurve

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

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

参数：

参数名	类型	必填	默认值	说明
curve	Curve	否	Curve.Linear	曲线类型。默认值：Curve.Linear

参数名

类型

必填

默认值

说明

curve

Curve

否

Curve.Linear

曲线类型。

默认值：Curve.Linear

返回值：

类型	说明
ICurve	曲线的插值对象。

示例：


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

Curve

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

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

名称	描述
Linear	表示动画从头到尾的速度都是相同的。
Ease	表示动画以低速开始，然后加快，在结束前变慢，CubicBezier(0.25, 0.1, 0.25, 1.0)。
EaseIn	表示动画以低速开始，CubicBezier(0.42, 0.0, 1.0, 1.0)。
EaseOut	表示动画以低速结束，CubicBezier(0.0, 0.0, 0.58, 1.0)。
EaseInOut	表示动画以低速开始和结束，CubicBezier(0.42, 0.0, 0.58, 1.0)。
FastOutSlowIn	标准曲线，cubic-bezier(0.4, 0.0, 0.2, 1.0)。
LinearOutSlowIn	减速曲线，cubic-bezier(0.0, 0.0, 0.2, 1.0)。
FastOutLinearIn	加速曲线，cubic-bezier(0.4, 0.0, 1.0, 1.0)。
ExtremeDeceleration	急缓曲线，cubic-bezier(0.0, 0.0, 0.0, 1.0)。
Sharp	锐利曲线，cubic-bezier(0.33, 0.0, 0.67, 1.0)。
Rhythm	节奏曲线，cubic-bezier(0.7, 0.0, 0.2, 1.0)。
Smooth	平滑曲线，cubic-bezier(0.4, 0.0, 0.4, 1.0)。
Friction	阻尼曲线，CubicBezier(0.2, 0.0, 0.2, 1.0)。

Curves.stepsCurve9+

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

构造阶梯曲线对象。

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

参数：

参数名	类型	必填	说明
count	number	是	阶梯的数量，需要为正整数。取值范围：[1, +∞)
end	boolean	是	在每个间隔的起点或是终点发生阶跃变化。 -true：在终点发生阶跃变化。 -false：在起点发生阶跃变化。

参数名

类型

必填

说明

count

number

是

阶梯的数量，需要为正整数。

取值范围：[1, +∞)

end

boolean

是

在每个间隔的起点或是终点发生阶跃变化。

-true：在终点发生阶跃变化。

-false：在起点发生阶跃变化。

返回值：

类型	说明
ICurve	曲线的插值对象。

示例：


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

参数：

参数名	类型	必填	说明
x1	number	是	确定贝塞尔曲线第一点横坐标。取值范围：[0, 1]
y1	number	是	确定贝塞尔曲线第一点纵坐标。取值范围：(-∞, +∞)
x2	number	是	确定贝塞尔曲线第二点横坐标。取值范围：[0, 1]
y2	number	是	确定贝塞尔曲线第二点纵坐标。取值范围：(-∞, +∞)

返回值：

类型	说明
ICurve	曲线的插值对象。

示例：


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

参数：

参数名	类型	必填	说明
velocity	number	是	初始速度。是由外部因素对弹性动效产生的影响参数，其目的是保证对象从之前的运动状态平滑的过渡到弹性动效。取值范围：(-∞, +∞)
mass	number	是	质量。弹性系统的受力对象，会对弹性系统产生惯性影响。质量越大，震荡的幅度越大，恢复到平衡位置的速度越慢。取值范围：(0, +∞)
stiffness	number	是	刚度。是物体抵抗施加的力而形变的程度。在弹性系统中，刚度越大，抵抗变形的能力越强，恢复到平衡位置的速度就越快。取值范围：(0, +∞)
damping	number	是	阻尼。是一个纯数，无真实的物理意义，用于描述系统在受到扰动后震荡及衰减的情形。阻尼越大，弹性运动的震荡次数越少、震荡幅度越小。取值范围：(0, +∞)

返回值：

类型	说明
ICurve	曲线的插值对象。

示例：


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

参数：

参数名	类型	必填	说明
response	number	否	弹簧自然振动周期，决定弹簧复位的速度。默认值：0.55 单位：秒取值范围：[0, +∞)
dampingFraction	number	否	阻尼系数。 0表示无阻尼，一直处于震荡状态；大于0小于1的值为欠阻尼，运动过程中会超出目标值；等于1为临界阻尼；大于1为过阻尼，运动过程中逐渐趋于目标值。默认值：0.825 单位：秒取值范围：[0, +∞)
overlapDuration	number	否	弹性动画衔接时长。发生动画继承时，如果前后两个弹性动画response不一致，response参数会在overlapDuration时间内平滑过渡。默认值：0 单位：秒取值范围：[0, +∞)。弹性动画曲线为物理曲线，animation、animateTo中的duration参数不生效，动画持续时间取决于springMotion动画曲线参数和之前的速度。时间不能归一，故不能通过该曲线的interpolate函数获得插值。

参数名

类型

必填

说明

response

number

否

弹簧自然振动周期，决定弹簧复位的速度。

默认值：0.55

单位：秒

取值范围：[0, +∞)

dampingFraction

number

否

阻尼系数。

0表示无阻尼，一直处于震荡状态；大于0小于1的值为欠阻尼，运动过程中会超出目标值；等于1为临界阻尼；大于1为过阻尼，运动过程中逐渐趋于目标值。

默认值：0.825

单位：秒

取值范围：[0, +∞)

overlapDuration

number

否

弹性动画衔接时长。发生动画继承时，如果前后两个弹性动画response不一致，response参数会在overlapDuration时间内平滑过渡。

默认值：0

单位：秒

取值范围：[0, +∞)。

弹性动画曲线为物理曲线，animation、animateTo中的duration参数不生效，动画持续时间取决于springMotion动画曲线参数和之前的速度。时间不能归一，故不能通过该曲线的interpolate函数获得插值。

返回值：

类型	说明
ICurve	曲线对象。说明: 弹性动画曲线为物理曲线，animation、animateTo中的duration参数不生效，动画持续时间取决于springMotion动画曲线参数和之前的速度。时间不能归一，故不能通过该曲线的interpolate函数获得插值。

类型

说明

ICurve

曲线对象。

说明: 弹性动画曲线为物理曲线，animation、animateTo中的duration参数不生效，动画持续时间取决于springMotion动画曲线参数和之前的速度。时间不能归一，故不能通过该曲线的interpolate函数获得插值。

示例：


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

参数：

参数名	类型	必填	说明
response	number	否	弹簧自然振动周期，决定弹簧复位的速度。默认值：0.15 单位：秒取值范围：[0, +∞)
dampingFraction	number	否	阻尼系数。 0表示无阻尼，一直处于震荡状态；大于0小于1的值为欠阻尼，运动过程中会超出目标值；等于1为临界阻尼；大于1为过阻尼，运动过程中逐渐趋于目标值。默认值：0.86 单位：秒取值范围：[0, +∞)
overlapDuration	number	否	弹性动画衔接时长。发生动画继承时，如果前后两个弹性动画response不一致，response参数会在overlapDuration时间内平滑过渡。默认值：0.25 单位：秒取值范围：[0, +∞) 弹性跟手动画曲线为springMotion的一种特例，仅默认值不同。如果使用自定义参数的弹性曲线，推荐使用springMotion构造曲线。如果使用跟手动画，推荐使用默认参数的弹性跟手动画曲线。 animation、animateTo中的duration参数不生效，动画持续时间取决于responsiveSpringMotion动画曲线参数和之前的速度，也不能通过该曲线的interpolate函数获得插值。

参数名

类型

必填

说明

response

number

否

弹簧自然振动周期，决定弹簧复位的速度。

默认值：0.15

单位：秒

取值范围：[0, +∞)

dampingFraction

number

否

阻尼系数。

默认值：0.86

单位：秒

取值范围：[0, +∞)

overlapDuration

number

否

弹性动画衔接时长。发生动画继承时，如果前后两个弹性动画response不一致，response参数会在overlapDuration时间内平滑过渡。

默认值：0.25

单位：秒

取值范围：[0, +∞)

弹性跟手动画曲线为springMotion的一种特例，仅默认值不同。如果使用自定义参数的弹性曲线，推荐使用springMotion构造曲线。如果使用跟手动画，推荐使用默认参数的弹性跟手动画曲线。

animation、animateTo中的duration参数不生效，动画持续时间取决于responsiveSpringMotion动画曲线参数和之前的速度，也不能通过该曲线的interpolate函数获得插值。

返回值：

类型	说明
ICurve	曲线对象。说明: 1.弹性跟手动画曲线为springMotion的一种特例，仅默认值不同。如果使用自定义参数的弹性曲线，推荐使用springMotion构造曲线；如果使用跟手动画，推荐使用默认参数的弹性跟手动画曲线。 2.animation、animateTo中的duration参数不生效，动画持续时间取决于responsiveSpringMotion动画曲线参数和之前的速度，也不能通过该曲线的interpolate函数获得插值。

类型

说明

ICurve

曲线对象。

说明:

1.弹性跟手动画曲线为springMotion的一种特例，仅默认值不同。如果使用自定义参数的弹性曲线，推荐使用springMotion构造曲线；如果使用跟手动画，推荐使用默认参数的弹性跟手动画曲线。

2.animation、animateTo中的duration参数不生效，动画持续时间取决于responsiveSpringMotion动画曲线参数和之前的速度，也不能通过该曲线的interpolate函数获得插值。

示例：


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

ICurve

interpolate9+

interpolate(fraction: number): number

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

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

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

参数：

参数名	类型	必填	说明
fraction	number	是	当前的归一化时间参数。取值范围：[0,1]

参数名

类型

必填

说明

fraction

number

是

当前的归一化时间参数。

取值范围：[0,1]

返回值：

类型	说明
number	返回归一化time时间点对应的曲线插值。

示例：


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

参数：

参数名	类型	必填	默认值	说明
curve	Curve	否	Curve.Linear	曲线类型。默认值：Curve.Linear

参数名

类型

必填

默认值

说明

curve

Curve

否

Curve.Linear

曲线类型。

默认值：Curve.Linear

Curves.steps(deprecated)

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

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

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

参数：

参数名	类型	必填	说明
count	number	是	阶梯的数量，需要为正整数。
end	boolean	是	在每个间隔的起点或是终点发生阶跃变化。 -true：在终点发生阶跃变化。 -false：在起点发生阶跃变化。

参数名

类型

必填

说明

count

number

是

阶梯的数量，需要为正整数。

end

boolean

是

在每个间隔的起点或是终点发生阶跃变化。

-true：在终点发生阶跃变化。

-false：在起点发生阶跃变化。

Curves.cubicBezier(deprecated)

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

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

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

参数：

参数名	类型	必填	说明
x1	number	是	确定贝塞尔曲线第一点横坐标。
y1	number	是	确定贝塞尔曲线第一点纵坐标。
x2	number	是	确定贝塞尔曲线第二点横坐标。
y2	number	是	确定贝塞尔曲线第二点纵坐标。

Curves.spring(deprecated)

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

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

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

参数：

参数名	类型	必填	说明
velocity	number	是	初始速度。是由外部因素对弹性动效产生的影响参数，其目的是保证对象从之前的运动状态平滑的过渡到弹性动效。
mass	number	是	质量。弹性系统的受力对象，会对弹性系统产生惯性影响。质量越大，震荡的幅度越大，恢复到平衡位置的速度越慢。
stiffness	number	是	刚度。是物体抵抗施加的力而形变的程度。在弹性系统中，刚度越大，抵抗变形的能力越强，恢复到平衡位置的速度就越快。
damping	number	是	阻尼。是一个纯数，无真实的物理意义，用于描述系统在受到扰动后震荡及衰减的情形。阻尼越大，弹性运动的震荡次数越少、震荡幅度越小。

整体示例


// 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%")
  }
}