diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174104410.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174104410.gif index 587269a1e0647be0acb21deced4722037bb07013..df8e47d8359338f9d0412cacfe12b847c28c2a84 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174104410.gif and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174104410.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-interpolation-calculation.md b/zh-cn/application-dev/reference/arkui-ts/ts-interpolation-calculation.md index 896525c1d36caac00b1876e61761abd28b5f208f..c7a34317a8f9bb653c03ce0cf84809c3ed8f09a5 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-interpolation-calculation.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-interpolation-calculation.md @@ -6,60 +6,77 @@ ## 导入模块 -``` -import curves from '@ohos.curves' +```js +import Curves from '@ohos.curves' ``` -## 权限 +## Curves.initCurve9+ -无 +initCurve(curve?: Curve)：ICurve -## curves.init +插值曲线的初始化函数，可以根据入参创建一个插值曲线对象。 -init(curve?: Curve): Object +**参数：** +| 参数名 | 类型 | 必填 | 默认值 | 说明 | +| ------ | ------------------------------------------------------------ | ---- | ------------ | ---------- | +| curve | [Curve](#curve枚举说明) | 否 | Curve.Linear | 曲线类型。 | -插值曲线的初始化函数，可以根据入参创建一个插值曲线对象。 +**返回值：** + +| 类型 | 说明 | +| ---------------------------------- | ---------------- | +| [ICurve](#icurve) | 曲线的插值对象。 | -- 参数 - | 参数名 | 类型 | 必填 | 默认值 | 说明 | - | ----- | ----- | ---- | ------ | ----- | - | curve | Curve | 否 | Linear | 曲线对象。 | +**示例：** -- 返回值
- 曲线对象Object。 +```ts +import Curves from '@ohos.curves' +Curves.initCurve(Curve.EaseIn) // 创建一个默认先慢后快插值曲线 +``` -## curves.steps +##  Curves.stepsCurve9+ -steps(count: number, end: boolean): Object +stepsCurve(count: number, end: boolean)：ICurve 构造阶梯曲线对象。 +**参数：** -- 参数 - | 参数名 | 类型 | 必填 | 默认值 | 说明 | - | ----- | ------- | ---- | ---- | ---------------------------------------- | - | count | number | 是 | - | 阶梯的数量，需要为正整数。 | - | end | boolean | 是 | true | 在每个间隔的起点或是终点发生阶跃变化 ，默认值为true，即在终点发生阶跃变化。 | + | 参数名 | 类型 | 必填 | 说明 | + | ------ | ------- | ----| ------------------------------------------------------------ | + | count | number | 是 | 阶梯的数量，需要为正整数。 | + | end | boolean | 是 | 在每个间隔的起点或是终点发生阶跃变化。
-true：在终点发生阶跃变化。
-false:在起点发生阶跃变化。 | -- 返回值
- 曲线对象Object。 +**返回值：** +| 类型 | 说明 | +| ---------------------------------- | ---------------- | +| [ICurve](#icurve) | 曲线的插值对象。 | -## curves.cubicBezier -cubicBezier(x1: number, y1: number, x2: number, y2: number): Object +**示例：** + +```ts +import Curves from '@ohos.curves' +Curves.stepsCurve(9, true) //创建一个阶梯曲线 +``` + + +## Curves.cubicBezierCurve9+ + +cubicBezierCurve(x1: number, y1: number, x2: number, y2: number)：ICurve 构造三阶贝塞尔曲线对象，曲线的值必须处于0-1之间。 -- 参数 +**参数：** | 参数名 | 类型 | 必填 | 说明 | | ---- | ------ | ---- | -------------- | | x1 | number | 是 | 确定贝塞尔曲线第一点横坐标。 | @@ -67,53 +84,164 @@ cubicBezier(x1: number, y1: number, x2: number, y2: number): Object | x2 | number | 是 | 确定贝塞尔曲线第二点横坐标。 | | y2 | number | 是 | 确定贝塞尔曲线第二点纵坐标。 | -- 返回值
- 曲线对象Object。 +**返回值：** +| 类型 | 说明 | +| ---------------------------------- | ---------------- | +| [ICurve](#icurve) | 曲线的插值对象。 | -## curves.spring -spring(velocity: number, mass: number, stiffness: number, damping: number): Object +**示例：** + +```ts +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 构造弹簧曲线对象。 -- 参数 - | 参数名 | 类型 | 必填 | 说明 | - | --------- | ------ | ---- | ----- | - | velocity | number | 是 | 初始速度。 | - | mass | number | 是 | 质量。 | - | stiffness | number | 是 | 刚度。 | - | damping | number | 是 | 阻尼。 | +**参数：** +| 参数名 | 类型 | 必填 | 说明 | +| --------- | ------ | ---- | ----- | +| velocity | number | 是 | 初始速度。是由外部因素对弹性动效产生的影响参数，其目的是保证对象从之前的运动状态平滑的过渡到弹性动效。 | +| mass | number | 是 | 质量。弹性系统的受力对象，会对弹性系统产生惯性影响。质量越大，震荡的幅度越大，恢复到平衡位置的速度越慢。 | +| stiffness | number | 是 | 刚度。是物体抵抗施加的力而形变的程度。在弹性系统中，刚度越大，抵抗变形的能力越强，恢复到平衡位置的速度就越快。 | +| damping | number | 是 | 阻尼。是一个纯数，无真实的物理意义，用于描述系统在受到扰动后震荡及衰减的情形。阻尼越大，弹性运动的震荡次数越少、震荡幅度越小。 | + + +**返回值：** + +| 类型 | 说明 | +| ---------------------------------- | ---------------- | +| [ICurve](#icurve)| 曲线的插值对象。 | + + +**示例：** + +```ts +import Curves from '@ohos.curves' +Curves.springCurve(100, 1, 228, 30) // 创建一个弹簧插值曲线 +``` + + +## ICurve + + +### interpolate + +interpolate(fraction: number): number + -- 返回值
- 曲线对象Object。 +插值曲线的插值计算函数，可以通过传入的归一化时间参数返回当前的插值 +**参数：** -## 示例 +| 参数名 | 类型 | 必填 | 说明 | +| -------- | ------ | ---- | -------------------------------------------- | +| fraction | number | 是 |  当前的归一化时间参数，有效值范围0到1。 | + +**返回值：** + +| 类型 | 说明 | +| ------ | ------------------------------------ | +| number | 返回归一化time时间点对应的曲线插值。 | + +**示例：** ```ts 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) // 创建一个三阶贝塞尔曲线 +let curve = Curves.initCurve(Curve.EaseIn) // 创建一个默认先慢后快插值曲线 +let value: number = curve.interpolate(0.5) // 计算得到时间到一半时的插值 ``` -曲线对象只能通过上面的接口创建。 -| 接口名称 | 功能描述 | -| ---------------------------------------- | ---------------------------------------- | -| interpolate(time: number): number | 插值曲线的插值计算函数，可以通过传入的归一化时间参数返回当前的插值。
time: 当前的归一化时间参数，有效值范围0到1。
返回归一化time时间点对应的曲线插值。 | +## Curves.init(deprecated) + +init(curve?: Curve): string + + +插值曲线的初始化函数，可以根据入参创建一个插值曲线对象，从API version9开始废弃，推荐使用[Curves.initCurve](#curvesinitcurve9)。 + +**参数：** + +| 参数名 | 类型 | 必填 | 默认值 | 说明 | +| ------ | ------------------------------------------------------------ | ---- | ------------ | ---------- | +| curve |[Curve](#curve枚举说明) | 否 | Curve.Linear | 曲线类型。 | + + +## Curves.steps(deprecated) +steps(count: number, end: boolean): string -- 示例 - ```ts - import Curves from '@ohos.curves' - let curve = Curves.init(Curve.EaseIn) // 创建一个默认先慢后快插值曲线 - let value: number = curve.interpolate(0.5) // 计算得到时间到一半时的插值 - ``` + +构造阶梯曲线对象，从API version9开始废弃，推荐使用[Curves. stepsCurve](# curvesstepscurve9)。 + +**参数：** + + | 参数名 | 类型 | 必填 | 说明 | + | ------ | ------- | ----| ------------------------------------------------------------ | + | 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](#curvescubicbeziercurve9)。 + + +**参数：** + | 参数名 | 类型 | 必填 | 说明 | + | ---- | ------ | ---- | -------------- | + | 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](#curvesspringcurve9)。 + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| --------- | ------ | ---- | ----- | +| velocity | number | 是 | 初始速度。是由外部因素对弹性动效产生的影响参数，其目的是保证对象从之前的运动状态平滑的过渡到弹性动效。 | +| mass | number | 是 | 质量。弹性系统的受力对象，会对弹性系统产生惯性影响。质量越大，震荡的幅度越大，恢复到平衡位置的速度越慢。 | +| stiffness | number | 是 | 刚度。是物体抵抗施加的力而形变的程度。在弹性系统中，刚度越大，抵抗变形的能力越强，恢复到平衡位置的速度就越快。 | +| damping | number | 是 | 阻尼。是一个纯数，无真实的物理意义，用于描述系统在受到扰动后震荡及衰减的情形。阻尼越大，弹性运动的震荡次数越少、震荡幅度越小。 | + + +## Curve枚举说明 + + | 名称 | 描述 | + | ------------------- | ---------------------------------------- | + | 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)。 | ## 整体示例 @@ -134,14 +262,13 @@ struct ImageComponent { .height(this.heightSize) .backgroundColor(Color.Red) .onClick(()=> { - let curve = Curves.cubicBezier(0.25, 0.1, 0.25, 1.0); + 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.spring(0.25, 0.1, 0.25, 1.0)}) + .animation({duration: 2000 , curve: Curves.stepsCurve(9, true)}) }.width("100%").height("100%") } } ``` - ![zh-cn_image_0000001174104410](figures/zh-cn_image_0000001174104410.gif)