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