1# 动画 2 3>  **说明：** 4> 本模块首批接口从API version 6开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。 5 6 7## 导入模块 8 9``` 10import animator from '@ohos.animator'; 11``` 12 13 14## createAnimator 15 16createAnimator(options: AnimatorOptions): AnimatorResult 17 18定义Animator类。 19 20**系统能力：** SystemCapability.ArkUI.ArkUI.Full 21 22**参数：** 23 | 参数名 | 类型 | 必填 | 说明 | 24 | -------- | -------- | -------- | -------- | 25 | options | [AnimatorOptions](#animatoroptions) | 是 | 定义动画选项，详细请参考AnimatorOptions。| 26 27**返回值：** 28 | 类型 | 说明 | 29 | -------- | -------- | 30 | [AnimatorResult](#animatorresult) | Animator结果接口。 | 31 32**示例：** 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 83定义Animator结果接口。 84 85### update 86 87update(options: AnimatorOptions): void 88 89更新当前动画器。 90 91**系统能力：** SystemCapability.ArkUI.ArkUI.Full 92 93**参数：** 94 | 参数名 | 类型 | 必填 | 说明 | 95 | -------- | -------- | -------- | -------- | 96 | options | [AnimatorOptions](#animatoroptions) | 是 | 定义动画选项。| 97 98**示例：** 99``` 100animator.update(options); 101``` 102 103### play 104 105play(): void 106 107启动动画。 108 109**系统能力：** SystemCapability.ArkUI.ArkUI.Full 110 111**示例：** 112``` 113animator.play(); 114``` 115 116### finish 117 118finish(): void 119 120结束动画。 121 122**系统能力：** SystemCapability.ArkUI.ArkUI.Full 123 124**示例：** 125``` 126animator.finish(); 127``` 128 129### pause 130 131pause(): void 132 133暂停动画。 134 135**系统能力：** SystemCapability.ArkUI.ArkUI.Full 136 137**示例：** 138``` 139animator.pause(); 140``` 141 142### cancel 143 144cancel(): void 145 146删除动画。 147 148**系统能力：** SystemCapability.ArkUI.ArkUI.Full 149 150**示例：** 151``` 152animator.cancel(); 153``` 154 155### reverse 156 157reverse(): void 158 159以相反的顺序播放动画。 160 161**系统能力：** SystemCapability.ArkUI.ArkUI.Full 162 163**示例：** 164``` 165animator.reverse(); 166``` 167 168### onframe 169 170onframe: (progress: number) => void 171 172回调时触发。 173 174**系统能力：** SystemCapability.ArkUI.ArkUI.Full 175 176**参数：** 177 | 参数名 | 类型 | 必填 | 说明 | 178 | -------- | -------- | -------- | -------- | 179 | progress | number | 是 | 动画的当前进度。| 180 181**示例：** 182``` 183animator.onframe(); 184``` 185 186### onfinish 187 188onfinish: () => void 189 190动画完成。 191 192**系统能力：** SystemCapability.ArkUI.ArkUI.Full 193 194**示例：** 195``` 196animator.onfinish(); 197``` 198 199### oncancel 200 201oncancel: () => void 202 203动画被取消。 204 205**系统能力：** SystemCapability.ArkUI.ArkUI.Full 206 207**示例：** 208``` 209animator.oncancel(); 210``` 211 212### onrepeat 213 214onrepeat: () => void 215 216**系统能力：** SystemCapability.ArkUI.ArkUI.Full 217 218**示例：** 219``` 220animator.onrepeat(); 221``` 222 223动画将重复。 224 225## AnimatorOptions 226 227定义动画选项。 228 229**系统能力：** 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full 230 231| 名称 | 参数类型 | 必填 | 说明 | 232| -------- | -------- | -------- | -------- | 233| duration | number | 是 | 动画播放的时长，单位毫秒，默认为0。 | 234| easing | string | 是 | 动画插值曲线，默认为ease'。 | 235| delay | number | 是 | 动画延时播放时长，单位毫秒，默认为0，即不延时。 | 236| fill | "none" \| "forwards" \| "backwards" \| "both" | 是 | 动画执行后是否恢复到初始状态，默认值为"none"。动画执行后，动画结束时的状态（在最后一个关键帧中定义）将保留。 | 237| direction | "normal" \| "reverse" \| "alternate" \| "alternate-reverse" | 是 | 动画播放模式，默认值"normal"。| 238| iterations | number | 是 | 动画播放次数，默认值1。设置为0时不播放，设置为-1时无限次播放。 | 239| begin | number | 是 | 动画插值起点，不设置时默认为0。 | 240| end | number | 是 | 动画插值终点，不设置时默认为1。 | 241
