harmony 鸿蒙@ohos.curves (Interpolation Calculation)

  • 2023-02-03
  • 浏览 (712)

@ohos.curves (Interpolation Calculation)

The Curves module provides APIs for interpolation calculation to create step, cubic Bezier, and spring curves.

NOTE

The initial APIs of this module are 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'

Curves.initCurve9+

initCurve(curve?: Curve): ICurve

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

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
curve Curve No Curve type.
Default value: Curve.Linear

Return value

Type Description
ICurve Interpolation curve.

Curve

Since API version 9, this API is supported in ArkTS widgets.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name Description
Linear The animation speed keeps unchanged.
Ease The animation starts slowly, accelerates, and then slows down towards the end. The cubic-bezier curve (0.25, 0.1, 0.25, 1.0) is used.
EaseIn The animation starts at a low speed and then picks up speed until the end. The cubic-bezier curve (0.42, 0.0, 1.0, 1.0) is used.
EaseOut The animation ends at a low speed. The cubic-bezier curve (0.0, 0.0, 0.58, 1.0) is used.
EaseInOut The animation starts and ends at a low speed. The cubic-bezier curve (0.42, 0.0, 0.58, 1.0) is used.
FastOutSlowIn The animation uses the standard cubic-bezier curve (0.4, 0.0, 0.2, 1.0).
LinearOutSlowIn The animation uses the deceleration cubic-bezier curve (0.0, 0.0, 0.2, 1.0).
FastOutLinearIn The animation uses the acceleration cubic-bezier curve (0.4, 0.0, 1.0, 1.0).
ExtremeDeceleration The animation uses the extreme deceleration cubic-bezier curve (0.0, 0.0, 0.0, 1.0).
Sharp The animation uses the sharp cubic-bezier curve (0.33, 0.0, 0.67, 1.0).
Rhythm The animation uses the rhythm cubic-bezier curve (0.7, 0.0, 0.2, 1.0).
Smooth The animation uses the smooth cubic-bezier curve (0.4, 0.0, 0.4, 1.0).
Friction The animation uses the friction cubic-bezier curve (0.2, 0.0, 0.2, 1.0).

Example

import Curves from '@ohos.curves'
Curves.initCurve(Curve.EaseIn) // Create a default ease-in curve, where the interpolation starts slowly and then picks up speed.

Curves.stepsCurve9+

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

Creates a step curve.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
count number Yes Number of steps. The value must be a positive integer.
Value range: [1, +∞)
NOTE
A value less than 1 evaluates to the value 1.
end boolean Yes Whether jumping occurs when the interpolation ends.
- true: Jumping occurs when the interpolation ends.
- false: Jumping occurs when the interpolation starts.

Return value

Type Description
ICurve Interpolation curve.

Example

import Curves from '@ohos.curves'
Curves.stepsCurve(9, true) // Create a step curve.

Curves.cubicBezierCurve9+

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

Creates a cubic Bezier curve. The curve values must be between 0 and 1.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
x1 number Yes X coordinate of the first point on the Bezier curve.
Value range: [0, 1]
NOTE
A value less than 0 evaluates to the value 0. A value greater than 1 evaluates to the value 1.
y1 number Yes Y coordinate of the first point on the Bezier curve.
Value range: (-∞, +∞)
x2 number Yes X coordinate of the second point on the Bezier curve.
Value range: [0, 1]
NOTE
A value less than 0 evaluates to the value 0. A value greater than 1 evaluates to the value 1.
y2 number Yes Y coordinate of the second point on the Bezier curve.
Value range: (-∞, +∞)

Return value

Type Description
ICurve Interpolation curve.

Example

import Curves from '@ohos.curves'
Curves.cubicBezierCurve(0.1, 0.0, 0.1, 1.0) // Create a cubic Bezier curve.

Curves.springCurve9+

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

