1# Animator 2 3> **NOTE**<br> 4> 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. 5 6 7## Modules to Import 8 9``` 10import animator from '@ohos.animator'; 11``` 12 13 14## createAnimator 15 16createAnimator(options: AnimatorOptions): AnimatorResult 17 18Creates an **Animator** object. 19 20**System capability**: SystemCapability.ArkUI.ArkUI.Full 21 22**Parameters** 23| Name| Type| Mandatory| Description| 24| -------- | -------- | -------- | -------- | 25| options | [AnimatorOptions](#animatoroptions) | Yes| Animator options. For details, see **AnimatorOptions**.| 26 27**Return value** 28| Type| Description| 29| -------- | -------- | 30| [AnimatorResult](#animatorresult) | Animator result.| 31 32**Example** 33 34 ``` 35 <!-- hml --> 36 <div class="container"> 37 <div class="Animation" style="height: {{divHeight}}px; width: {{divWidth}}px; background-color: red;" onclick="Show"> 38 </div> 39 </div> 40 ``` 41 42 ``` 43 // js 44 export default { 45 data : { 46 divWidth: 200, 47 divHeight: 200, 48 animator: null 49 }, 50 onInit() { 51 var options = { 52 duration: 1500, 53 easing: 'friction', 54 fill: 'forwards', 55 iterations: 2, 56 begin: 200.0, 57 end: 400.0 58 }; 59 this.animator = animator.createAnimator(options); 60 }, 61 Show() { 62 var options1 = { 63 duration: 2000, 64 easing: 'friction', 65 fill: 'forwards', 66 iterations: 1, 67 begin: 200.0, 68 end: 400.0 69 }; 70 this.animator.update(options1); 71 var _this = this; 72 this.animator.onframe = function(value) { 73 _this.divWidth = value; 74 _this.divHeight = value; 75 }; 76 this.animator.play(); 77 } 78 } 79 ``` 80 81## AnimatorResult 82 83Defines the animator result. 84 85### update 86 87update(options: AnimatorOptions): void 88 89Updates this animator. 90 91**System capability**: SystemCapability.ArkUI.ArkUI.Full 92 93**Parameters** 94| Name| Type| Mandatory| Description| 95| -------- | -------- | -------- | -------- | 96| options | [AnimatorOptions](#animatoroptions) | Yes| Animator options.| 97 98**Example** 99``` 100animator.update(options); 101``` 102 103### play 104 105play(): void 106 107Plays this animation. 108 109**System capability**: SystemCapability.ArkUI.ArkUI.Full 110 111**Example** 112``` 113animator.play(); 114``` 115 116### finish 117 118finish(): void 119 120Ends this animation. 121 122**System capability**: SystemCapability.ArkUI.ArkUI.Full 123 124**Example** 125``` 126animator.finish(); 127``` 128 129### pause 130 131pause(): void 132 133Pauses this animation. 134 135**System capability**: SystemCapability.ArkUI.ArkUI.Full 136 137**Example** 138``` 139animator.pause(); 140``` 141 142### cancel 143 144cancel(): void 145 146Cancels this animation. 147 148**System capability**: SystemCapability.ArkUI.ArkUI.Full 149 150**Example** 151``` 152animator.cancel(); 153``` 154 155### reverse 156 157reverse(): void 158 159Plays this animation in reverse order. 160 161**System capability**: SystemCapability.ArkUI.ArkUI.Full 162 163**Example** 164``` 165animator.reverse(); 166``` 167 168### onframe 169 170onframe: (progress: number) => void 171 172Called when a frame is received. 173 174**System capability**: SystemCapability.ArkUI.ArkUI.Full 175 176**Parameters** 177| Name| Type| Mandatory| Description| 178| -------- | -------- | -------- | -------- | 179| progress | number | Yes| Current progress of the animation.| 180 181**Example** 182``` 183animator.onframe(); 184``` 185 186### onfinish 187 188onfinish: () => void 189 190Called when this animation is finished. 191 192**System capability**: SystemCapability.ArkUI.ArkUI.Full 193 194**Example** 195``` 196animator.onfinish(); 197``` 198 199### oncancel 200 201oncancel: () => void 202 203Called when this animation is canceled. 204 205**System capability**: SystemCapability.ArkUI.ArkUI.Full 206 207**Example** 208``` 209animator.oncancel(); 210``` 211 212### onrepeat 213 214onrepeat: () => void 215 216**System capability**: SystemCapability.ArkUI.ArkUI.Full 217 218**Example** 219``` 220animator.onrepeat(); 221``` 222 223Called when this animation repeats. 224 225## AnimatorOptions 226 227Defines animator options. 228 229**System capability**: SystemCapability.ArkUI.ArkUI.Full 230 231| Name| Type| Mandatory| Description| 232| -------- | -------- | -------- | -------- | 233| duration | number | Yes| Duration for playing the animation, in milliseconds. The default value is **0**.| 234| easing | string | Yes| Animation interpolation curve. The default value is **ease**.| 235| delay | number | Yes| Animation delay duration, in milliseconds. The default value is **0**, indicating that there is no delay.| 236| fill | "none" \| "forwards" \| "backwards" \| "both" | Yes| State of the animated target after the animation is executed. The default value is **none**, which means that after the animation is executed, the target will retain the state (defined by the last keyframe) it is in when the animation ends.| 237| direction | "normal" \| "reverse" \| "alternate" \| "alternate-reverse" | Yes| Animation playback mode. The default value is **normal**.| 238| iterations | number | Yes| Number of times that the animation is played. The default value is **1**. The value **0** means not to play the animation, and **-1** means to play the animation for an unlimited number of times.| 239| begin | number | Yes| Start point of the animation interpolation. If this parameter is not set, the default value **0** is used.| 240| end | number | Yes| End point of the animation interpolation. If this parameter is not set, the default value **1** is used.| 241