Using Animations in the Widget

To make your ArkTS widget more engaging, you can apply animations to it, including explicit animation, property animation, and component transition. Just note the following restrictions when using the animations in ArkTS widgets.

Table 1 Restrictions on animation parameters

Name	Description	Description
duration	Animation playback duration	The maximum value is 1 second. If a larger value is set, the animation is still played for 1 second.
tempo	Animation playback speed.	Do not set this parameter in the widget. Use the default value 1.
delay	Animation delay duration.	Do not set this parameter in the widget. Use the default value 0.
iterations	Number of times that the animation is played.	Do not set this parameter in the widget. Use the default value 1.

NOTE

Static widgets do not support animations.

The following sample code implements the animation effect of button rotation.

WidgetAnimation

@Entry
@Component
struct AnimationCard {
  @State rotateAngle: number = 0;

  build() {
    Row() {
      Button('change rotate angle')
        .height('20%')
        .width('90%')
        .margin('5%')
        .onClick(() => {
          this.rotateAngle = (this.rotateAngle === 0 ? 90 : 0);
        })
        .rotate({ angle: this.rotateAngle })
        .animation({
          curve: Curve.EaseOut,
          playMode: PlayMode.Normal,
        })
    }.height('100%').alignItems(VerticalAlign.Center)
  }
}