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