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/apis-arkui/arkui-ts/ts-explicit-animation.md), [property animation](../reference/apis-arkui/arkui-ts/ts-animatorproperty.md), and [component transition](../reference/apis-arkui/arkui-ts/ts-transition-animation-component.md). Just note the following restrictions when using the animations in ArkTS widgets.
5
6**Table 1** Restrictions on animation parameters
7
8| Name| Description| Description|
9| -------- | -------- | -------- |
10| duration | Animation playback duration| The maximum value is 1 second. If a larger value is set, the animation is still played for 1 second.|
11| tempo | Animation playback speed.| Do not set this parameter in the widget. Use the default value 1.|
12| delay | Animation delay duration.| Do not set this parameter in the widget. Use the default value 0.|
13| iterations | Number of times that the animation is played.| Do not set this parameter in the widget. Use the default value 1.|
14
15>**NOTE**
16>
17>Static widgets do not support animations.
18
19The following sample code implements the animation effect of button rotation.
20
21![WidgetAnimation](figures/WidgetAnimation.gif)
22
23
24
25```ts
26@Entry
27@Component
28struct AnimationCard {
29  @State rotateAngle: number = 0;
30
31  build() {
32    Row() {
33      Button('change rotate angle')
34        .height('20%')
35        .width('90%')
36        .margin('5%')
37        .onClick(() => {
38          this.rotateAngle = (this.rotateAngle === 0 ? 90 : 0);
39        })
40        .rotate({ angle: this.rotateAngle })
41        .animation({
42          curve: Curve.EaseOut,
43          playMode: PlayMode.Normal,
44        })
45    }.height('100%').alignItems(VerticalAlign.Center)
46  }
47}
48```
49