1# @ohos.curves (插值计算) 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @CCFFWW--> 5<!--Designer: @yangfan229--> 6<!--Tester: @lxl007--> 7<!--Adviser: @HelloCrease--> 8 9本模块提供设置动画插值曲线功能，用于构造阶梯曲线对象、三阶贝塞尔曲线对象和弹簧曲线对象。 10 11> **说明：** 12> 13> 本模块首批接口从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14 15 16## 导入模块 17 18```ts 19import { curves } from '@kit.ArkUI'; 20``` 21 22 23## curves.initCurve<sup>9+</sup> 24 25initCurve(curve?: Curve): ICurve 26 27插值曲线的初始化函数，可以根据入参创建一个插值曲线对象。 28 29**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 30 31**系统能力：** SystemCapability.ArkUI.ArkUI.Full 32 33**参数：** 34 35| 参数名 | 类型 | 必填 | 说明 | 36| ------ | --------------- | ---- | ----------------------------------- | 37| curve | [Curve](#curve) | 否 | 曲线类型。<br/>默认值：Curve.Linear | 38 39**返回值：** 40 41| 类型 | 说明 | 42| ---------------------------------- | ---------------- | 43| [ICurve](#icurve9) | 曲线的插值对象。 | 44 45## Curve 46 47插值曲线和动效请参考<!--RP1-->[贝塞尔曲线](../../../design/ux-design/animation-attributes.md)<!--RP1End-->。 48 49**卡片能力：** 从API version 20开始，该接口支持在ArkTS卡片中使用。 50 51**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 52 53**系统能力：** SystemCapability.ArkUI.ArkUI.Full 54 55| 名称 | 值 | 说明 | 56| ------------------- | -- | ------------------------------------------------------------ | 57| Linear | 0 | 表示动画从头到尾的速度都是相同的。 | 58| Ease | 1 | 表示动画以低速开始，然后加快，在结束前变慢，cubic-bezier(0.25, 0.1, 0.25, 1.0)。 | 59| EaseIn | 2 | 表示动画以低速开始，cubic-bezier(0.42, 0.0, 1.0, 1.0)。 | 60| EaseOut | 3 | 表示动画以低速结束，cubic-bezier(0.0, 0.0, 0.58, 1.0)。 | 61| EaseInOut | 4 | 表示动画以低速开始和结束，cubic-bezier(0.42, 0.0, 0.58, 1.0)。 | 62| FastOutSlowIn | 5 | 标准曲线，cubic-bezier(0.4, 0.0, 0.2, 1.0)。 | 63| LinearOutSlowIn | 6 | 减速曲线，cubic-bezier(0.0, 0.0, 0.2, 1.0)。 | 64| FastOutLinearIn | 7 | 加速曲线，cubic-bezier(0.4, 0.0, 1.0, 1.0)。 | 65| ExtremeDeceleration | 8 | 急缓曲线，cubic-bezier(0.0, 0.0, 0.0, 1.0)。 | 66| Sharp | 9 | 锐利曲线，cubic-bezier(0.33, 0.0, 0.67, 1.0)。 | 67| Rhythm | 10 | 节奏曲线，cubic-bezier(0.7, 0.0, 0.2, 1.0)。 | 68| Smooth | 11 | 平滑曲线，cubic-bezier(0.4, 0.0, 0.4, 1.0)。 | 69| Friction | 12 | 阻尼曲线，cubic-bezier(0.2, 0.0, 0.2, 1.0)。 | 70 71**示例：** 72 73```ts 74import { curves } from '@kit.ArkUI'; 75curves.initCurve(Curve.EaseIn) // 创建一个默认先慢后快插值曲线 76``` 77 78 79## curves.stepsCurve<sup>9+</sup> 80 81stepsCurve(count: number, end: boolean): ICurve 82 83构造阶梯曲线对象。 84 85**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 86 87**系统能力：** SystemCapability.ArkUI.ArkUI.Full 88 89**参数：** 90 91| 参数名 | 类型 | 必填 | 说明 | 92| ------ | ------- | ----| ------------------------------------------------------------ | 93| count | number | 是 | 阶梯的数量，需要为正整数。<br/>取值范围：[1, +∞)<br/>**说明：** <br/>设置小于1的值时，按值为1处理。 | 94| end | boolean | 是 | 在每个间隔的起点或终点发生阶跃变化。<br>-true：在终点发生阶跃变化。<br>-false：在起点发生阶跃变化。 | 95 96**返回值：** 97 98| 类型 | 说明 | 99| ---------------------------------- | ---------------- | 100| [ICurve](#icurve9) | 曲线的插值对象。 | 101 102**示例：** 103 104```ts 105import { curves } from '@kit.ArkUI'; 106curves.stepsCurve(9, true) //创建一个阶梯曲线 107``` 108 109 110## curves.cubicBezierCurve<sup>9+</sup> 111 112cubicBezierCurve(x1: number, y1: number, x2: number, y2: number): ICurve 113 114构造三阶贝塞尔曲线对象，确保曲线的值在0到1之间。 115 116**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 117 118**系统能力：** SystemCapability.ArkUI.ArkUI.Full 119 120**参数：** 121 122| 参数名 | 类型 | 必填 | 说明 | 123| ------ | ------ | ---- | ------------------------------------------------------------ | 124| x1 | number | 是 | 确定贝塞尔曲线第一点横坐标。<br/>取值范围：[0, 1]<br/>**说明：** <br/>设置的值小于0时，按0处理；设置的值大于1时，按1处理。 | 125| y1 | number | 是 | 确定贝塞尔曲线第一点纵坐标。<br/>取值范围：(-∞, +∞) | 126| x2 | number | 是 | 确定贝塞尔曲线第二点横坐标。<br/>取值范围：[0, 1]<br/>**说明：** <br/>设置的值小于0时，按0处理；设置的值大于1时，按1处理。 | 127| y2 | number | 是 | 确定贝塞尔曲线第二点纵坐标。<br/>取值范围：(-∞, +∞) | 128 129**返回值：** 130 131| 类型 | 说明 | 132| ---------------------------------- | ---------------- | 133| [ICurve](#icurve9) | 曲线的插值对象。 | 134 135 136**示例：** 137 138```ts 139import { curves } from '@kit.ArkUI'; 140curves.cubicBezierCurve(0.1, 0.0, 0.1, 1.0) // 创建一个三阶贝塞尔曲线 141``` 142 143 144## curves.springCurve<sup>9+</sup> 145 146springCurve(velocity: number, mass: number, stiffness: number, damping: number): ICurve 147 148构造弹簧曲线对象，曲线形状由弹簧参数决定，动画时长受animation、animateTo中的duration参数控制。 149 150**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 151 152**系统能力：** SystemCapability.ArkUI.ArkUI.Full 153 154**参数：** 155| 参数名 | 类型 | 必填 | 说明 | 156| --------- | ------ | ---- | ------------------------------------------------------------ | 157| velocity | number | 是 | 初始速度。是由外部因素对弹性动效产生的影响参数，其目的是保证对象从之前的运动状态平滑的过渡到弹性动效。该速度是归一化速度，其值等于动画开始时的实际速度除以动画属性改变值。<br/>取值范围：(-∞, +∞) | 158| mass | number | 是 | 质量。弹性系统的受力对象，会对弹性系统产生惯性影响。质量越大，震荡的幅度越大，恢复到平衡位置的速度越慢。<br/>取值范围：(0, +∞)<br/>**说明：** <br/>设置的值小于等于0时，按1处理。 | 159| stiffness | number | 是 | 刚度。是物体抵抗施加的力而形变的程度。在弹性系统中，刚度越大，抵抗变形的能力越强，恢复到平衡位置的速度就越快。<br/>取值范围：(0, +∞)<br/>**说明：** <br/>设置的值小于等于0时，按1处理。 | 160| damping | number | 是 | 阻尼。用于描述系统在受到扰动后震荡及衰减的情形。阻尼越大，弹性运动的震荡次数越少、震荡幅度越小。<br/>取值范围：(0, +∞)<br/>**说明：** <br/>设置的值小于等于0时，按1处理。 | 161 162 163**返回值：** 164 165| 类型 | 说明 | 166| ---------------------------------- | ---------------- | 167| [ICurve](#icurve9) | 曲线的插值对象。 | 168 169 170**示例：** 171 172```ts 173import { curves } from '@kit.ArkUI'; 174curves.springCurve(10, 1, 228, 30) // 创建一个弹簧插值曲线 175``` 176 177 178## curves.springMotion<sup>9+</sup> 179 180springMotion(response?: number, dampingFraction?: number, overlapDuration?: number): ICurve 181 182构造弹性动画曲线对象。如果对同一对象的同一属性进行多个弹性动画，每个动画会替换掉前一个动画，并继承之前的速度。 183 184**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 185 186**系统能力：** SystemCapability.ArkUI.ArkUI.Full 187 188**参数：** 189 190| 参数名 | 类型 | 必填 | 说明 | 191| --------- | ------ | ---- | ----- | 192| response | number | 否 | 弹簧自然振动周期，决定弹簧复位的速度。<br>默认值：0.55<br/>单位：秒<br/>取值范围：(0, +∞)<br/>**说明：** <br/>设置小于等于0的值时，按默认值0.55处理。 | 193| dampingFraction | number | 否 | 阻尼系数。<br>0表示无阻尼，一直处于震荡状态；<br>大于0小于1的值为欠阻尼，运动过程中会超出目标值；<br>等于1为临界阻尼；<br>大于1为过阻尼，运动过程中逐渐趋于目标值。<br>默认值：0.825<br/>单位：秒<br/>取值范围：[0, +∞)<br/>**说明：** <br/>设置小于0的值时，按默认值0.825处理。 | 194| overlapDuration | number | 否 | 弹性动画衔接时长。发生动画继承时，如果前后两个弹性动画response不一致，response参数会在overlapDuration时间内平滑过渡。<br/>默认值：0<br/>单位：秒<br/>取值范围：[0, +∞)<br/> **说明：** <br/>设置小于0的值时，按默认值0处理。<br>弹性动画曲线为物理曲线，[animation](arkui-ts/ts-animatorproperty.md)、[animateTo](arkui-ts/ts-explicit-animation.md)、[pageTransition](arkui-ts/ts-page-transition-animation.md)中的duration参数不生效，动画持续时间取决于springMotion动画曲线参数和之前的速度。时间不能归一，故不能通过该曲线的interpolate函数获得插值。 | 195 196 197**返回值：** 198 199| 类型 | 说明 | 200| ---------------------------------- | ---------------- | 201| [ICurve](#icurve9) | 曲线对象。<br>**说明:** <br>弹性动画曲线为物理曲线，[animation](arkui-ts/ts-animatorproperty.md)、[animateTo](arkui-ts/ts-explicit-animation.md)、[pageTransition](arkui-ts/ts-page-transition-animation.md)中的duration参数不生效，动画持续时间取决于springMotion动画曲线参数和之前的速度。时间不能归一，故不能通过该曲线的[interpolate](#interpolate9)函数获得插值。 | 202 203**示例：** 204 205```ts 206import { curves } from '@kit.ArkUI' 207curves.springMotion() // 创建一个默认弹性动画曲线 208curves.springMotion(0.5) // 创建指定response、其余参数默认的弹性动画曲线 209curves.springMotion(0.5, 0.6) // 创建指定response和dampingFraction、其余参数默认的弹性动画曲线 210curves.springMotion(0.5, 0.6, 0) // 创建三个参数均自定义的弹性动画曲线 211``` 212 213 214## curves.responsiveSpringMotion<sup>9+</sup> 215 216responsiveSpringMotion(response?: number, dampingFraction?: number, overlapDuration?: number): ICurve 217 218构造弹性跟手动画曲线对象，是[springMotion](#curvesspringmotion9)的一种特例，仅默认参数不同，可与springMotion混合使用。 219 220**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 221 222**系统能力：** SystemCapability.ArkUI.ArkUI.Full 223 224**参数：** 225 226| 参数名 | 类型 | 必填 | 说明 | 227| --------- | ------ | ---- | ----- | 228| response | number | 否 | 解释同springMotion中的response。<br/>默认值：0.15<br/>单位：秒<br/>取值范围：(0, +∞)<br/>**说明：** <br/>设置小于等于0的值时，按默认值0.15处理。 | 229| dampingFraction | number | 否 | 解释同springMotion中的dampingFraction。<br/>默认值：0.86<br/>单位：秒<br/>取值范围：[0, +∞)<br/>**说明：** <br/>设置小于0的值时，按默认值0.86处理。 | 230| overlapDuration | number | 否 | 解释同springMotion中的overlapDuration。<br/>默认值：0.25<br/>单位：秒<br/>取值范围：[0, +∞)<br/>**说明：** <br/>设置小于0的值时，按默认值0.25处理。<br/>弹性跟手动画曲线为springMotion的一种特例，仅默认值不同。如果使用自定义参数的弹性曲线，推荐使用springMotion构造曲线。如果使用跟手动画，推荐使用默认参数的弹性跟手动画曲线。<br/>[animation](arkui-ts/ts-animatorproperty.md)、[animateTo](arkui-ts/ts-explicit-animation.md)、[pageTransition](arkui-ts/ts-page-transition-animation.md)中的duration参数不生效，动画持续时间取决于responsiveSpringMotion动画曲线参数和之前的速度，也不能通过该曲线的interpolate函数获得插值。 | 231 232**返回值：** 233 234| 类型 | 说明 | 235| ---------------------------------- | ---------------- | 236| [ICurve](#icurve9) | 曲线对象。<br>**说明:** <br>1、弹性跟手动画曲线为springMotion的一种特例，仅默认值不同。如果使用自定义参数的弹性曲线，推荐使用springMotion构造曲线；如果使用跟手动画，推荐使用默认参数的弹性跟手动画曲线。<br>2、[animation](arkui-ts/ts-animatorproperty.md)、[animateTo](arkui-ts/ts-explicit-animation.md)、[pageTransition](arkui-ts/ts-page-transition-animation.md)中的duration参数不生效，动画持续时间取决于responsiveSpringMotion动画曲线参数和之前的速度，也不能通过该曲线的[interpolate](#interpolate9)函数获得插值。 | 237 238**示例：** 239 240```ts 241import { curves } from '@kit.ArkUI' 242curves.responsiveSpringMotion() // 创建一个默认弹性跟手动画曲线 243``` 244 245 246## curves.interpolatingSpring<sup>10+</sup> 247 248interpolatingSpring(velocity: number, mass: number, stiffness: number, damping: number): ICurve 249 250构造插值器弹簧曲线对象，生成一条从0到1的动画曲线，实际动画值根据曲线进行插值计算。动画时间由曲线参数决定，不受animation、animateTo中的duration参数控制。 251 252**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 253 254**系统能力：** SystemCapability.ArkUI.ArkUI.Full 255 256**参数：** 257| 参数名 | 类型 | 必填 | 说明 | 258| --------- | ------ | ---- | ----- | 259| velocity | number | 是 | 初始速度。外部因素对弹性动效产生的影响参数，目的是保证对象从之前的运动状态平滑地过渡到弹性动效。该速度是归一化速度，其值等于动画开始时的实际速度除以动画属性改变值。<br/>取值范围：(-∞, +∞) | 260| mass | number | 是 | 质量。弹性系统的受力对象，会对弹性系统产生惯性影响。质量越大，震荡的幅度越大，恢复到平衡位置的速度越慢。<br/>取值范围：(0, +∞)<br/>**说明：** <br/>设置的值小于等于0时，按1处理。 | 261| stiffness | number | 是 | 刚度。表示物体抵抗施加的力而形变的程度。刚度越大，抵抗变形的能力越强，恢复到平衡位置的速度越快。<br/>取值范围：(0, +∞)<br/>**说明：** <br/>设置的值小于等于0时，按1处理。 | 262| damping | number | 是 | 阻尼。用于描述系统在受到扰动后震荡及衰减的情形。阻尼越大，弹性运动的震荡次数越少、震荡幅度越小。<br/>取值范围：(0, +∞)<br/>**说明：** <br/>设置的值小于等于0时，按1处理。 | 263 264**返回值：** 265 266| 类型 | 说明 | 267| ---------------------------------- | ---------------- | 268| [ICurve](#icurve9) | 曲线对象。<br>**说明:** 弹性动画曲线为物理曲线，[animation](arkui-ts/ts-animatorproperty.md)、[animateTo](arkui-ts/ts-explicit-animation.md)、[pageTransition](arkui-ts/ts-page-transition-animation.md)中的duration参数不生效，动画持续时间取决于interpolatingSpring动画曲线参数。时间不能归一，故不能通过该曲线的[interpolate](#interpolate9)函数获得插值。 | 269 270**示例：** 271 272```ts 273import { curves } from '@kit.ArkUI' 274curves.interpolatingSpring(10, 1, 228, 30) // 创建一个时长由弹簧参数决定的弹簧插值曲线 275``` 276 277## curves.customCurve<sup>10+</sup> 278 279customCurve(interpolate: (fraction: number) => number): ICurve 280 281构造自定义曲线对象。 282 283**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 284 285**系统能力：** SystemCapability.ArkUI.ArkUI.Full 286 287**参数：** 288 289| 参数名 | 类型 | 必填 | 说明 | 290| ----------- | ---------------------------- | ---- | ------------------------------------------------------------ | 291| interpolate | (fraction: number) => number | 是 | 用户自定义的插值回调函数。<br/>fraction为动画开始时的插值输入x值。取值范围：[0,1]<br/>返回值为曲线的y值。取值范围：[0,1]<br />**说明：**<br />fraction等于0时，返回值为0对应动画起点，返回不为0，动画在起点处有跳变效果。<br/>fraction等于1时，返回值为1对应动画终点，返回值不为1将导致动画的终值不是状态变量的值，出现大于或者小于状态变量值，再跳变到状态变量值的效果。 | 292 293**返回值：** 294 295| 类型 | 说明 | 296| ------------------ | ---------------- | 297| [ICurve](#icurve9) | 曲线的插值对象。 | 298 299**示例：** 300 301```ts 302import { curves } from '@kit.ArkUI' 303let interpolate = (fraction:number):number => { 304 return Math.sqrt(fraction) 305} 306let curve = curves.customCurve(interpolate) // 创建一个用户自定义插值曲线 307``` 308 309## ICurve<sup>9+</sup> 310 311曲线对象，支持通过本模块中的[curves.cubicBezierCurve](#curvescubicbeziercurve9)、[curves.interpolatingSpring](#curvesinterpolatingspring10)等方法创建不同类型的曲线对象，并可通过曲线对象调用其[interpolate](#interpolate9)的成员方法。 312 313### interpolate<sup>9+</sup> 314 315interpolate(fraction: number): number 316 317插值曲线的插值计算函数，可以通过传入的归一化时间参数返回当前的插值 318 319**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 320 321**系统能力：** SystemCapability.ArkUI.ArkUI.Full 322 323**参数：** 324 325| 参数名 | 类型 | 必填 | 说明 | 326| -------- | ------ | ---- | ------------------------------------------------------------ | 327| fraction | number | 是 | 当前的归一化时间参数。<br/>取值范围：[0,1]<br/>**说明：** <br/>设置的值小于0时，按0处理；设置的值大于1时，按1处理。 | 328 329**返回值：** 330 331| 类型 | 说明 | 332| ------ | ------------------------------------ | 333| number | 返回归一化time时间点对应的曲线插值。 | 334 335**示例：** 336 337```ts 338import { curves } from '@kit.ArkUI' 339let curveValue = curves.initCurve(Curve.EaseIn) // 创建一个默认先慢后快插值曲线 340let value: number = curveValue.interpolate(0.5) // 计算得到时间到一半时的插值 341``` 342 343 344## curves.init<sup>(deprecated)</sup> 345 346init(curve?: Curve): string 347 348 349插值曲线的初始化函数，可以根据入参创建一个插值曲线对象，从API version9开始废弃，推荐使用[Curves.initCurve](#curvesinitcurve9)。 350 351**系统能力：** SystemCapability.ArkUI.ArkUI.Full 352 353**参数：** 354 355| 参数名 | 类型 | 必填 | 说明 | 356| ------ | --------------- | ---- | ----------------------------------- | 357| curve | [Curve](#curve) | 否 | 曲线类型。<br/>默认值：Curve.Linear | 358 359**返回值：** 360 361| 类型 | 说明 | 362| -------- | -------- | 363| string | 返回插值曲线对象。 | 364 365 366## curves.steps<sup>(deprecated)</sup> 367 368steps(count: number, end: boolean): string 369 370 371构造阶梯曲线对象，从API version9开始废弃，推荐使用[Curves. stepsCurve](#curvesstepscurve9)。 372 373**系统能力：** SystemCapability.ArkUI.ArkUI.Full 374 375**参数：** 376 377| 参数名 | 类型 | 必填 | 说明 | 378| ------ | ------- | ----| ------------------------------------------------------------ | 379| count | number | 是 | 阶梯的数量，需要为正整数。 | 380| end | boolean | 是 | 在每个间隔的起点或是终点发生阶跃变化。<br>-true：在终点发生阶跃变化。<br>-false：在起点发生阶跃变化。 | 381 382**返回值：** 383 384| 类型 | 说明 | 385| -------- | -------- | 386| string | 返回阶梯曲线对象。 | 387 388 389## curves.cubicBezier<sup>(deprecated)</sup> 390 391cubicBezier(x1: number, y1: number, x2: number, y2: number): string 392 393 394构造三阶贝塞尔曲线对象，曲线的值必须处于0-1之间，API version9开始废弃，推荐使用 [Curves.cubicBezierCurve](#curvescubicbeziercurve9)。 395 396**系统能力：** SystemCapability.ArkUI.ArkUI.Full 397 398**参数：** 399| 参数名 | 类型 | 必填 | 说明 | 400| ---- | ------ | ---- | -------------- | 401| x1 | number | 是 | 确定贝塞尔曲线第一点横坐标。 | 402| y1 | number | 是 | 确定贝塞尔曲线第一点纵坐标。 | 403| x2 | number | 是 | 确定贝塞尔曲线第二点横坐标。 | 404| y2 | number | 是 | 确定贝塞尔曲线第二点纵坐标。 | 405 406**返回值：** 407 408| 类型 | 说明 | 409| -------- | -------- | 410| string | 返回三阶贝塞尔曲线对象。 | 411 412 413## curves.spring<sup>(deprecated)</sup> 414 415spring(velocity: number, mass: number, stiffness: number, damping: number): string 416 417 418构造弹簧曲线对象，从API version9开始废弃，推荐使用[Curves.springCurve](#curvesspringcurve9)。 419 420**系统能力：** SystemCapability.ArkUI.ArkUI.Full 421 422**参数：** 423 424| 参数名 | 类型 | 必填 | 说明 | 425| --------- | ------ | ---- | ----- | 426| velocity | number | 是 | 初始速度。是由外部因素对弹性动效产生的影响参数，其目的是保证对象从之前的运动状态平滑地过渡到弹性动效。 | 427| mass | number | 是 | 质量。弹性系统的受力对象，会对弹性系统产生惯性影响。质量越大，震荡的幅度越大，恢复到平衡位置的速度越慢。 | 428| stiffness | number | 是 | 刚度。是物体抵抗施加的力而形变的程度。在弹性系统中，刚度越大，抵抗变形的能力越强，恢复到平衡位置的速度就越快。 | 429| damping | number | 是 | 阻尼。是一个纯数，无真实的物理意义，用于描述系统在受到扰动后震荡及衰减的情形。阻尼越大，弹性运动的震荡次数越少、震荡幅度越小。 | 430 431**返回值：** 432 433| 类型 | 说明 | 434| -------- | -------- | 435| string | 返回弹簧曲线对象。 | 436 437## 整体示例 438 439```ts 440// xxx.ets 441import { curves } from '@kit.ArkUI'; 442 443@Entry 444@Component 445struct ImageComponent { 446 @State widthSize: number = 200; 447 @State heightSize: number = 200; 448 449 build() { 450 Column() { 451 Text() 452 .margin({ top: 100 }) 453 .width(this.widthSize) 454 .height(this.heightSize) 455 .backgroundColor(Color.Red) 456 .onClick(() => { 457 let curve = curves.cubicBezierCurve(0.25, 0.1, 0.25, 1.0); 458 this.widthSize = curve.interpolate(0.5) * this.widthSize; 459 this.heightSize = curve.interpolate(0.5) * this.heightSize; 460 }) 461 .animation({ duration: 2000, curve: curves.stepsCurve(9, true) }) 462 }.width("100%").height("100%") 463 } 464} 465``` 466 467 468