Creates a spring curve. The curve shape is subject to the spring parameters, and the animation duration is subject to the duration parameter in animation and animateTo.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters |Name |Type|Mandatory|Description | |———|——|—-|————————————————————| |velocity|number|Yes|Initial velocity. It is applied by external factors to the spring animation, designed to help ensure the smooth transition from the previous motion state. The velocity is the normalized velocity, and its value is equal to the actual velocity at the beginning of the animation divided by the animation attribute change value.
Value range: (-∞, +∞)| |mass |number|Yes|Mass, which influences the inertia in the spring system. The greater the mass, the greater the amplitude of the oscillation, and the slower the speed of restoring to the equilibrium position.
Value range: (0, +∞)
NOTE
If this parameter is set to a value less than or equal to 0, the value 1 is used.| |stiffness|number|Yes|Stiffness. It is the degree to which an object deforms by resisting the force applied. In an elastic system, the greater the stiffness, the stronger the ability to resist deformation, and the faster the speed of restoring to the equilibrium position.
Value range: (0, +∞)
NOTE
If this parameter is set to a value less than or equal to 0, the value 1 is used.| |damping |number|Yes|Damping. It is used to describe the oscillation and attenuation of the system after being disturbed. The larger the damping, the smaller the number of oscillations of elastic motion, and the smaller the oscillation amplitude.
Value range: (0, +∞)
NOTE
If this parameter is set to a value less than or equal to 0, the value 1 is used.|

Return value

Type Description
ICurve Interpolation curve.

Example

import Curves from '@ohos.curves'
Curves.springCurve(10, 1, 228, 30) // Create a spring curve.

Curves.springMotion9+

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

Creates a spring animation curve. If multiple spring animations are applied to the same attribute of an object, each animation replaces their predecessor and inherits the velocity.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
response number No Duration of one complete oscillation.
Default value: 0.55
Unit: second
Value range: (0, +∞)
NOTE
If this parameter is set to a value less than or equal to 0, the default value 0.55 is used.
dampingFraction number No Damping coefficient.
0: undamped. In this case, the spring oscillates forever.
> 0 and < 1: underdamped. In this case, the spring overshoots the equilibrium position.
1: critically damped.
> 1: overdamped. In this case, the spring approaches equilibrium gradually.
Default value: 0.825
Unit: second
Value range: [0, +∞)
NOTE
A value less than 0 evaluates to the default value 0.825.
overlapDuration number No Duration for animations to overlap, in seconds. When animations overlap, the response values of these animations will transit smoothly over this duration if they are different.
Default value: 0
Unit: second
Value range: [0, +∞)
NOTE
A value less than 0 evaluates to the default value 0.
The spring animation curve is physics-based. Its duration depends on the springMotion parameters and the previous velocity, rather than the duration parameter in animation or animateTo. The time cannot be normalized. Therefore, the interpolation cannot be obtained using the interpolate function of the curve.

Return value

Type Description
ICurve Curve.
NOTE
The spring animation curve is physics-based. Its duration depends on the springMotion parameters and the previous velocity, rather than the duration parameter in animation or animateTo. The time cannot be normalized. Therefore, the interpolation cannot be obtained using the interpolate function of the curve.

Example

import Curves from '@ohos.curves'
Curves.springMotion() // Create a spring animation curve with default settings.
Curves.springMotion(0.5) // Create a spring animation curve with the specified response value.
Curves.springMotion (0.5, 0.6) // Create a spring animation curve with the specified response and dampingFraction values.
Curves.springMotion(0.5, 0.6, 0) // Create a spring animation curve with the specified parameter values.

Curves.responsiveSpringMotion9+

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

