1# Using Animations in the Widget 2 3 4To make your ArkTS widget more engaging, you can apply animations to it, including [explicit animation](../reference/arkui-ts/ts-explicit-animation.md), [property animation](../reference/arkui-ts/ts-animatorproperty.md), and [component transition](../reference/arkui-ts/ts-transition-animation-component.md). Just note the following restrictions when using the animations in ArkTS widgets. 5 6 7**Table 1** Restrictions on animation parameters 8 9| Name| Description| Description| 10| -------- | -------- | -------- | 11| duration | Animation playback duration| The maximum value is 1 second. If a larger value is set, the animation is still played for 1 second.| 12| tempo | Animation playback speed.| Do not set this parameter in the widget. Use the default value 1.| 13| delay | Animation delay duration.| Do not set this parameter in the widget. Use the default value 0.| 14| iterations | Number of times that the animation is played.| Do not set this parameter in the widget. Use the default value 1.| 15 16>**NOTE** 17> 18>Static widgets do not support animations. 19 20The following sample code implements the animation effect of button rotation. 21 22 23 24 25 26```ts 27@Entry 28@Component 29struct AttrAnimationExample { 30 @State rotateAngle: number = 0; 31 32 build() { 33 Column() { 34 Button('change rotate angle') 35 .onClick(() => { 36 this.rotateAngle = 90; 37 }) 38 .margin(50) 39 .rotate({ angle: this.rotateAngle }) 40 .animation({ 41 curve: Curve.EaseOut, 42 playMode: PlayMode.AlternateReverse 43 }) 44 }.width('100%').margin({ top: 20 }) 45 } 46} 47``` 48
