1# @ohos.curves (Interpolation Calculation) 2 3The **Curves** module provides APIs for interpolation calculation to create step, cubic Bezier, and spring curves. 4 5> **NOTE** 6> 7> 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. 8 9 10## Modules to Import 11 12```ts 13import Curves from '@ohos.curves' 14``` 15 16 17## Curves.initCurve<sup>9+</sup> 18 19initCurve(curve?: Curve): ICurve 20 21 22Implements initialization for the interpolation curve, which is used to create an interpolation curve based on the input parameter. 23 24**System capability**: SystemCapability.ArkUI.ArkUI.Full 25 26**Parameters** 27 28| Name| Type | Mandatory| Default Value | Description | 29| ------ | ------------------------------------------------------------ | ---- | ------------ | ---------- | 30| curve | [Curve](../arkui-ts/ts-appendix-enums.md#curve) | No | Curve.Linear | Curve type.| 31 32**Return value** 33 34| Type | Description | 35| ---------------------------------- | ---------------- | 36| [ICurve](#icurve) | Interpolation curve.| 37 38**Example** 39 40```ts 41import Curves from '@ohos.curves' 42Curves.initCurve(Curve.EaseIn) // Create a default ease-in curve, where the interpolation starts slowly and then picks up speed. 43``` 44 45 46## Curves.stepsCurve<sup>9+</sup> 47 48stepsCurve(count: number, end: boolean): ICurve 49 50 51Creates a step curve. 52 53**System capability**: SystemCapability.ArkUI.ArkUI.Full 54 55**Parameters** 56 57| Name| Type | Mandatory| Description | 58| ------ | ------- | ----| ------------------------------------------------------------ | 59| count | number | Yes | Number of steps. The value must be a positive integer.<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the value **0**.| 60| end | boolean | Yes | Whether jumping occurs when the interpolation ends.<br>- **true**: Jumping occurs when the interpolation ends.<br>- **false**: Jumping occurs when the interpolation starts.| 61 62**Return value** 63 64| Type | Description | 65| ---------------------------------- | ---------------- | 66| [ICurve](#icurve) | Interpolation curve.| 67 68**Example** 69 70```ts 71import Curves from '@ohos.curves' 72Curves.stepsCurve(9, true) // Create a step curve. 73``` 74 75 76## Curves.cubicBezierCurve<sup>9+</sup> 77 78cubicBezierCurve(x1: number, y1: number, x2: number, y2: number): ICurve 79 80 81Creates a cubic Bezier curve. The curve values must be between 0 and 1. 82 83**System capability**: SystemCapability.ArkUI.ArkUI.Full 84 85**Parameters** 86 87| Name| Type | Mandatory| Description | 88| ------ | ------ | ---- | ------------------------------------------------------------ | 89| x1 | number | Yes | X coordinate of the first point on the Bezier curve.<br>Value range: [0, 1]<br>**NOTE**<br>A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.| 90| y1 | number | Yes | Y coordinate of the first point on the Bezier curve.<br>Value range: (-∞, +∞) | 91| x2 | number | Yes | X coordinate of the second point on the Bezier curve.<br>Value range: [0, 1]<br>**NOTE**<br>A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.| 92| y2 | number | Yes | Y coordinate of the second point on the Bezier curve.<br>Value range: (-∞, +∞) | 93 94**Return value** 95 96| Type | Description | 97| ---------------------------------- | ---------------- | 98| [ICurve](#icurve) | Interpolation curve.| 99 100 101**Example** 102 103```ts 104import Curves from '@ohos.curves' 105Curves.cubicBezierCurve(0.1, 0.0, 0.1, 1.0) // Create a cubic Bezier curve. 106``` 107 108 109## Curves.springCurve<sup>9+</sup> 110 111springCurve(velocity: number, mass: number, stiffness: number, damping: number): ICurve 112 113 114Creates a spring curve. 115 116**System capability**: SystemCapability.ArkUI.ArkUI.Full 117 118**Parameters** 119| Name | Type | Mandatory| Description | 120| --------- | ------ | ---- | ------------------------------------------------------------ | 121| 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.<br>Value range: (-∞, +∞)| 122| 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.<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the value **1**.| 123| 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.<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the value **1**.| 124| 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.<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the value **1**.| 125 126 127**Return value** 128 129| Type | Description | 130| ---------------------------------- | ---------------- | 131| [ICurve](#icurve)| Interpolation curve.| 132 133 134**Example** 135 136```ts 137import Curves from '@ohos.curves' 138Curves.springCurve(100, 1, 228, 30) // Create a spring curve. 139``` 140 141 142## Curves.springMotion<sup>9+</sup> 143 144springMotion(response?: number, dampingFraction?: number, overlapDuration?: number): ICurve 145 146Creates 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. 147 148**System capability**: SystemCapability.ArkUI.ArkUI.Full 149 150**Parameters** 151 152| Name | Type | Mandatory | Description | 153| --------- | ------ | ---- | ----- | 154| response | number | No | Duration of one complete oscillation,<br>Default value: **0.55**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.55**.| 155| dampingFraction | number | No | Damping coefficient.<br>**0**: undamped. In this case, the spring oscillates forever.<br>> 0 and < 1: underdamped. In this case, the spring overshoots the equilibrium position.<br>**1**: critically damped.<br>> 1: overdamped. In this case, the spring approaches equilibrium gradually.<br>Default value: **0.825**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.55**.| 156| overlapDuration | number | No | Duration for animations to overlap, in seconds. When animations overlap, if the **response** values of the two animations are different, they will transit smoothly over this duration.<br><br>Default value: **0**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0**.<br>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](../arkui-ts/ts-animatorproperty.md)** or **[animateTo](../arkui-ts/ts-explicit-animation.md)**. The time cannot be normalized. Therefore, the interpolation cannot be obtained by using the **[interpolate](#interpolate)** function of the curve.| 157 158 159**Return value** 160 161| Type | Description | 162| ---------------------------------- | ---------------- | 163| [ICurve](#icurve)| Curve.<br>**NOTE**<br>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 by using the **[interpolate](#interpolate)** function of the curve.| 164 165**Example** 166 167```ts 168import Curves from '@ohos.curves' 169Curves.springMotion() // Create a spring animation curve with default settings. 170Curves.springMotion(0.5) // Create a spring animation curve with the specified response value. 171Curves.springMotion (0.5, 0.6) // Create a spring animation curve with the specified response and dampingFraction values. 172Curves.springMotion(0.5, 0.6, 0) // Create a spring animation curve with the specified parameter values. 173``` 174 175 176## Curves.responsiveSpringMotion<sup>9+</sup> 177 178responsiveSpringMotion(response?: number, dampingFraction?: number, overlapDuration?: number): ICurve 179 180Creates a responsive spring animation curve. It is a special case of [springMotion](#curvesspringmotion9), with the only difference in the default values. It can be used together with **springMotion**. 181 182**System capability**: SystemCapability.ArkUI.ArkUI.Full 183 184**Parameters** 185 186| Name | Type | Mandatory | Description | 187| --------- | ------ | ---- | ----- | 188| response | number | No | See **response** in **springMotion**.<br>Default value: **0.15**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.15**.| 189| dampingFraction | number | No | See **dampingFraction** in **springMotion**.<br>Default value: **0.86**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.86**.| 190| overlapDuration | number | No | See **overlapDuration** in **springMotion**.<br>Default value: **0.25**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.25**.<br> 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.<br>The duration of the responsive spring animation depends on the **responsiveSpringMotion** parameters and the previous velocity, rather than the **duration** parameter in **[animation](../arkui-ts/ts-animatorproperty.md)** or **[animateTo](../arkui-ts/ts-explicit-animation.md)**. In addition, the interpolation cannot be obtained by using the **[interpolate](#interpolate)** function of the curve.| 191 192**Return value** 193 194| Type | Description | 195| ---------------------------------- | ---------------- | 196| [ICurve](#icurve)| Curve.<br>**NOTE**<br>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.<br>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 by using the **interpolate** function of the curve.| 197 198**Example** 199 200```ts 201import Curves from '@ohos.curves' 202Curves.responsiveSpringMotion() // Create a responsive spring animation curve with default settings. 203``` 204 205 206## ICurve 207 208 209### interpolate 210 211interpolate(fraction: number): number 212 213Implements calculation. 214 215Since API version 9, this API is supported in ArkTS widgets. 216 217**System capability**: SystemCapability.ArkUI.ArkUI.Full 218 219**Parameters** 220 221| Name | Type | Mandatory| Description | 222| -------- | ------ | ---- | ------------------------------------------------------------ | 223| fraction | number | Yes | Current normalized time.<br>Value range: [0, 1]<br>**NOTE**<br>A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.| 224 225**Return value** 226 227| Type | Description | 228| ------ | ------------------------------------ | 229| number | Curve interpolation corresponding to the normalized time point.| 230 231**Example** 232 233```ts 234import Curves from '@ohos.curves' 235let curve = Curves.initCurve(Curve.EaseIn) // Create an ease-in curve. 236let value: number = curve.interpolate(0.5) // Calculate the interpolation for half of the time. 237``` 238 239 240## Curves.init<sup>(deprecated)</sup> 241 242init(curve?: Curve): string 243 244 245Implements initialization to create a curve. This API is deprecated since API version 9. You are advised to use [Curves.initCurve](#curvesinitcurve9) instead. 246 247**System capability**: SystemCapability.ArkUI.ArkUI.Full 248 249**Parameters** 250 251| Name| Type | Mandatory| Default Value | Description | 252| ------ | ------------------------------------------------------------ | ---- | ------------ | ---------- | 253| curve |[Curve](../arkui-ts/ts-appendix-enums.md#curve) | No | Curve.Linear | Curve type.| 254 255 256## Curves.steps<sup>(deprecated)</sup> 257 258steps(count: number, end: boolean): string 259 260 261Creates a step curve. This API is deprecated since API version 9. You are advised to use [Curves.stepsCurve](#curvesstepscurve9) instead. 262 263**System capability**: SystemCapability.ArkUI.ArkUI.Full 264 265**Parameters** 266 267| Name| Type | Mandatory| Description | 268| ------ | ------- | ----| ------------------------------------------------------------ | 269| count | number | Yes | Number of steps. The value must be a positive integer. | 270| end | boolean | Yes | Whether jumping occurs when the interpolation ends.<br>- **true**: Jumping occurs when the interpolation ends.<br>- **false**: Jumping occurs when the interpolation starts.| 271 272 273## Curves.cubicBezier<sup>(deprecated)</sup> 274 275cubicBezier(x1: number, y1: number, x2: number, y2: number): string 276 277 278Creates 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](#curvescubicbeziercurve9) instead. 279 280**System capability**: SystemCapability.ArkUI.ArkUI.Full 281 282**Parameters** 283| Name | Type | Mandatory | Description | 284| ---- | ------ | ---- | -------------- | 285| x1 | number | Yes | X coordinate of the first point on the Bezier curve.| 286| y1 | number | Yes | Y coordinate of the first point on the Bezier curve.| 287| x2 | number | Yes | X coordinate of the second point on the Bezier curve.| 288| y2 | number | Yes | Y coordinate of the second point on the Bezier curve.| 289 290 291## Curves.spring<sup>(deprecated)</sup> 292 293spring(velocity: number, mass: number, stiffness: number, damping: number): string 294 295 296Creates a spring curve. This API is deprecated since API version 9. You are advised to use [Curves.springCurve](#curvesspringcurve9) instead. 297 298**System capability**: SystemCapability.ArkUI.ArkUI.Full 299 300**Parameters** 301 302| Name | Type | Mandatory | Description | 303| --------- | ------ | ---- | ----- | 304| 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.| 305| 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.| 306| 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.| 307| 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.| 308 309## Example 310 311```ts 312// xxx.ets 313import Curves from '@ohos.curves' 314@Entry 315@Component 316struct ImageComponent { 317 @State widthSize: number = 200 318 @State heightSize: number = 200 319 320 build() { 321 Column() { 322 Text() 323 .margin({top:100}) 324 .width(this.widthSize) 325 .height(this.heightSize) 326 .backgroundColor(Color.Red) 327 .onClick(()=> { 328 let curve = Curves.cubicBezierCurve(0.25, 0.1, 0.25, 1.0); 329 this.widthSize = curve.interpolate(0.5) * this.widthSize; 330 this.heightSize = curve.interpolate(0.5) * this.heightSize; 331 }) 332 .animation({ duration: 2000 , curve: Curves.stepsCurve(9, true) }) 333 }.width("100%").height("100%") 334 } 335} 336``` 337 338 339
