1# Explicit Animation 2 3You can create explicit animation with your custom settings. 4 5> **NOTE** 6> 7> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8 9animateTo(value: AnimateParam, event: () => void): void 10 11Since API version 9, this API is supported in ArkTS widgets. 12 13| Name | Type | Mandatory | Description | 14| ---------------- | ------------ | -------------------- | -------------------- | 15| value | [AnimateParam](#animateparam)| Yes| Animation settings.| 16| event | () => void | Yes| Closure function that displays the dynamic effect. The system automatically inserts the transition animation if the status changes in the closure function.| 17 18## AnimateParam 19 20| Name| Type| Description| 21| -------- | -------- | -------- | 22| duration | number | Animation duration, in ms.<br>Default value: **1000**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>- The maximum animation duration on an ArkTS widget is 1000 ms. If the set value exceeds the limit, the value **1000** will be used.| 23| tempo | number | Animation playback speed. A larger value indicates faster animation playback, and a smaller value indicates slower animation playback. The value **0** means that there is no animation.<br>Default value: **1.0**| 24| curve | [Curve](ts-appendix-enums.md#curve) \| [ICurve](../apis/js-apis-curve.md#icurve) \| string | Animation curve.<br>Default value: **Curve.Linear**<br>Since API version 9, this API is supported in ArkTS widgets.| 25| delay | number | Delay of animation playback, in ms. By default, the playback is not delayed.<br>Default value: **0**| 26| iterations | number | Number of times that the animation is played. By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times.<br>Default value: **1**| 27| playMode | [PlayMode](ts-appendix-enums.md#playmode) | Animation playback mode. By default, the animation is played from the beginning after the playback is complete.<br>Default value: **PlayMode.Normal**<br>Since API version 9, this API is supported in ArkTS widgets.| 28| onFinish | () => void | Callback invoked when the animation playback is complete.<br>Since API version 9, this API is supported in ArkTS widgets.| 29 30 31## Example 32 33```ts 34// xxx.ets 35@Entry 36@Component 37struct AnimateToExample { 38 @State widthSize: number = 250 39 @State heightSize: number = 100 40 @State rotateAngle: number = 0 41 private flag: boolean = true 42 43 build() { 44 Column() { 45 Button('change size') 46 .width(this.widthSize) 47 .height(this.heightSize) 48 .margin(30) 49 .onClick(() => { 50 if (this.flag) { 51 animateTo({ 52 duration: 2000, 53 curve: Curve.EaseOut, 54 iterations: 3, 55 playMode: PlayMode.Normal, 56 onFinish: () => { 57 console.info('play end') 58 } 59 }, () => { 60 this.widthSize = 150 61 this.heightSize = 60 62 }) 63 } else { 64 animateTo({}, () => { 65 this.widthSize = 250 66 this.heightSize = 100 67 }) 68 } 69 this.flag = !this.flag 70 }) 71 Button('change rotate angle') 72 .margin(50) 73 .rotate({ x: 0, y: 0, z: 1, angle: this.rotateAngle }) 74 .onClick(() => { 75 animateTo({ 76 duration: 1200, 77 curve: Curve.Friction, 78 delay: 500, 79 iterations: -1, // The value -1 indicates that the animation is played for an unlimited number of times. 80 playMode: PlayMode.Alternate, 81 onFinish: () => { 82 console.info('play end') 83 } 84 }, () => { 85 this.rotateAngle = 90 86 }) 87 }) 88 }.width('100%').margin({ top: 5 }) 89 } 90} 91``` 92 93 94
