Interpolation Calculation

NOTE
This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.

Modules to Import

import curves from '@ohos.curves'

Required Permissions

None

curves.init

init(curve?: Curve): Object

Implements initialization for the interpolation curve, which is used to create an interpolation curve object based on the input parameter.

• Parameters

| Name | Type | Mandatory | Default Value | Description | | ——– | ——– | ——– | ——– | ——– | | curve | Curve | No | Linear | Curve object. |

• Return value
  Curve object.

curves.steps

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

Constructs a step curve object.

• Parameters

| Name | Type | Mandatory | Default Value | Description | | ——– | ——– | ——– | ——– | ——– | | count | number | Yes | - | Number of steps. The value must be a positive integer. | | end | boolean | No | true | Step change at the start or end point of each interval. Defaults to true, indicating that the step change occurs at the end point. |

• Return value

Curve object.

curves.cubicBezier

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

Constructs a third-order Bezier curve object. The curve value must be between 0 and 1.

1. Parameters

| Name | Type | Mandatory | Description | | —- | —— | ——— | ————————————————————– | | x1 | number | Yes | Horizontal coordinate of the first point on the Bezier curve. | | y1 | number | Yes | Vertical coordinate of the first point on the Bezier curve. | | x2 | number | Yes | Horizontal coordinate of the second point on the Bezier curve. | | y2 | number | Yes | Vertical coordinate of the second point on the Bezier curve. |

1. Return value

Curve object.

curves.spring

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

Constructs a spring curve object.

1. Parameters

| Name | Type | Mandatory | Description | | ——— | —— | ——— | —————– | | velocity | number | Yes | Initial velocity. | | mass | number | Yes | Mass. | | stiffness | number | Yes | Stiffness. | | damping | number | Yes | Damping. |

1. Return value

Curve object.

Example

import Curves from '@ohos.curves'
let curve1 = Curves.init() // Create a default linear interpolation curve.
let curve2 = Curves.init(Curve.EaseIn) // Create an interpolation curve which is slow and then fast by default.
let curve3 = Curves.spring(100, 1, 228, 30) // Create a spring interpolation curve.
let curve3 = Curves.cubicBezier(0.1, 0.0, 0.1, 1.0) // Create a third-order Bezier curve.

Curve objects can be created only by the preceding APIs. | API | Description | | ——– | ——– | | interpolate(time: number): number | Calculation function of the interpolation curve. Passing a normalized time parameter to this function returns the current interpolation.
time: indicates the current normalized time. The value ranges from 0 to 1.
The curve interpolation corresponding to the normalized time point is returned. |

• Example

  import Curves from '@ohos.curves'
  let curve = Curves.init(Curve.EaseIn) // Create an interpolation curve which is slow and then fast by default.
  let value: number = curve.interpolate(0.5) // Calculate the interpolation for half of the time.

Example

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

你可能感兴趣的文章

开源鸿蒙 TypeScript-based Declarative Development Paradigm

开源鸿蒙 AnimatorProperty

开源鸿蒙 Built-in Enums

开源鸿蒙 Blank

开源鸿蒙 Button

开源鸿蒙 Checkbox

开源鸿蒙 CheckboxGroup

开源鸿蒙 DataPanel

开源鸿蒙 DatePicker

开源鸿蒙 Divider