插值计算

About 7 min

插值计算

说明: 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

导入模块

import curves from '@ohos.curves'
1

权限

curves.init

init(curve?: Curve): Object

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

  • 参数

    参数名

    类型

    必填

    默认值

    说明

    curve

    Curve

    Linear

    曲线对象。

  • 返回值

    曲线对象Object。

curves.steps

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

构造阶梯曲线对象。

  • 参数:

    参数名

    类型

    必填

    默认值

    说明

    count

    number

    -

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

    end

    boolean

    true

    在每个间隔的起点或是终点发生阶跃变化 ,默认值为true,即在终点发生阶跃变化。

  • 返回值

    曲线对象Object。

curves.cubicBezier

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

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

  • 参数

    参数名

    类型

    必填

    说明

    x1

    number

    确定贝塞尔曲线第一点横坐标。

    y1

    number

    确定贝塞尔曲线第一点纵坐标。

    x2

    number

    确定贝塞尔曲线第二点横坐标。

    y2

    number

    确定贝塞尔曲线第二点纵坐标。

  • 返回值

    曲线对象Object。

curves.spring

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

构造弹簧曲线对象。

  • 参数

    参数名

    类型

    必填

    说明

    velocity

    number

    初始速度。

    mass

    number

    质量。

    stiffness

    number

    刚度。

    damping

    number

    阻尼。

  • 返回值

    曲线对象Object。

示例

import Curves from '@ohos.curves'
let curve1 = Curves.init() // 创建一个默认线性插值曲线
let curve2 = Curves.init(Curve.EaseIn) // 创建一个默认先慢后快插值曲线
let curve3 = Curves.spring(100, 1, 228, 30) // 创建一个弹簧插值曲线
let curve3 = Curves.cubicBezier(0.1, 0.0, 0.1, 1.0) // 创建一个三阶贝塞尔曲线
1
2
3
4
5

曲线对象只能通过上面的接口创建。

接口名称

功能描述

interpolate(time: number): number

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

time: 当前的归一化时间参数,有效值范围0到1。

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

  • 示例

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

整体示例

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.cubicBezier(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.spring(0.25, 0.1, 0.25, 1.0)})
    }.width("100%").height("100%")
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22