1# @ohos.animator (Animator) 2 3The **Animator** module provides APIs for applying animation effects, including defining animations, starting animations, and playing animations in reverse order. 4 5> **NOTE** 6> 7> The initial APIs of this module are supported since API version 6. Newly added APIs will be marked with a superscript to indicate their earliest API version. 8> 9> This module can be used in ArkTS since API version 9. 10> 11> This module cannot be used in the file declaration of the [UIAbility](../apis-ability-kit/js-apis-app-ability-uiAbility.md). In other words, the APIs of this module can be used only after a component instance is created; they cannot be called in the lifecycle of the UIAbility. 12> 13> The functionality of this module depends on UI context. This means that the APIs of this module cannot be used where the UI context is unclear. For details, see [UIContext](js-apis-arkui-UIContext.md#uicontext). 14> 15> Since API version 10, you can use the [createAnimator](js-apis-arkui-UIContext.md#createanimator) API in [UIContext](js-apis-arkui-UIContext.md#uicontext), which ensures that your animation is executed in the intended UI instance. 16 17## Modules to Import 18 19```ts 20import { Animator as animator, AnimatorOptions,AnimatorResult } from '@kit.ArkUI'; 21``` 22## create<sup>9+</sup> 23 24create(options: AnimatorOptions): AnimatorResult 25 26Creates an **Animator** object. 27 28**Atomic service API**: This API can be used in atomic services since API version 11. 29 30**System capability**: SystemCapability.ArkUI.ArkUI.Full 31 32**Parameters** 33 34| Name | Type | Mandatory | Description | 35| ------- | ----------------------------------- | ---- | ------- | 36| options | [AnimatorOptions](#animatoroptions) | Yes | Animator options.| 37 38**Return value** 39 40| Type | Description | 41| --------------------------------- | ------------- | 42| [AnimatorResult](#animatorresult) | Animator result.| 43 44**Error codes** 45 46For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 47 48| ID| Error Message| 49| ------- | -------- | 50| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 51 52**Example** 53 54> **NOTE** 55> 56> For precise animation control, use the [createAnimator](js-apis-arkui-UIContext.md#createanimator) API in [UIContext](js-apis-arkui-UIContext.md#uicontext) to specify the UI context. 57 58 ```ts 59import {Animator as animator, AnimatorOptions, AnimatorResult } from '@kit.ArkUI'; 60import { BusinessError } from '@kit.BasicServicesKit'; 61let options: AnimatorOptions = { 62 duration: 1500, 63 easing: "friction", 64 delay: 0, 65 fill: "forwards", 66 direction: "normal", 67 iterations: 3, 68 begin: 200.0, 69 end: 400.0 70}; 71animator.create (options);// You are advised to use UIContext.creatAnimator(). 72 ``` 73 74## AnimatorResult 75 76Defines the animator result. 77 78### reset<sup>9+</sup> 79 80reset(options: AnimatorOptions): void 81 82Updates this animator. 83 84**Atomic service API**: This API can be used in atomic services since API version 11. 85 86**System capability**: SystemCapability.ArkUI.ArkUI.Full 87 88**Parameters** 89 90| Name | Type | Mandatory | Description | 91| ------- | ----------------------------------- | ---- | ------- | 92| options | [AnimatorOptions](#animatoroptions) | Yes | Animator options.| 93 94**Error codes** 95 96For details about the error codes, see [Animator Error Codes](errorcode-animator.md). 97 98| ID | Error Message| 99| --------- | ------- | 100| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 101| 100001 | The specified page is not found or the object property list is not obtained.| 102 103 104**Example** 105 106```ts 107import {Animator as animator, AnimatorOptions, AnimatorResult } from '@kit.ArkUI'; 108import { BusinessError } from '@kit.BasicServicesKit'; 109let options: AnimatorOptions = { 110 duration: 1500, 111 easing: "friction", 112 delay: 0, 113 fill: "forwards", 114 direction: "normal", 115 iterations: 3, 116 begin: 200.0, 117 end: 400.0 118}; 119let optionsNew: AnimatorOptions = { 120 duration: 1500, 121 easing: "friction", 122 delay: 0, 123 fill: "forwards", 124 direction: "normal", 125 iterations: 5, 126 begin: 200.0, 127 end: 400.0 128}; 129try { 130 let animatorResult:AnimatorResult|undefined = animator.create(options) 131 animatorResult.reset(optionsNew); 132} catch(error) { 133 let message = (error as BusinessError).message 134 let code = (error as BusinessError).code 135 console.error(`Animator reset failed, error code: ${code}, message: ${message}.`); 136} 137``` 138 139### play 140 141play(): void 142 143Plays this animation. The animation retains the previous playback state. For example, if the animation is set to **reverse** and paused, it will remain in **reverse** when resumed. 144 145**Atomic service API**: This API can be used in atomic services since API version 11. 146 147**System capability**: SystemCapability.ArkUI.ArkUI.Full 148 149**Example** 150 151```ts 152animator.play(); 153``` 154 155### finish 156 157finish(): void 158 159Ends this animation. 160 161**Atomic service API**: This API can be used in atomic services since API version 11. 162 163**System capability**: SystemCapability.ArkUI.ArkUI.Full 164 165**Example** 166 167```ts 168animator.finish(); 169``` 170 171### pause 172 173pause(): void 174 175Pauses this animation. 176 177**Atomic service API**: This API can be used in atomic services since API version 11. 178 179**System capability**: SystemCapability.ArkUI.ArkUI.Full 180 181**Example** 182 183```ts 184animator.pause(); 185``` 186 187### cancel 188 189cancel(): void 190 191Cancels this animation. 192 193**Atomic service API**: This API can be used in atomic services since API version 11. 194 195**System capability**: SystemCapability.ArkUI.ArkUI.Full 196 197**Example** 198 199```ts 200animator.cancel(); 201``` 202 203### reverse 204 205reverse(): void 206 207Plays this animation in reverse order. This API does not take effect when the interpolating spring curve is used. 208 209**Atomic service API**: This API can be used in atomic services since API version 11. 210 211**System capability**: SystemCapability.ArkUI.ArkUI.Full 212 213**Example** 214 215```ts 216animator.reverse(); 217``` 218 219### onFrame<sup>12+</sup> 220 221onFrame: (progress: number) => void 222 223Called when a frame is received. 224 225**Atomic service API**: This API can be used in atomic services since API version 12. 226 227**System capability**: SystemCapability.ArkUI.ArkUI.Full 228 229**Parameters** 230 231| Name | Type | Mandatory | Description | 232| -------- | ------ | ---- | -------- | 233| progress | number | Yes | Current value of the animation.| 234 235**Example** 236 237```ts 238import {Animator as animator, AnimatorResult } from '@kit.ArkUI'; 239let animatorResult:AnimatorResult|undefined = animator.create(options) 240animatorResult.onFrame = (value:number)=> { 241 console.info("onFrame callback") 242} 243``` 244 245### onFinish<sup>12+</sup> 246 247onFinish: () => void 248 249Called when this animation is finished. 250 251**Atomic service API**: This API can be used in atomic services since API version 12. 252 253**System capability**: SystemCapability.ArkUI.ArkUI.Full 254 255**Example** 256 257```ts 258import {Animator as animator, AnimatorResult } from '@kit.ArkUI'; 259let animatorResult:AnimatorResult|undefined = animator.create(options) 260animatorResult.onFinish = ()=> { 261 console.info("onFinish callback") 262} 263``` 264 265### onCancel<sup>12+</sup> 266 267onCancel: () => void 268 269Called when this animation is canceled. 270 271**Atomic service API**: This API can be used in atomic services since API version 12. 272 273**System capability**: SystemCapability.ArkUI.ArkUI.Full 274 275**Example** 276 277```ts 278import { Animator as animator, AnimatorResult } from '@kit.ArkUI'; 279let animatorResult:AnimatorResult|undefined = animator.create(options) 280animatorResult.onCancel = ()=> { 281 console.info("onCancel callback") 282} 283``` 284 285### onRepeat<sup>12+</sup> 286 287onRepeat: () => void 288 289Called when this animation repeats. 290 291**Atomic service API**: This API can be used in atomic services since API version 12. 292 293**System capability**: SystemCapability.ArkUI.ArkUI.Full 294 295**Example** 296 297```ts 298import {Animator as animator, AnimatorResult} from '@kit.ArkUI'; 299let animatorResult:AnimatorResult|undefined = animator.create(options) 300animatorResult.onRepeat = ()=> { 301 console.info("onRepeat callback") 302} 303``` 304 305### onframe<sup>(deprecated)</sup> 306 307> **NOTE** 308> 309> This API is deprecated since API version 12. You are advised to use [onFrame](#onframe12) instead. 310 311onframe: (progress: number) => void 312 313Called when a frame is received. 314 315**Atomic service API**: This API can be used in atomic services since API version 11. 316 317**System capability**: SystemCapability.ArkUI.ArkUI.Full 318 319**Parameters** 320 321| Name | Type | Mandatory | Description | 322| -------- | ------ | ---- | -------- | 323| progress | number | Yes | Current progress of the animation.| 324 325**Example** 326 327```ts 328import { Animator as animator, AnimatorResult } from '@kit.ArkUI'; 329let animatorResult:AnimatorResult|undefined = animator.create(options) 330animatorResult.onframe = (value)=> { 331 console.info("onframe callback") 332} 333``` 334 335### onfinish<sup>(deprecated)</sup> 336 337> **NOTE** 338> 339> This API is deprecated since API version 12. You are advised to use [onFinish](#onfinish12) instead. 340 341onfinish: () => void 342 343Called when this animation is finished. 344 345**Atomic service API**: This API can be used in atomic services since API version 11. 346 347**System capability**: SystemCapability.ArkUI.ArkUI.Full 348 349**Example** 350 351```ts 352import { Animator as animator, AnimatorResult } from '@kit.ArkUI'; 353let animatorResult:AnimatorResult|undefined = animator.create(options) 354animatorResult.onfinish = ()=> { 355 console.info("onfinish callback") 356} 357``` 358 359### oncancel<sup>(deprecated)</sup> 360 361> **NOTE** 362> 363> This API is deprecated since API version 12. You are advised to use [onCancel](#oncancel12) instead. 364 365 366oncancel: () => void 367 368Called when this animation is canceled. 369 370**Atomic service API**: This API can be used in atomic services since API version 11. 371 372**System capability**: SystemCapability.ArkUI.ArkUI.Full 373 374**Example** 375 376```ts 377import { Animator as animator, AnimatorResult } from '@kit.ArkUI'; 378let animatorResult:AnimatorResult|undefined = animator.create(options) 379animatorResult.oncancel = ()=> { 380 console.info("oncancel callback") 381} 382``` 383 384### onrepeat<sup>(deprecated)</sup> 385 386> **NOTE** 387> 388> This API is deprecated since API version 12. You are advised to use [onRepeat](#onrepeat12) instead. 389 390onrepeat: () => void 391 392Called when this animation repeats. 393 394**Atomic service API**: This API can be used in atomic services since API version 11. 395 396**System capability**: SystemCapability.ArkUI.ArkUI.Full 397 398**Example** 399 400```ts 401import { Animator as animator, AnimatorResult } from '@kit.ArkUI'; 402let animatorResult:AnimatorResult|undefined = animator.create(options) 403animatorResult.onrepeat = ()=> { 404 console.info("onrepeat callback") 405} 406``` 407 408### setExpectedFrameRateRange<sup>12+</sup> 409 410setExpectedFrameRateRange(rateRange: ExpectedFrameRateRange): void 411 412Sets the expected frame rate range. 413 414**Atomic service API**: This API can be used in atomic services since API version 12. 415 416**System capability**: SystemCapability.ArkUI.ArkUI.Full 417 418**Parameters** 419 420| Name | Type | Mandatory| Description | 421| --------------- | ------------------------------------------ | ---- | -----------------------------| 422| rateRange | [ExpectedFrameRateRange](../apis-arkui/arkui-ts/ts-explicit-animation.md#expectedframeraterange11)| Yes | Expected frame rate range.| 423 424**Example** 425 426```ts 427import { Animator as animator, AnimatorResult } from '@kit.ArkUI'; 428let animatorResult: AnimatorResult | undefined = animator.create({ 429 duration: 2000, 430 easing: "ease", 431 delay: 0, 432 fill: "forwards", 433 direction: "normal", 434 iterations: 1, 435 begin: 100, 436 end: 200 437}) 438let expectedFrameRate: ExpectedFrameRateRange = { 439 min: 0, 440 max: 120, 441 expected: 30 442} 443animatorResult.setExpectedFrameRateRange(expectedFrameRate); 444``` 445 446## AnimatorOptions 447 448Animator options. 449 450**Atomic service API**: This API can be used in atomic services since API version 11. 451 452**System capability**: SystemCapability.ArkUI.ArkUI.Full 453 454| Name | Type | Mandatory| Description | 455| ---------- | ----------------------------------------------------------- | ---- | ------------------------------------------------------------ | 456| duration | number | Yes | Duration for playing the animation, in milliseconds.<br>Default value: **0** | 457| easing | string | Yes | Animation interpolation curve. Only the following values are supported:<br>**"linear"**: The animation speed keeps unchanged.<br>**"ease"**: The animation starts slowly, accelerates, and then slows down towards the end. The cubic-bezier curve (0.25, 0.1, 0.25, 1.0) is used.<br>**"ease-in"**: The animation starts at a low speed and then picks up speed until the end. The cubic-bezier curve (0.42, 0.0, 1.0, 1.0) is used.<br>**"ease-out"**: The animation ends at a low speed. The cubic-bezier curve (0.0, 0.0, 0.58, 1.0) is used.<br>**"ease-in-out"**: The animation starts and ends at a low speed. The cubic-bezier curve (0.42, 0.0, 0.58, 1.0) is used.<br>**"fast-out-slow-in"**: The animation uses the standard cubic-bezier curve (0.4, 0.0, 0.2, 1.0).<br>**"linear-out-slow-in"**: The animation uses the deceleration cubic-bezier curve (0.0, 0.0, 0.2, 1.0).<br>**"fast-out-linear-in"**: The animation uses acceleration cubic-bezier curve (0.4, 0.0, 1.0, 1.0)<br>**"friction"**: The animation uses the damping cubic-bezier curve (0.2, 0.0, 0.2, 1.0).<br>**"extreme-deceleration"**: The animation uses the extreme deceleration cubic-bezier curve (0.0, 0.0, 0.0, 1.0).<br>**"rhythm"**: The animation uses the rhythm cubic-bezier curve (0.7, 0.0, 0.2, 1.0).<br>**"sharp"**: The animation uses the sharp cubic-bezier curve (0.33, 0.0, 0.67, 1.0).<br>**"smooth"**: The animation uses the smooth cubic-bezier curve (0.4, 0.0, 0.4, 1.0).<br>**"cubic-bezier(x1,y1,x2,y2)"**: The animation uses the defined cubic bezier curve, where the value of **x1** and **x2** must range from 0 to 1. For example, **"cubic-bezier(0.42,0.0,0.58,1.0)"**.<br>**"steps(number,step-position)"**: The animation uses a step curve. The **number** parameter is mandatory and must be set to a positive integer. The **step-position** parameter is optional and can be set to **start** or **end** (default value). For example, **"steps(3,start)"**.<br>**"interpolating-spring(velocity,mass,stiffness,damping)"**: The animation uses an interpolating spring curve. This API is supported since API version 11 and can be used only in ArkTS. The **velocity**, **mass**, **stiffness**, and **damping** parameters are of the numeric type, and the values of **mass**, **stiffness**, and **damping** must be greater than 0. For details about the parameters, see [Curves.interpolatingSpring](./js-apis-curve.md#curvesinterpolatingspring10). When an interpolating spring curve is used, settings for the **duration**, **fill**, **direction**, and **iterations** do not take effect. Rather, the value of **duration** is subject to the spring settings, **fill** is fixed at **forwards**, **direction** at **normal**, and **iterations** at **1**. In addition, invoking [reverse](#reverse) of **animator** is not effective. In other words, when using an interpolating spring curve, the animation can play only once in forward mode.<br>Default value: **"ease"**| 458| delay | number | Yes | Animation delay duration, in milliseconds. Value **0** means that there is no delay. If the value specified is a negative number, the animation starts playing ahead of its scheduled time. If the amount of time by which the playback is advanced is greater than the total duration of the animation, the animation skips to the end state immediately.<br>Default value: **0** | 459| fill | "none" \| "forwards" \| "backwards" \| "both" | Yes | State of the animated target after the animation is executed.<br>**"none"**: No style is applied to the target before or after the animation is executed.<br>**"forwards"**: The target keeps the state at the end of the animation (defined in the last key frame) after the animation is executed.<br>**"backwards"**: The animation uses the value defined in the first key frame during the **animation-delay**. When **animation-direction** is set to **normal** or **alternate**, the value in the **from** key frame is used. When **animation-direction** is set to **reverse** or **alternate-reverse**, the value in the **to** key frame is used.<br>**"both"**: The animation follows the **forwards** and **backwards** rules.| 460| direction | "normal" \| "reverse" \| "alternate" \| "alternate-reverse" | Yes | Animation playback mode.<br>**"normal"**: plays the animation in forward loop mode.<br>**"reverse"**: plays the animation in reverse loop mode.<br>**"alternate"**: plays the animation in alternating loop mode. When the animation is played for an odd number of times, the playback is in forward direction. When the animation is played for an even number of times, the playback is in reverse direction.<br>**"alternate-reverse"**: plays the animation in reverse alternating loop mode. When the animation is played for an odd number of times, the playback is in reverse direction. When the animation is played for an even number of times, the playback is in forward direction.<br>Default value: **'normal'**| 461| iterations | number | Yes | Number of times that the animation is played. The value **0** means not to play the animation, and **-1** means to play the animation for an unlimited number of times.<br>**NOTE**<br>If this parameter is set to a negative value other than **-1**, the value is invalid. In this case, the animation is played once.| 462| begin | number | Yes | Start point of the animation interpolation.<br>Default value: **0** | 463| end | number | Yes | End point of animation interpolation.<br>Default value: **1** | 464 465 466## Example 467### JavaScript-compatible Web-like Development Paradigm 468 469```html 470<!-- hml --> 471<div class="container"> 472 <div class="Animation" style="height: {{divHeight}}px; width: {{divWidth}}px; background-color: red;" onclick="Show"> 473 </div> 474</div> 475``` 476 477```ts 478import { Animator as animator, AnimatorResult } from '@kit.ArkUI'; 479import { BusinessError } from '@kit.BasicServicesKit'; 480let DataTmp:Record<string,Animator> = { 481 'divWidth': 200, 482 'divHeight': 200, 483 'animator': animator 484} 485class Tmp{ 486 data:animator = DataTmp 487 onInit:Function = ()=>{} 488 Show:Function = ()=>{} 489} 490class DateT{ 491 divWidth:number = 0 492 divHeight:number = 0 493 animator:AnimatorResult | null = null 494} 495(Fn:(v:Tmp) => void) => {Fn({ 496 data: DataTmp, 497 onInit() { 498 let options:AnimatorOptions = { 499 duration: 1500, 500 easing: "friction", 501 delay: 0, 502 fill: "forwards", 503 direction: "normal", 504 iterations: 2, 505 begin: 200.0, 506 end: 400.0 507 }; 508 let DataTmp:DateT = { 509 divWidth: 200, 510 divHeight: 200, 511 animator: null 512 } 513 DataTmp.animator = animator.create(options); 514 }, 515 Show() { 516 let options1:AnimatorOptions = { 517 duration: 1500, 518 easing: "friction", 519 delay: 0, 520 fill: "forwards", 521 direction: "normal", 522 iterations: 2, 523 begin: 0, 524 end: 400.0, 525 }; 526 let DataTmp:DateT = { 527 divWidth: 200, 528 divHeight: 200, 529 animator: null 530 } 531 try { 532 DataTmp.animator = animator.create(options1); 533 DataTmp.animator.reset(options1); 534 } catch(error) { 535 let message = (error as BusinessError).message 536 let code = (error as BusinessError).code 537 console.error(`Animator reset failed, error code: ${code}, message: ${message}.`); 538 } 539 let _this = DataTmp; 540 if(DataTmp.animator){ 541 DataTmp.animator.onFrame = (value:number)=> { 542 _this.divWidth = value; 543 _this.divHeight = value; 544 }; 545 DataTmp.animator.play(); 546 } 547 } 548})} 549``` 550 551  552 553### ArkTS-based Declarative Development Paradigm 554 555> **NOTE** 556> 557> For precise animation control, use the [createAnimator](js-apis-arkui-UIContext.md#createanimator) API in [UIContext](js-apis-arkui-UIContext.md#uicontext) to specify the UI context. 558 559```ts 560import { Animator as animator, AnimatorResult } from '@kit.ArkUI'; 561 562 563@Entry 564@Component 565struct AnimatorTest { 566 private TAG: string = '[AnimatorTest]' 567 private backAnimator: AnimatorResult | undefined = undefined 568 private flag: boolean = false 569 @State wid: number = 100 570 @State hei: number = 100 571 572 create() { 573 let _this = this 574 this.backAnimator = animator.create({// You are advised to use this.getUIContext.creatAnimator(). 575 duration: 2000, 576 easing: "ease", 577 delay: 0, 578 fill: "forwards", 579 direction: "normal", 580 iterations: 1, 581 begin: 100, 582 end: 200 583 }) 584 this.backAnimator.onFinish = ()=> { 585 _this.flag = true 586 console.info(_this.TAG, 'backAnimator onfinish') 587 } 588 this.backAnimator.onRepeat = ()=> { 589 console.info(_this.TAG, 'backAnimator repeat') 590 } 591 this.backAnimator.onCancel = ()=> { 592 console.info(_this.TAG, 'backAnimator cancel') 593 } 594 this.backAnimator.onFrame = (value:number)=> { 595 _this.wid = value 596 _this.hei = value 597 } 598 } 599 600 aboutToDisappear() { 601 // Because backAnimator references this in onframe, backAnimator is saved in this. 602 // When the custom component disappears, leave backAnimator empty to avoid memory leak. 603 this.backAnimator = undefined; 604 } 605 606 build() { 607 Column() { 608 Column() { 609 Column() 610 .width(this.wid) 611 .height(this.hei) 612 .backgroundColor(Color.Red) 613 } 614 .width('100%') 615 .height(300) 616 617 Column() { 618 Row() { 619 Button('create') 620 .fontSize(30) 621 .fontColor(Color.Black) 622 .onClick(() => { 623 this.create() 624 }) 625 } 626 .padding(10) 627 628 Row() { 629 Button('play') 630 .fontSize(30) 631 .fontColor(Color.Black) 632 .onClick(() => { 633 this.flag = false 634 if(this.backAnimator){ 635 this.backAnimator.play() 636 } 637 }) 638 } 639 .padding(10) 640 641 Row() { 642 Button('pause') 643 .fontSize(30) 644 .fontColor(Color.Black) 645 .onClick(() => { 646 if(this.backAnimator){ 647 this.backAnimator.pause() 648 } 649 }) 650 } 651 .padding(10) 652 653 Row() { 654 Button('finish') 655 .fontSize(30) 656 .fontColor(Color.Black) 657 .onClick(() => { 658 this.flag = true 659 if(this.backAnimator){ 660 this.backAnimator.finish() 661 } 662 }) 663 } 664 .padding(10) 665 666 Row() { 667 Button('reverse') 668 .fontSize(30) 669 .fontColor(Color.Black) 670 .onClick(() => { 671 this.flag = false 672 if(this.backAnimator){ 673 this.backAnimator.reverse() 674 } 675 }) 676 } 677 .padding(10) 678 679 Row() { 680 Button('cancel') 681 .fontSize(30) 682 .fontColor(Color.Black) 683 .onClick(() => { 684 if(this.backAnimator){ 685 this.backAnimator.cancel() 686 } 687 }) 688 } 689 .padding(10) 690 691 Row() { 692 Button('reset') 693 .fontSize(30) 694 .fontColor(Color.Black) 695 .onClick(() => { 696 if (this.flag) { 697 this.flag = false 698 if(this.backAnimator){ 699 this.backAnimator.reset({ 700 duration: 3000, 701 easing: "ease-in", 702 delay: 0, 703 fill: "forwards", 704 direction: "alternate", 705 iterations: 3, 706 begin: 100, 707 end: 300 708 }) 709 } 710 } else { 711 console.info(this.TAG, 'Animation not ended') 712 } 713 }) 714 } 715 .padding(10) 716 } 717 } 718 } 719} 720``` 721 722## update<sup>(deprecated)</sup> 723 724update(options: AnimatorOptions): void 725 726Updates this animator. 727 728This API is deprecated since API version 9. You are advised to use [reset<sup>9+</sup>](#reset9) instead. 729 730**System capability**: SystemCapability.ArkUI.ArkUI.Full 731 732**Parameters** 733 734| Name | Type | Mandatory | Description | 735| ------- | ----------------------------------- | ---- | ------- | 736| options | [AnimatorOptions](#animatoroptions) | Yes | Animator options.| 737 738**Example** 739 740```ts 741animator.update(options); 742``` 743 744## createAnimator<sup>(deprecated)</sup> 745 746createAnimator(options: AnimatorOptions): AnimatorResult 747 748Creates an **Animator** object. 749 750This API is deprecated since API version 9. You are advised to use [create<sup>9+</sup>](#create9) instead. 751 752**System capability**: SystemCapability.ArkUI.ArkUI.Full 753 754**Parameters** 755 756| Name | Type | Mandatory | Description | 757| ------- | ----------------------------------- | ---- | ------- | 758| options | [AnimatorOptions](#animatoroptions) | Yes | Animator options.| 759 760**Return value** 761 762| Type | Description | 763| --------------------------------- | ------------- | 764| [AnimatorResult](#animatorresult) | Animator result.| 765 766**Example** 767 768```ts 769import { Animator as animator, AnimatorResult } from '@kit.ArkUI'; 770 771let options: AnimatorOptions = { // The explicit type AnimatorOptions does not need to be emphasized in a .js file. 772 duration: 1500, 773 easing: "friction", 774 delay: 0, 775 fill: "forwards", 776 direction: "normal", 777 iterations: 3, 778 begin: 200.0, 779 end: 400.0, 780}; 781this.animator = animator.createAnimator(options); 782``` 783
