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  ![zh-cn_image_00007](figures/zh-cn_image_00007.gif)
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