@ohos.curves (插值计算)

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

说明：

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

导入模块

import { curves } from '@kit.ArkUI';

curves.initCurve⁹⁺

initCurve(curve?: Curve): ICurve

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

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

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

参数：

返回值：

Curve

插值曲线和动效请参考贝塞尔曲线。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

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

|名称 |值|说明 | |——————-|–|————————————————————| |Linear |0|表示动画从头到尾的速度都是相同的。 | |Ease |1|表示动画以低速开始，然后加快，在结束前变慢，cubic-bezier(0.25, 0.1, 0.25, 1.0)。| |EaseIn |2|表示动画以低速开始，cubic-bezier(0.42, 0.0, 1.0, 1.0)。 | |EaseOut |3|表示动画以低速结束，cubic-bezier(0.0, 0.0, 0.58, 1.0)。 | |EaseInOut |4|表示动画以低速开始和结束，cubic-bezier(0.42, 0.0, 0.58, 1.0)。| |FastOutSlowIn |5|标准曲线，cubic-bezier(0.4, 0.0, 0.2, 1.0)。 | |LinearOutSlowIn |6|减速曲线，cubic-bezier(0.0, 0.0, 0.2, 1.0)。 | |FastOutLinearIn |7|加速曲线，cubic-bezier(0.4, 0.0, 1.0, 1.0)。 | |ExtremeDeceleration|8|急缓曲线，cubic-bezier(0.0, 0.0, 0.0, 1.0)。 | |Sharp |9|锐利曲线，cubic-bezier(0.33, 0.0, 0.67, 1.0)。 | |Rhythm |10|节奏曲线，cubic-bezier(0.7, 0.0, 0.2, 1.0)。 | |Smooth |11|平滑曲线，cubic-bezier(0.4, 0.0, 0.4, 1.0)。 | |Friction |12|阻尼曲线，cubic-bezier(0.2, 0.0, 0.2, 1.0)。 |

示例：

import { curves } from '@kit.ArkUI';
curves.initCurve(Curve.EaseIn) // 创建一个默认先慢后快插值曲线

curves.stepsCurve⁹⁺

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

构造阶梯曲线对象。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

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

参数：

返回值：

示例：

import { curves } from '@kit.ArkUI';
curves.stepsCurve(9, true)  //创建一个阶梯曲线

curves.cubicBezierCurve⁹⁺

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

构造三阶贝塞尔曲线对象，确保曲线的值在0到1之间。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

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

参数：

返回值：

示例：

import { curves } from '@kit.ArkUI';
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参数控制。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

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

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

返回值：

示例：

import { curves } from '@kit.ArkUI';
curves.springCurve(10, 1, 228, 30) // 创建一个弹簧插值曲线

curves.springMotion⁹⁺

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

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

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

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

参数：

返回值：

示例：

import { curves } from '@kit.ArkUI'
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混合使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

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

参数：

返回值：

示例：

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

 curves.interpolatingSpring¹⁰⁺

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

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

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

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

参数： |参数名 |类型 |必填 |说明 | |———|——|—-|—–| |velocity|number|是 |初始速度。外部因素对弹性动效产生的影响参数，目的是保证对象从之前的运动状态平滑地过渡到弹性动效。该速度是归一化速度，其值等于动画开始时的实际速度除以动画属性改变值。
取值范围：(-∞, +∞)| |mass |number|是 |质量。弹性系统的受力对象，会对弹性系统产生惯性影响。质量越大，震荡的幅度越大，恢复到平衡位置的速度越慢。
取值范围：(0, +∞)
说明：
设置的值小于等于0时，按1处理。| |stiffness|number|是 |刚度。表示物体抵抗施加的力而形变的程度。刚度越大，抵抗变形的能力越强，恢复到平衡位置的速度越快。
取值范围：(0, +∞)
说明：
设置的值小于等于0时，按1处理。| |damping |number|是 |阻尼。用于描述系统在受到扰动后震荡及衰减的情形。阻尼越大，弹性运动的震荡次数越少、震荡幅度越小。
取值范围：(0, +∞)
说明：
设置的值小于等于0时，按1处理。|

返回值：

示例：

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

curves.customCurve¹⁰⁺

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

构造自定义曲线对象。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

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

参数：

返回值：

示例：

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

ICurve⁹⁺

曲线对象，支持通过本模块中的curves.cubicBezierCurve、curves.interpolatingSpring等方法创建不同类型的曲线对象，并可通过曲线对象调用其interpolate的成员方法。

interpolate⁹⁺

interpolate(fraction: number): number

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

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

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

参数：

返回值：

示例：

import { curves } from '@kit.ArkUI'
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

参数： |参数名|类型 |必填 |说明 | |—-|——|—-|————–| |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

参数：

整体示例

// xxx.ets
import { curves } from '@kit.ArkUI';

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

你可能感兴趣的鸿蒙文章

harmony 鸿蒙ArkUI（方舟UI框架）

harmony 鸿蒙ARKUI_TextPickerCascadeRangeContent

harmony 鸿蒙ARKUI_TextPickerRangeContent

harmony 鸿蒙ArkUI_AnimateCompleteCallback

harmony 鸿蒙ArkUI_AttributeItem

harmony 鸿蒙ArkUI_ColorStop

harmony 鸿蒙ArkUI_ContextCallback

harmony 鸿蒙ArkUI_EventModule

harmony 鸿蒙ArkUI_ExpectedFrameRateRange

harmony 鸿蒙ArkUI_IntOffset