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), [attribute 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 16The following sample code implements the animation effect of button rotation: 17 18 19 20```ts 21@Entry 22@Component 23struct AttrAnimationExample { 24 @State rotateAngle: number = 0; 25 26 build() { 27 Column() { 28 Button('change rotate angle') 29 .onClick(() => { 30 this.rotateAngle = 90; 31 }) 32 .margin(50) 33 .rotate({ angle: this.rotateAngle }) 34 .animation({ 35 curve: Curve.EaseOut, 36 playMode: PlayMode.AlternateReverse 37 }) 38 }.width('100%').margin({ top: 20 }) 39 } 40} 41``` 42
