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## create<sup>9+</sup> 23 24create(options: AnimatorOptions): AnimatorResult 25 26定义Animator类。 27 28**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 29 30**系统能力：** SystemCapability.ArkUI.ArkUI.Full 31 32**参数：** 33 34| 参数名 | 类型 | 必填 | 说明 | 35| ------- | ----------------------------------- | ---- | ------- | 36| options | [AnimatorOptions](#animatoroptions) | 是 | 定义动画选项。 | 37 38**返回值：** 39 40| 类型 | 说明 | 41| --------------------------------- | ------------- | 42| [AnimatorResult](#animatorresult) | Animator结果接口。 | 43 44**错误码**： 45 46以下错误码详细介绍请参考[通用错误码](../errorcode-universal.md)。 47 48| 错误码ID | 错误信息 | 49| ------- | -------- | 50| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 51 52**示例：** 53 54> **说明：** 55> 56> 推荐通过使用[UIContext](js-apis-arkui-UIContext.md#uicontext)中的[createAnimator](js-apis-arkui-UIContext.md#createanimator)接口明确UI上下文。 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);// 建议使用 UIContext.creatAnimator()接口 72 ``` 73 74## AnimatorResult 75 76定义Animator结果接口。 77 78### reset<sup>9+</sup> 79 80reset(options: AnimatorOptions): void 81 82更新当前动画器。 83 84**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 85 86**系统能力：** SystemCapability.ArkUI.ArkUI.Full 87 88**参数：** 89 90| 参数名 | 类型 | 必填 | 说明 | 91| ------- | ----------------------------------- | ---- | ------- | 92| options | [AnimatorOptions](#animatoroptions) | 是 | 定义动画选项。 | 93 94**错误码：** 95 96以下错误码的详细介绍请参见[ohos.animator(动画)](errorcode-animator.md)错误码。 97 98| 错误码ID | 错误信息 | 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**示例：** 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 143启动动画。动画会保留上一次的播放状态，比如播放状态设置reverse后，再次播放会保留reverse的播放状态。 144 145**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 146 147**系统能力：** SystemCapability.ArkUI.ArkUI.Full 148 149**示例：** 150 151```ts 152animator.play(); 153``` 154 155### finish 156 157finish(): void 158 159结束动画。 160 161**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 162 163**系统能力：** SystemCapability.ArkUI.ArkUI.Full 164 165**示例：** 166 167```ts 168animator.finish(); 169``` 170 171### pause 172 173pause(): void 174 175暂停动画。 176 177**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 178 179**系统能力：** SystemCapability.ArkUI.ArkUI.Full 180 181**示例：** 182 183```ts 184animator.pause(); 185``` 186 187### cancel 188 189cancel(): void 190 191取消动画。 192 193**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 194 195**系统能力：** SystemCapability.ArkUI.ArkUI.Full 196 197**示例：** 198 199```ts 200animator.cancel(); 201``` 202 203### reverse 204 205reverse(): void 206 207以相反的顺序播放动画。使用interpolating-spring曲线时此接口无效。 208 209**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 210 211**系统能力：** SystemCapability.ArkUI.ArkUI.Full 212 213**示例：** 214 215```ts 216animator.reverse(); 217``` 218 219### onFrame<sup>12+</sup> 220 221onFrame: (progress: number) => void 222 223接收到帧时回调。 224 225**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 226 227**系统能力：** SystemCapability.ArkUI.ArkUI.Full 228 229**参数：** 230 231| 参数名 | 类型 | 必填 | 说明 | 232| -------- | ------ | ---- | -------- | 233| progress | number | 是 | 动画的当前值。 | 234 235**示例：** 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 249动画完成时回调。 250 251**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 252 253**系统能力：** SystemCapability.ArkUI.ArkUI.Full 254 255**示例：** 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 269动画被取消时回调。 270 271**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 272 273**系统能力：** SystemCapability.ArkUI.ArkUI.Full 274 275**示例：** 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 289动画重复时回调。 290 291**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 292 293**系统能力：** SystemCapability.ArkUI.ArkUI.Full 294 295**示例：** 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> **说明：** 308> 309> 从API version 12开始废弃，推荐使用[onFrame](#onframe12)。 310 311onframe: (progress: number) => void 312 313接收到帧时回调。 314 315**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 316 317**系统能力：** SystemCapability.ArkUI.ArkUI.Full 318 319**参数：** 320 321| 参数名 | 类型 | 必填 | 说明 | 322| -------- | ------ | ---- | -------- | 323| progress | number | 是 | 动画的当前进度。 | 324 325**示例：** 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> **说明：** 338> 339> 从API version 12开始废弃，推荐使用[onFinish](#onfinish12)。 340 341onfinish: () => void 342 343动画完成时回调。 344 345**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 346 347**系统能力：** SystemCapability.ArkUI.ArkUI.Full 348 349**示例：** 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> **说明：** 362> 363> 从API version 12开始废弃，推荐使用[onCancel](#oncancel12)。 364 365 366oncancel: () => void 367 368动画被取消时回调。 369 370**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 371 372**系统能力：** SystemCapability.ArkUI.ArkUI.Full 373 374**示例：** 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> **说明：** 387> 388> 从API version 12开始废弃，推荐使用[onRepeat](#onrepeat12)。 389 390onrepeat: () => 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.onrepeat = ()=> { 404 console.info("onrepeat callback") 405} 406``` 407 408### setExpectedFrameRateRange<sup>12+</sup> 409 410setExpectedFrameRateRange(rateRange: ExpectedFrameRateRange): void 411 412设置期望的帧率范围。 413 414**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 415 416**系统能力：** SystemCapability.ArkUI.ArkUI.Full 417 418**参数：** 419 420| 参数名 | 类型 | 必填 | 说明 | 421| --------------- | ------------------------------------------ | ---- | -----------------------------| 422| rateRange | [ExpectedFrameRateRange](../apis-arkui/arkui-ts/ts-explicit-animation.md#expectedframeraterange11)| 是 | 设置期望的帧率范围。| 423 424**示例：** 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 448定义动画选项。 449 450**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 451 452**系统能力：** SystemCapability.ArkUI.ArkUI.Full 453 454| 名称 | 类型 | 必填 | 说明 | 455| ---------- | ----------------------------------------------------------- | ---- | ------------------------------------------------------------ | 456| duration | number | 是 | 动画播放的时长，单位毫秒。<br/>默认值:0。 | 457| 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"。 | 458| delay | number | 是 | 动画延时播放时长，单位毫秒，设置为0时，表示不延时。设置为负数时动画提前播放，如果提前播放的时长大于动画总时长，动画直接过渡到终点。<br/>默认值:0。 | 459| 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的规则，从而在两个方向上扩展动画属性。 | 460| direction | "normal" \| "reverse" \| "alternate" \| "alternate-reverse" | 是 | 动画播放模式。<br/>"normal"： 动画正向循环播放。<br/>"reverse"： 动画反向循环播放。<br/>"alternate"：动画交替循环播放，奇数次正向播放，偶数次反向播放。<br/>"alternate-reverse"：动画反向交替循环播放，奇数次反向播放，偶数次正向播放。<br/>默认值:"normal"。 | 461| iterations | number | 是 | 动画播放次数。设置为0时不播放，设置为-1时无限次播放。<br/>**说明:** 设置为除-1外其他负数视为无效取值，无效取值动画默认播放1次。 | 462| begin | number | 是 | 动画插值起点。<br/>默认值:0。 | 463| end | number | 是 | 动画插值终点。<br/>默认值:1。 | 464 465 466## 完整示例 467### 基于JS扩展的类Web开发范式 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扩展的声明式开发范式 554 555> **说明：** 556> 557> 推荐通过使用[UIContext](js-apis-arkui-UIContext.md#uicontext)中的[createAnimator](js-apis-arkui-UIContext.md#createanimator)接口明确UI上下文。 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({// 建议使用 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 // 由于backAnimator在onframe中引用了this, this中保存了backAnimator， 602 // 在自定义组件消失时应该将保存在组件中的backAnimator置空，避免内存泄漏 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 726更新当前动画器。 727 728从API version9开始不再维护，建议使用[reset<sup>9+</sup>](#reset9) 729 730**系统能力：** SystemCapability.ArkUI.ArkUI.Full 731 732**参数：** 733 734| 参数名 | 类型 | 必填 | 说明 | 735| ------- | ----------------------------------- | ---- | ------- | 736| options | [AnimatorOptions](#animatoroptions) | 是 | 定义动画选项。 | 737 738**示例：** 739 740```ts 741animator.update(options); 742``` 743 744## createAnimator<sup>(deprecated)</sup> 745 746createAnimator(options: AnimatorOptions): AnimatorResult 747 748定义Animator类。 749 750从API version9开始不再维护，建议使用[create<sup>9+</sup>](#create9) 751 752**系统能力：** SystemCapability.ArkUI.ArkUI.Full 753 754**参数：** 755 756| 参数名 | 类型 | 必填 | 说明 | 757| ------- | ----------------------------------- | ---- | ------- | 758| options | [AnimatorOptions](#animatoroptions) | 是 | 定义动画选项。 | 759 760**返回值：** 761 762| 类型 | 说明 | 763| --------------------------------- | ------------- | 764| [AnimatorResult](#animatorresult) | Animator结果接口。 | 765 766**示例：** 767 768```ts 769import { Animator as animator, AnimatorResult } from '@kit.ArkUI'; 770 771let options: AnimatorOptions = { // xxx.js文件中不需要强调显式类型AnimatorOptions 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```
