1# Property Animator 2 3You can create a property animator to animate certain universal attributes of a component, including **width**, **height**, **backgroundColor**, **opacity**, **scale**, **rotate**, and **translate**. 4 5> **NOTE** 6> 7> This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8 9animation(value: {duration?: number, tempo?: number, curve?: string | Curve | ICurve, delay?:number, iterations: number, playMode?: PlayMode, onFinish?: () => void}) 10 11Since API version 9, this API is supported in ArkTS widgets. 12 13**Parameters** 14 15| Name | Type | Mandatory | Description | 16| ---------- | ------------------------------------------| ---- | ------------------------------------------------------------ | 17| duration | number | No | Animation duration, in ms.<br>Default value: **1000**<br>Unit: ms<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.<br>- A value less than 1 evaluates to the value **0**.<br>- If the value is of the floating point type, the value is rounded down. If the value is 1.2, the value **1** is used.| 18| tempo | number | No | Animation playback speed. A larger value indicates a higher animation playback speed.<br>The value **0** indicates that no animation is applied.<br>Default value: **1**<br>**NOTE**<br>A value less than 1 evaluates to the value **1**.| 19| curve | string \| [Curve](ts-appendix-enums.md#curve) \| ICurve<sup>9+</sup> | No | Animation curve. The default curve is linear.<br>Default value: **Curve.Linear**<br>Since API version 9, this API is supported in ArkTS widgets.| 20| delay | number | No | Delay of animation playback, in ms. The value **0** indicates that the playback is not delayed.<br>Default value: **0**<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 1 evaluates to the value **0**. If the value is of the floating point type, the value is rounded down. If the value is 1.2, the value **1** is used.| 21| iterations | number | No | Number of times that the animation is played.<br>Default value: **1**<br>Value range: [-1, +∞)<br>**NOTE**<br>The value **-1** indicates that the animation is played for an unlimited number of times. The value **0** indicates that no animation is applied.| 22| playMode | [PlayMode](ts-appendix-enums.md#playmode) | No | 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.| 23| onFinish | () => void | No | Callback invoked when the animation playback is complete.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>This callback is not invoked when **iterations** is set to **-1**.| 24 25 26## Example 27 28```ts 29// xxx.ets 30@Entry 31@Component 32struct AttrAnimationExample { 33 @State widthSize: number = 250 34 @State heightSize: number = 100 35 @State rotateAngle: number = 0 36 @State flag: boolean = true 37 38 build() { 39 Column() { 40 Button('change size') 41 .onClick(() => { 42 if (this.flag) { 43 this.widthSize = 150 44 this.heightSize = 60 45 } else { 46 this.widthSize = 250 47 this.heightSize = 100 48 } 49 this.flag = !this.flag 50 }) 51 .margin(30) 52 .width(this.widthSize) 53 .height(this.heightSize) 54 .animation({ 55 duration: 2000, 56 curve: Curve.EaseOut, 57 iterations: 3, 58 playMode: PlayMode.Normal 59 }) 60 Button('change rotate angle') 61 .onClick(() => { 62 this.rotateAngle = 90 63 }) 64 .margin(50) 65 .rotate({ angle: this.rotateAngle }) 66 .animation({ 67 duration: 1200, 68 curve: Curve.Friction, 69 delay: 500, 70 iterations: -1, // The value -1 indicates that the animation is played for an unlimited number of times. 71 playMode: PlayMode.Alternate 72 }) 73 }.width('100%').margin({ top: 20 }) 74 } 75} 76``` 77 78 79
