1# @ohos.animator (动画) 2 3本模块提供组件动画效果，包括定义动画、启动动画和以相反的顺序播放动画等。 4 5> **说明：** 6> 7> 本模块首批接口从API version 6开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。 8> 9> 本模块从API version 9开始支持在ArkTS中使用。 10> 11> 该模块不支持在[UIAbility](../apis-ability-kit/js-apis-app-ability-uiAbility.md)的文件声明处使用，即不能在UIAbility的生命周期中调用，需要在创建组件实例后使用。 12> 13> 本模块功能依赖UI的执行上下文，不可在UI上下文不明确的地方使用，参见[UIContext](js-apis-arkui-UIContext.md#uicontext)说明。 14> 15> 从API version 10开始，可以通过使用[UIContext](js-apis-arkui-UIContext.md#uicontext)中的[createAnimator](js-apis-arkui-UIContext.md#createanimator)来明确UI的执行上下文。 16 17## 导入模块 18 19```ts 20import { Animator as animator, AnimatorOptions,AnimatorResult } from '@kit.ArkUI'; 21``` 22 23## Animator 24 25定义Animator类。 26 27**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 28 29**系统能力：** SystemCapability.ArkUI.ArkUI.Full 30 31### create<sup>9+</sup> 32 33create(options: AnimatorOptions): AnimatorResult 34 35创建动画。 36 37**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 38 39**系统能力：** SystemCapability.ArkUI.ArkUI.Full 40 41**参数：** 42 43| 参数名 | 类型 | 必填 | 说明 | 44| ------- | ----------------------------------- | ---- | ------- | 45| options | [AnimatorOptions](#animatoroptions) | 是 | 定义动画选项。 | 46 47**返回值：** 48 49| 类型 | 说明 | 50| --------------------------------- | ------------- | 51| [AnimatorResult](#animatorresult) | Animator结果接口。 | 52 53**错误码**： 54 55以下错误码详细介绍请参考[通用错误码](../errorcode-universal.md)。 56 57| 错误码ID | 错误信息 | 58| ------- | -------- | 59| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 60 61**示例：** 62 63> **说明：** 64> 65> 推荐通过使用[UIContext](js-apis-arkui-UIContext.md#uicontext)中的[createAnimator](js-apis-arkui-UIContext.md#createanimator)接口明确UI上下文。 66 67```ts 68import { Animator as animator, AnimatorOptions } from '@kit.ArkUI'; 69 70let options: AnimatorOptions = { 71 duration: 1500, 72 easing: "friction", 73 delay: 0, 74 fill: "forwards", 75 direction: "normal", 76 iterations: 3, 77 begin: 200.0, 78 end: 400.0 79}; 80animator.create(options); // 建议使用 UIContext.creatAnimator()接口 81``` 82 83### createAnimator<sup>(deprecated)</sup> 84 85createAnimator(options: AnimatorOptions): AnimatorResult 86 87创建动画 88 89从API version9开始不再维护，建议使用[create<sup>9+</sup>](#create9) 90 91**系统能力：** SystemCapability.ArkUI.ArkUI.Full 92 93**参数：** 94 95| 参数名 | 类型 | 必填 | 说明 | 96| ------- | ----------------------------------- | ---- | ------- | 97| options | [AnimatorOptions](#animatoroptions) | 是 | 定义动画选项。 | 98 99**返回值：** 100 101| 类型 | 说明 | 102| --------------------------------- | ------------- | 103| [AnimatorResult](#animatorresult) | Animator结果接口。 | 104 105**示例：** 106 107```ts 108import { Animator as animator } from '@kit.ArkUI'; 109 110let options: AnimatorOptions = { 111 // xxx.js文件中不需要强调显式类型AnimatorOptions 112 duration: 1500, 113 easing: "friction", 114 delay: 0, 115 fill: "forwards", 116 direction: "normal", 117 iterations: 3, 118 begin: 200.0, 119 end: 400.0, 120}; 121this.animator = animator.createAnimator(options); 122``` 123 124## AnimatorResult 125 126定义Animator结果接口。 127 128### reset<sup>9+</sup> 129 130reset(options: AnimatorOptions): void 131 132更新当前动画器。 133 134**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 135 136**系统能力：** SystemCapability.ArkUI.ArkUI.Full 137 138**参数：** 139 140| 参数名 | 类型 | 必填 | 说明 | 141| ------- | ----------------------------------- | ---- | ------- | 142| options | [AnimatorOptions](#animatoroptions) | 是 | 定义动画选项。 | 143 144**错误码：** 145 146以下错误码的详细介绍请参见[ohos.animator(动画)](errorcode-animator.md)错误码。 147 148| 错误码ID | 错误信息 | 149| --------- | ------- | 150| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 151| 100001 | The specified page is not found or the object property list is not obtained.| 152 153 154**示例：** 155 156```ts 157import { Animator as animator, AnimatorOptions, AnimatorResult } from '@kit.ArkUI'; 158import { BusinessError } from '@kit.BasicServicesKit'; 159 160let options: AnimatorOptions = { 161 duration: 1500, 162 easing: "friction", 163 delay: 0, 164 fill: "forwards", 165 direction: "normal", 166 iterations: 3, 167 begin: 200.0, 168 end: 400.0 169}; 170let optionsNew: AnimatorOptions = { 171 duration: 1500, 172 easing: "friction", 173 delay: 0, 174 fill: "forwards", 175 direction: "normal", 176 iterations: 5, 177 begin: 200.0, 178 end: 400.0 179}; 180try { 181 let animatorResult: AnimatorResult | undefined = animator.create(options) 182 animatorResult.reset(optionsNew); 183} catch (error) { 184 let message = (error as BusinessError).message 185 let code = (error as BusinessError).code 186 console.error(`Animator reset failed, error code: ${code}, message: ${message}.`); 187} 188``` 189 190### play 191 192play(): void 193 194启动动画。动画会保留上一次的播放状态，比如播放状态设置reverse后，再次播放会保留reverse的播放状态。 195 196**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 197 198**系统能力：** SystemCapability.ArkUI.ArkUI.Full 199 200**示例：** 201 202```ts 203animator.play(); 204``` 205 206### finish 207 208finish(): void 209 210结束动画。 211 212**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 213 214**系统能力：** SystemCapability.ArkUI.ArkUI.Full 215 216**示例：** 217 218```ts 219animator.finish(); 220``` 221 222### pause 223 224pause(): void 225 226暂停动画。 227 228**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 229 230**系统能力：** SystemCapability.ArkUI.ArkUI.Full 231 232**示例：** 233 234```ts 235animator.pause(); 236``` 237 238### cancel 239 240cancel(): void 241 242取消动画。 243 244**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 245 246**系统能力：** SystemCapability.ArkUI.ArkUI.Full 247 248**示例：** 249 250```ts 251animator.cancel(); 252``` 253 254### reverse 255 256reverse(): void 257 258以相反的顺序播放动画。使用interpolating-spring曲线时此接口无效。 259 260**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 261 262**系统能力：** SystemCapability.ArkUI.ArkUI.Full 263 264**示例：** 265 266```ts 267animator.reverse(); 268``` 269 270### onFrame<sup>12+</sup> 271 272onFrame: (progress: number) => void 273 274接收到帧时回调。 275 276**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 277 278**系统能力：** SystemCapability.ArkUI.ArkUI.Full 279 280**参数：** 281 282| 参数名 | 类型 | 必填 | 说明 | 283| -------- | ------ | ---- | -------- | 284| progress | number | 是 | 动画的当前值。 | 285 286**示例：** 287 288```ts 289import { Animator as animator, AnimatorResult } from '@kit.ArkUI'; 290 291let animatorResult: AnimatorResult | undefined = animator.create(options) 292animatorResult.onFrame = (value: number) => { 293 console.info("onFrame callback") 294} 295``` 296 297### onFinish<sup>12+</sup> 298 299onFinish: () => void 300 301动画完成时回调。 302 303**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 304 305**系统能力：** SystemCapability.ArkUI.ArkUI.Full 306 307**示例：** 308 309```ts 310import {Animator as animator, AnimatorResult } from '@kit.ArkUI'; 311let animatorResult:AnimatorResult|undefined = animator.create(options) 312animatorResult.onFinish = ()=> { 313 console.info("onFinish callback") 314} 315``` 316 317### onCancel<sup>12+</sup> 318 319onCancel: () => void 320 321动画被取消时回调。 322 323**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 324 325**系统能力：** SystemCapability.ArkUI.ArkUI.Full 326 327**示例：** 328 329```ts 330import { Animator as animator, AnimatorResult } from '@kit.ArkUI'; 331 332let animatorResult: AnimatorResult | undefined = animator.create(options) 333animatorResult.onCancel = () => { 334 console.info("onCancel callback") 335} 336``` 337 338### onRepeat<sup>12+</sup> 339 340onRepeat: () => void 341 342动画重复时回调。 343 344**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 345 346**系统能力：** SystemCapability.ArkUI.ArkUI.Full 347 348**示例：** 349 350```ts 351import { Animator as animator, AnimatorResult } from '@kit.ArkUI'; 352 353let animatorResult: AnimatorResult | undefined = animator.create(options) 354animatorResult.onRepeat = () => { 355 console.info("onRepeat callback") 356} 357``` 358 359### onframe<sup>(deprecated)</sup> 360 361> **说明：** 362> 363> 从API version 12开始废弃，推荐使用[onFrame](#onframe12)。 364 365onframe: (progress: number) => void 366 367接收到帧时回调。 368 369**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 370 371**系统能力：** SystemCapability.ArkUI.ArkUI.Full 372 373**参数：** 374 375| 参数名 | 类型 | 必填 | 说明 | 376| -------- | ------ | ---- | -------- | 377| progress | number | 是 | 动画的当前进度。 | 378 379**示例：** 380 381```ts 382import { Animator as animator, AnimatorResult } from '@kit.ArkUI'; 383 384let animatorResult: AnimatorResult | undefined = animator.create(options) 385animatorResult.onframe = (value) => { 386 console.info("onframe callback") 387} 388``` 389 390### onfinish<sup>(deprecated)</sup> 391 392> **说明：** 393> 394> 从API version 12开始废弃，推荐使用[onFinish](#onfinish12)。 395 396onfinish: () => void 397 398动画完成时回调。 399 400**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 401 402**系统能力：** SystemCapability.ArkUI.ArkUI.Full 403 404**示例：** 405 406```ts 407import { Animator as animator, AnimatorResult } from '@kit.ArkUI'; 408 409let animatorResult: AnimatorResult | undefined = animator.create(options) 410animatorResult.onfinish = () => { 411 console.info("onfinish callback") 412} 413``` 414 415### oncancel<sup>(deprecated)</sup> 416 417> **说明：** 418> 419> 从API version 12开始废弃，推荐使用[onCancel](#oncancel12)。 420 421 422oncancel: () => void 423 424动画被取消时回调。 425 426**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 427 428**系统能力：** SystemCapability.ArkUI.ArkUI.Full 429 430**示例：** 431 432```ts 433import { Animator as animator, AnimatorResult } from '@kit.ArkUI'; 434 435let animatorResult: AnimatorResult | undefined = animator.create(options) 436animatorResult.oncancel = () => { 437 console.info("oncancel callback") 438} 439``` 440 441### onrepeat<sup>(deprecated)</sup> 442 443> **说明：** 444> 445> 从API version 12开始废弃，推荐使用[onRepeat](#onrepeat12)。 446 447onrepeat: () => void 448 449动画重复时回调。 450 451**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 452 453**系统能力：** SystemCapability.ArkUI.ArkUI.Full 454 455**示例：** 456 457```ts 458import { Animator as animator, AnimatorResult } from '@kit.ArkUI'; 459 460let animatorResult: AnimatorResult | undefined = animator.create(options) 461animatorResult.onrepeat = () => { 462 console.info("onrepeat callback") 463} 464``` 465 466### setExpectedFrameRateRange<sup>12+</sup> 467 468setExpectedFrameRateRange(rateRange: ExpectedFrameRateRange): void 469 470设置期望的帧率范围。 471 472**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 473 474**系统能力：** SystemCapability.ArkUI.ArkUI.Full 475 476**参数：** 477 478| 参数名 | 类型 | 必填 | 说明 | 479| --------------- | ------------------------------------------ | ---- | -----------------------------| 480| rateRange | [ExpectedFrameRateRange](../apis-arkui/arkui-ts/ts-explicit-animation.md#expectedframeraterange11)| 是 | 设置期望的帧率范围。| 481 482**示例：** 483 484```ts 485import { Animator as animator, AnimatorResult } from '@kit.ArkUI'; 486 487let animatorResult: AnimatorResult | undefined = animator.create({ 488 duration: 2000, 489 easing: "ease", 490 delay: 0, 491 fill: "forwards", 492 direction: "normal", 493 iterations: 1, 494 begin: 100, 495 end: 200 496}) 497let expectedFrameRate: ExpectedFrameRateRange = { 498 min: 0, 499 max: 120, 500 expected: 30 501} 502animatorResult.setExpectedFrameRateRange(expectedFrameRate); 503``` 504 505### update<sup>(deprecated)</sup> 506 507update(options: AnimatorOptions): void 508 509更新当前动画器。 510 511从API version9开始不再维护，建议使用[reset<sup>9+</sup>](#reset9) 512 513**系统能力：** SystemCapability.ArkUI.ArkUI.Full 514 515**参数：** 516 517| 参数名 | 类型 | 必填 | 说明 | 518| ------- | ----------------------------------- | ---- | ------- | 519| options | [AnimatorOptions](#animatoroptions) | 是 | 定义动画选项。 | 520 521**示例：** 522 523```ts 524animator.update(options); 525``` 526 527## AnimatorOptions 528 529定义动画选项。 530 531**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 532 533**系统能力：** SystemCapability.ArkUI.ArkUI.Full 534 535| 名称 | 类型 | 必填 | 说明 | 536| ---------- | ----------------------------------------------------------- | ---- | ------------------------------------------------------------ | 537| duration | number | 是 | 动画播放的时长，单位毫秒。<br/>默认值:0。 | 538| easing | string | 是 | 动画插值曲线，仅支持以下可选值：<br/>"linear"：动画线性变化。<br/>"ease"：动画开始和结束时的速度较慢，cubic-bezier(0.25、0.1、0.25、1.0)。<br/>"ease-in"：动画播放速度先慢后快，cubic-bezier(0.42, 0.0, 1.0, 1.0)。<br/>"ease-out"：动画播放速度先快后慢，cubic-bezier(0.0, 0.0, 0.58, 1.0)。<br/>"ease-in-out"：动画播放速度先加速后减速，cubic-bezier(0.42, 0.0, 0.58, 1.0)。<br/>"fast-out-slow-in"：标准曲线，cubic-bezier(0.4，0.0，0.2，1.0)。<br/>"linear-out-slow-in"：减速曲线，cubic-bezier(0.0，0.0，0.2，1.0)。<br>"fast-out-linear-in"：加速曲线，cubic-bezier(0.4, 0.0, 1.0, 1.0)。<br/>"friction"：阻尼曲线，cubic-bezier(0.2, 0.0, 0.2, 1.0)。<br/>"extreme-deceleration"：急缓曲线，cubic-bezier(0.0, 0.0, 0.0, 1.0)。<br/>"rhythm"：节奏曲线，cubic-bezier(0.7, 0.0, 0.2, 1.0)。<br/>"sharp"：锐利曲线，cubic-bezier(0.33, 0.0, 0.67, 1.0)。<br/>"smooth"：平滑曲线，cubic-bezier(0.4, 0.0, 0.4, 1.0)。<br/>"cubic-bezier(x1,y1,x2,y2)"：三次贝塞尔曲线，x1、x2的值必须处于0-1之间。例如"cubic-bezier(0.42,0.0,0.58,1.0)"。<br/>"steps(number,step-position)"：阶梯曲线，number必须设置，为正整数，step-position参数可选，支持设置start或end，默认值为end。例如"steps(3,start)"。<br/>"interpolating-spring(velocity,mass,stiffness,damping)"：插值弹簧曲线，从API version 11开始支持且仅在ArkTS中支持使用。velocity、mass、stiffness、damping都是数值类型，且mass、stiffness、damping参数均应该大于0，具体参数含义参考[插值弹簧曲线](./js-apis-curve.md#curvesinterpolatingspring10)。使用interpolating-spring时，duration不生效，由弹簧参数决定；fill、direction、iterations设置无效，fill固定设置为"forwards"，direction固定设置为"normal"，iterations固定设置为1，且对animator的[reverse](#reverse)函数调用无效。即animator使用interpolating-spring时只能正向播放1次。<br/>默认值:"ease"。 | 539| delay | number | 是 | 动画延时播放时长，单位毫秒，设置为0时，表示不延时。设置为负数时动画提前播放，如果提前播放的时长大于动画总时长，动画直接过渡到终点。<br/>默认值:0。 | 540| fill | 'none' \| 'forwards' \| 'backwards' \| 'both' | 是 | 动画执行后是否恢复到初始状态，动画执行后，动画结束时的状态（在最后一个关键帧中定义）将保留。<br/>'none'：在动画执行之前和之后都不会应用任何样式到目标上。<br/>'forwards'：在动画结束后，目标将保留动画结束时的状态（在最后一个关键帧中定义）。<br/>'backwards'：动画将在animation-delay期间应用第一个关键帧中定义的值。当animation-direction为'normal'或'alternate'时应用from关键帧中的值，当animation-direction为'reverse'或'alternate-reverse'时应用to关键帧中的值。<br/>'both'：动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。 | 541| direction | 'normal' \| 'reverse' \| 'alternate' \| 'alternate-reverse' | 是 | 动画播放模式。<br/>'normal'： 动画正向循环播放。<br/>'reverse'： 动画反向循环播放。<br/>'alternate'：动画交替循环播放，奇数次正向播放，偶数次反向播放。<br/>'alternate-reverse'：动画反向交替循环播放，奇数次反向播放，偶数次正向播放。<br/>默认值:'normal'。 | 542| iterations | number | 是 | 动画播放次数。设置为0时不播放，设置为-1时无限次播放。<br/>**说明:** 设置为除-1外其他负数视为无效取值，无效取值动画默认播放1次。 | 543| begin | number | 是 | 动画插值起点。<br/>默认值:0。 | 544| end | number | 是 | 动画插值终点。<br/>默认值:1。 | 545 546 547## 完整示例 548### 基于JS扩展的类Web开发范式 549 550```html 551<!-- hml --> 552<div class="container"> 553 <div class="Animation" style="height: {{divHeight}}px; width: {{divWidth}}px; background-color: red;" onclick="Show"> 554 </div> 555</div> 556``` 557 558```ts 559import { Animator as animator, AnimatorResult } from '@kit.ArkUI'; 560import { BusinessError } from '@kit.BasicServicesKit'; 561 562let DataTmp: Record<string, Animator> = { 563 'divWidth': 200, 564 'divHeight': 200, 565 'animator': animator 566} 567 568class Tmp { 569 data: animator = DataTmp 570 onInit: Function = () => { 571 } 572 Show: Function = () => { 573 } 574} 575 576class DateT { 577 divWidth: number = 0 578 divHeight: number = 0 579 animator: AnimatorResult | null = null 580} 581 582(Fn: (v: Tmp) => void) => { 583 Fn({ 584 data: DataTmp, 585 onInit() { 586 let options: AnimatorOptions = { 587 duration: 1500, 588 easing: "friction", 589 delay: 0, 590 fill: "forwards", 591 direction: "normal", 592 iterations: 2, 593 begin: 200.0, 594 end: 400.0 595 }; 596 let DataTmp: DateT = { 597 divWidth: 200, 598 divHeight: 200, 599 animator: null 600 } 601 DataTmp.animator = animator.create(options); 602 }, 603 Show() { 604 let options1: AnimatorOptions = { 605 duration: 1500, 606 easing: "friction", 607 delay: 0, 608 fill: "forwards", 609 direction: "normal", 610 iterations: 2, 611 begin: 0, 612 end: 400.0, 613 }; 614 let DataTmp: DateT = { 615 divWidth: 200, 616 divHeight: 200, 617 animator: null 618 } 619 try { 620 DataTmp.animator = animator.create(options1); 621 DataTmp.animator.reset(options1); 622 } catch (error) { 623 let message = (error as BusinessError).message 624 let code = (error as BusinessError).code 625 console.error(`Animator reset failed, error code: ${code}, message: ${message}.`); 626 } 627 let _this = DataTmp; 628 if (DataTmp.animator) { 629 DataTmp.animator.onFrame = (value: number) => { 630 _this.divWidth = value; 631 _this.divHeight = value; 632 }; 633 DataTmp.animator.play(); 634 } 635 } 636 }) 637} 638``` 639 640  641 642### 基于ArkTS扩展的声明式开发范式 643 644> **说明：** 645> 646> 推荐通过使用[UIContext](js-apis-arkui-UIContext.md#uicontext)中的[createAnimator](js-apis-arkui-UIContext.md#createanimator)接口明确UI上下文。 647 648```ts 649import { Animator as animator, AnimatorResult } from '@kit.ArkUI'; 650 651@Entry 652@Component 653struct AnimatorTest { 654 private TAG: string = '[AnimatorTest]' 655 private backAnimator: AnimatorResult | undefined = undefined 656 private flag: boolean = false 657 @State wid: number = 100 658 @State hei: number = 100 659 660 create() { 661 this.backAnimator = animator.create({ 662 // 建议使用 this.getUIContext.creatAnimator()接口 663 duration: 2000, 664 easing: "ease", 665 delay: 0, 666 fill: "forwards", 667 direction: "normal", 668 iterations: 1, 669 begin: 100, 670 end: 200 671 }) 672 this.backAnimator.onFinish = () => { 673 this.flag = true 674 console.info(this.TAG, 'backAnimator onfinish') 675 } 676 this.backAnimator.onRepeat = () => { 677 console.info(this.TAG, 'backAnimator repeat') 678 } 679 this.backAnimator.onCancel = () => { 680 console.info(this.TAG, 'backAnimator cancel') 681 } 682 this.backAnimator.onFrame = (value: number) => { 683 this.wid = value 684 this.hei = value 685 } 686 } 687 688 aboutToDisappear() { 689 // 由于backAnimator在onframe中引用了this, this中保存了backAnimator， 690 // 在自定义组件消失时应该将保存在组件中的backAnimator置空，避免内存泄漏 691 this.backAnimator = undefined; 692 } 693 694 build() { 695 Column() { 696 Column() { 697 Column() 698 .width(this.wid) 699 .height(this.hei) 700 .backgroundColor(Color.Red) 701 } 702 .width('100%') 703 .height(300) 704 705 Column() { 706 Row() { 707 Button('create') 708 .fontSize(30) 709 .fontColor(Color.Black) 710 .onClick(() => { 711 this.create() 712 }) 713 } 714 .padding(10) 715 716 Row() { 717 Button('play') 718 .fontSize(30) 719 .fontColor(Color.Black) 720 .onClick(() => { 721 this.flag = false 722 if (this.backAnimator) { 723 this.backAnimator.play() 724 } 725 }) 726 } 727 .padding(10) 728 729 Row() { 730 Button('pause') 731 .fontSize(30) 732 .fontColor(Color.Black) 733 .onClick(() => { 734 if (this.backAnimator) { 735 this.backAnimator.pause() 736 } 737 }) 738 } 739 .padding(10) 740 741 Row() { 742 Button('finish') 743 .fontSize(30) 744 .fontColor(Color.Black) 745 .onClick(() => { 746 this.flag = true 747 if (this.backAnimator) { 748 this.backAnimator.finish() 749 } 750 }) 751 } 752 .padding(10) 753 754 Row() { 755 Button('reverse') 756 .fontSize(30) 757 .fontColor(Color.Black) 758 .onClick(() => { 759 this.flag = false 760 if (this.backAnimator) { 761 this.backAnimator.reverse() 762 } 763 }) 764 } 765 .padding(10) 766 767 Row() { 768 Button('cancel') 769 .fontSize(30) 770 .fontColor(Color.Black) 771 .onClick(() => { 772 if (this.backAnimator) { 773 this.backAnimator.cancel() 774 } 775 }) 776 } 777 .padding(10) 778 779 Row() { 780 Button('reset') 781 .fontSize(30) 782 .fontColor(Color.Black) 783 .onClick(() => { 784 if (this.flag) { 785 this.flag = false 786 if (this.backAnimator) { 787 this.backAnimator.reset({ 788 duration: 3000, 789 easing: "ease-in", 790 delay: 0, 791 fill: "forwards", 792 direction: "alternate", 793 iterations: 3, 794 begin: 100, 795 end: 300 796 }) 797 } 798 } else { 799 console.info(this.TAG, 'Animation not ended') 800 } 801 }) 802 } 803 .padding(10) 804 } 805 } 806 } 807} 808``` 809 810