Creates a responsive spring animation curve. It is a special case of springMotion, with the only difference in the default values. It can be used together with springMotion.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
response number No See response in springMotion.
Default value: 0.15
Unit: second
Value range: (0, +∞)
NOTE
If this parameter is set to a value less than or equal to 0, the default value 0.15 is used.
dampingFraction number No See dampingFraction in springMotion.
Default value: 0.86
Unit: second
Value range: [0, +∞)
NOTE
A value less than 0 evaluates to the default value 0.86.
overlapDuration number No See overlapDuration in springMotion.
Default value: 0.25
Unit: second
Value range: [0, +∞)
NOTE
A value less than 0 evaluates to the default value 0.25.
To apply custom settings for a spring animation, you are advised to use springMotion. When using responsiveSpringMotion, you are advised to retain the default settings.
The duration of the responsive spring animation depends on the responsiveSpringMotion parameters and the previous velocity, rather than the duration parameter in animation or animateTo. In addition, the interpolation cannot be obtained using the interpolate function of the curve.

Return value

Type Description
ICurve Curve.
NOTE
1. To apply custom settings for a spring animation, you are advised to use springMotion. When using responsiveSpringMotion, you are advised to retain the default settings.
2. The duration of the responsive spring animation depends on the responsiveSpringMotion parameters and the previous velocity, rather than the duration parameter in animation or animateTo. In addition, the interpolation cannot be obtained using the interpolate function of the curve.

Example

import Curves from '@ohos.curves'
Curves.responsiveSpringMotion() // Create a responsive spring animation curve with default settings.

Curves.interpolatingSpring10+

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

Creates an interpolating spring curve animated from 0 to 1. The actual animation value is calculated based on the curve. The animation duration is subject to the curve parameters, rather than the duration parameter in animation or animateTo.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters |Name |Type |Mandatory|Description | |———|——|—-|—–| |velocity|number|Yes |Initial velocity. It is applied by external factors to the spring animation, designed to help ensure the smooth transition from the previous motion state. The velocity is the normalized velocity, and its value is equal to the actual velocity at the beginning of the animation divided by the animation attribute change value.
Value range: (-∞, +∞)| |mass |number|Yes |Mass, which influences the inertia in the spring system. The greater the mass, the greater the amplitude of the oscillation, and the slower the speed of restoring to the equilibrium position.
Value range: (0, +∞)
NOTE
If this parameter is set to a value less than or equal to 0, the value 1 is used.| |stiffness|number|Yes |Stiffness. It is the degree to which an object deforms by resisting the force applied. In an elastic system, the greater the stiffness, the stronger the ability to resist deformation, and the faster the speed of restoring to the equilibrium position.
Value range: (0, +∞)
NOTE
If this parameter is set to a value less than or equal to 0, the value 1 is used.| |damping |number|Yes |Damping. It is used to describe the oscillation and attenuation of the system after being disturbed. The larger the damping, the smaller the number of oscillations of elastic motion, and the smaller the oscillation amplitude.
Value range: (0, +∞)
NOTE
If this parameter is set to a value less than or equal to 0, the value 1 is used.|

Return value

Type Description
ICurve Curve.
NOTE
The spring animation curve is physics-based. Its duration depends on the** interpolatingSpring** parameters, rather than the duration parameter in animation or animateTo. The time cannot be normalized. Therefore, the interpolation cannot be obtained using the interpolate function of the curve.

Example

import Curves from '@ohos.curves'
Curves.interpolatingSpring(10, 1, 228, 30) // Create an interpolating spring curve whose duration is subject to spring parameters.

Curves.customCurve10+

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

Creates a custom curve.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
interpolate (fraction: number) => number Yes Custom interpolation callback.
fraction: input x value for interpolation when the animation starts. Value range: [0, 1]
The return value is the y value of the curve. Value range: [0, 1]
NOTE
If fraction is 0, the return value 0 corresponds to the animation start point; any other return value means that the animation jumps at the start point.
If fraction is 1, the return value 1 corresponds to the animation end point; any other return value means that the end value of the animation is not the value of the state variable, which will result in an effect of transition from that end value to the value of the state variable.

Return value

Type Description
ICurve Interpolation curve.

Example

