插值计算

2024-01-23 13:10 更新

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

说明

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

导入模块

  1. import Curves from '@ohos.curves'

Curves.initCurve9+

initCurve(curve?: Curve):ICurve

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

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

参数:

参数名

类型

必填

默认值

说明

curve

Curve

Curve.Linear

曲线类型。

默认值:Curve.Linear

返回值:

类型

说明

ICurve

曲线的插值对象。

示例:

  1. import Curves from '@ohos.curves'
  2. 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:在起点发生阶跃变化。

返回值:

类型

说明

ICurve

曲线的插值对象。

示例:

  1. import Curves from '@ohos.curves'
  2. 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

曲线的插值对象。

示例:

  1. import Curves from '@ohos.curves'
  2. 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

曲线的插值对象。

示例:

  1. import Curves from '@ohos.curves'
  2. 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, +∞)。

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

返回值:

类型

说明

ICurve

曲线对象。

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

示例:

  1. import Curves from '@ohos.curves'
  2. Curves.springMotion() // 创建一个默认弹性动画曲线
  3. Curves.springMotion(0.5) // 创建指定response、其余参数默认的弹性动画曲线
  4. Curves.springMotion(0.5, 0.6) // 创建指定response和dampingFraction、其余参数默认的弹性动画曲线
  5. 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构造曲线。如果使用跟手动画,推荐使用默认参数的弹性跟手动画曲线。

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

返回值:

类型

说明

ICurve

曲线对象。

说明:

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

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

示例:

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

ICurve

interpolate9+

interpolate(fraction: number): number

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

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

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

参数:

参数名

类型

必填

说明

fraction

number

当前的归一化时间参数。

取值范围:[0,1]

返回值:

类型

说明

number

返回归一化time时间点对应的曲线插值。

示例:

  1. import Curves from '@ohos.curves'
  2. let curveValue = Curves.initCurve(Curve.EaseIn) // 创建一个默认先慢后快插值曲线
  3. 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

Curves.steps(deprecated)

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

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

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

参数:

参数名

类型

必填

说明

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

阻尼。是一个纯数,无真实的物理意义,用于描述系统在受到扰动后震荡及衰减的情形。阻尼越大,弹性运动的震荡次数越少、震荡幅度越小。

整体示例

  1. // xxx.ets
  2. import Curves from '@ohos.curves'
  3. @Entry
  4. @Component
  5. struct ImageComponent {
  6. @State widthSize: number = 200
  7. @State heightSize: number = 200
  8. build() {
  9. Column() {
  10. Text()
  11. .margin({top:100})
  12. .width(this.widthSize)
  13. .height(this.heightSize)
  14. .backgroundColor(Color.Red)
  15. .onClick(()=> {
  16. let curve = Curves.cubicBezierCurve(0.25, 0.1, 0.25, 1.0);
  17. this.widthSize = curve.interpolate(0.5) * this.widthSize;
  18. this.heightSize = curve.interpolate(0.5) * this.heightSize;
  19. })
  20. .animation({ duration: 2000 , curve: Curves.stepsCurve(9, true) })
  21. }.width("100%").height("100%")
  22. }
  23. }

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号