1# 插值计算 2 3> **说明：** 4> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 5 6 7## 导入模块 8 9``` 10import curves from '@ohos.curves' 11``` 12 13 14## 权限 15 16无 17 18 19## curves.init 20 21init(curve?: Curve): Object 22 23 24插值曲线的初始化函数，可以根据入参创建一个插值曲线对象。 25 26 27- 参数 28 | 参数名 | 类型 | 必填 | 默认值 | 说明 | 29 | -------- | -------- | -------- | -------- | -------- | 30 | curve | Curve | 否 | Linear | 曲线对象。 | 31 32- 返回值 33 曲线对象Object。 34 35 36## curves.steps 37 38steps(count: number, end: boolean): Object 39 40 41构造阶梯曲线对象。 42 43 44- 参数： 45 | 参数名 | 类型 | 必填 | 默认值 | 说明 | 46 | -------- | -------- | -------- | -------- | -------- | 47 | count | number | 是 | - | 阶梯的数量，需要为正整数。 | 48 | end | boolean | 是 | true | 在每个间隔的起点或是终点发生阶跃变化 ，默认值为true，即在终点发生阶跃变化。 | 49 50- 返回值 51 曲线对象Object。 52 53 54## curves.cubicBezier 55 56cubicBezier(x1: number, y1: number, x2: number, y2: number): Object 57 58 59构造三阶贝塞尔曲线对象，曲线的值必须处于0-1之间。 60 61 62- 参数 63 | 参数名 | 类型 | 必填 | 说明 | 64 | -------- | -------- | -------- | -------- | 65 | x1 | number | 是 | 确定贝塞尔曲线第一点横坐标。 | 66 | y1 | number | 是 | 确定贝塞尔曲线第一点纵坐标。 | 67 | x2 | number | 是 | 确定贝塞尔曲线第二点横坐标。 | 68 | y2 | number | 是 | 确定贝塞尔曲线第二点纵坐标。 | 69 70- 返回值 71 曲线对象Object。 72 73 74## curves.spring 75 76spring(velocity: number, mass: number, stiffness: number, damping: number): Object 77 78 79构造弹簧曲线对象。 80 81 82- 参数 83 | 参数名 | 类型 | 必填 | 说明 | 84 | -------- | -------- | -------- | -------- | 85 | velocity | number | 是 | 初始速度。 | 86 | mass | number | 是 | 质量。 | 87 | stiffness | number | 是 | 刚度。 | 88 | damping | number | 是 | 阻尼。 | 89 90- 返回值 91 曲线对象Object。 92 93 94## 示例 95 96``` 97import Curves from '@ohos.curves' 98let curve1 = Curves.init() // 创建一个默认线性插值曲线 99let curve2 = Curves.init(Curve.EaseIn) // 创建一个默认先慢后快插值曲线 100let curve3 = Curves.spring(100, 1, 228, 30) // 创建一个弹簧插值曲线 101let curve3 = Curves.cubicBezier(0.1, 0.0, 0.1, 1.0) // 创建一个三阶贝塞尔曲线 102``` 103 104 105曲线对象只能通过上面的接口创建。 106| 接口名称 | 功能描述 | 107| -------- | -------- | 108| interpolate(time: number): number | 插值曲线的插值计算函数，可以通过传入的归一化时间参数返回当前的插值。<br/>time: 当前的归一化时间参数，有效值范围0到1。<br/>返回归一化time时间点对应的曲线插值。 | 109 110 111- 示例 112 ``` 113 import Curves from '@ohos.curves' 114 let curve = Curves.init(Curve.EaseIn) // 创建一个默认先慢后快插值曲线 115 let value: number = curve.interpolate(0.5) // 计算得到时间到一半时的插值 116 ``` 117 118 119## 整体示例 120 121``` 122import Curves from '@ohos.curves' 123@Entry 124@Component 125struct ImageComponent { 126 @State widthSize: number = 200 127 @State heightSize: number = 200 128 build() { 129 Column() { 130 Text() 131 .margin({top:100}) 132 .width(this.widthSize) 133 .height(this.heightSize) 134 .backgroundColor(Color.Red) 135 .onClick(()=> { 136 let curve = Curves.cubicBezier(0.25, 0.1, 0.25, 1.0); 137 this.widthSize = curve.interpolate(0.5) * this.widthSize; 138 this.heightSize = curve.interpolate(0.5) * this.heightSize; 139 }) 140 .animation({duration: 2000 , curve: Curves.spring(0.25, 0.1, 0.25, 1.0)}) 141 }.width("100%").height("100%") 142 } 143} 144``` 145 146 147