import Curves from '@ohos.curves'
let interpolate = (fraction:number):number => {
  return Math.sqrt(fraction)
}
let curve = Curves.customCurve(interpolate) // Create a custom interpolation curve.

ICurve

interpolate9+

interpolate(fraction: number): number

Implements calculation.

Since API version 9, this API is supported in ArkTS widgets.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
fraction number Yes Current normalized time.
Value range: [0, 1]
NOTE
A value less than 0 evaluates to the value 0. A value greater than 1 evaluates to the value 1.

Return value

Type Description
number Curve interpolation corresponding to the normalized time point.

Example

import Curves from '@ohos.curves'
let curveValue = Curves.initCurve(Curve.EaseIn) // Create an ease-in curve.
let value: number = curve.interpolate(0.5) // Calculate the interpolation for half of the time.

Curves.init(deprecated)

init(curve?: Curve): string

Implements initialization to create a curve. This API is deprecated since API version 9. You are advised to use Curves.initCurve instead.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
curve Curve No Curve type.
Default value: Curve.Linear

Curves.steps(deprecated)

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

Creates a step curve. This API is deprecated since API version 9. You are advised to use Curves.stepsCurve instead.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
count number Yes Number of steps. The value must be a positive integer.
end boolean Yes Whether jumping occurs when the interpolation ends.
- true: Jumping occurs when the interpolation ends.
- false: Jumping occurs when the interpolation starts.

Curves.cubicBezier(deprecated)

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

Creates a cubic Bezier curve. The curve value must range from 0 to 1. This API is deprecated since API version 9. You are advised to use Curves.cubicBezierCurve instead.

System capability: SystemCapability.ArkUI.ArkUI.Full

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

Curves.spring(deprecated)

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

Creates a spring curve. This API is deprecated since API version 9. You are advised to use Curves.springCurve instead.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
velocity number Yes Initial velocity. It is applied by external factors to the spring animation, designed to help ensure the smooth transition from the previous motion state.
mass number Yes Mass, which influences the inertia in the spring system. The greater the mass, the greater the amplitude of the oscillation, and the slower the speed of restoring to the equilibrium position.
stiffness number Yes Stiffness. It is the degree to which an object deforms by resisting the force applied. In an elastic system, the greater the stiffness, the stronger the ability to resist deformation, and the faster the speed of restoring to the equilibrium position.
damping number Yes Damping. It is a pure number and has no real physical meaning. It is used to describe the oscillation and attenuation of the system after being disturbed. The larger the damping, the smaller the number of oscillations of elastic motion, and the smaller the oscillation amplitude.

Example

// xxx.ets
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.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%")
  }
}

en-us_image_0000001174104410

你可能感兴趣的鸿蒙文章

harmony 鸿蒙APIs

harmony 鸿蒙System Common Events (To Be Deprecated Soon)

harmony 鸿蒙System Common Events

harmony 鸿蒙API Reference Document Description

harmony 鸿蒙Enterprise Device Management Overview (for System Applications Only)

harmony 鸿蒙BundleStatusCallback

harmony 鸿蒙@ohos.bundle.innerBundleManager (innerBundleManager)

harmony 鸿蒙@ohos.distributedBundle (Distributed Bundle Management)

harmony 鸿蒙@ohos.bundle (Bundle)

harmony 鸿蒙@ohos.enterprise.EnterpriseAdminExtensionAbility (EnterpriseAdminExtensionAbility)

0  赞
  • 所属分类： 后端技术
  • 本文标签：
  • 版权声明： 原创文章如转载，请注明本文链接: https://m.seaxiang.com/blog/826fbc502ef14e4e8afc7e5fa334e1c3
热门推荐
标签云
Linux Java Spring Spring Boot docker 大数据 前端 生活 maven golang 软件 spring cloud fintech mac vscode 其他 区块链 以太坊 V神 开发者 技术 股票 git greenplum 分布式事务 chrome mysql flink kafka 设计模式 原理 鸿蒙 seo
最新文章
本文目录