• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Using Animations in ArkTS Widgets
2
3
4To make your ArkTS widgets 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| Restriction|
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
19## Component Animation
20The following sample code uses the [animation](../reference/apis-arkui/arkui-ts/ts-animatorproperty.md) API to implement the animation effect of button rotation.
21
22![WidgetAnimation](figures/WidgetAnimation.gif)
23
24
25
26```ts
27// entry/src/main/ets/widget/pages/WidgetCard.ets
28@Entry
29@Component
30struct AnimationCard {
31  @State rotateAngle: number = 0;
32
33  build() {
34    Row() {
35      Button('change rotate angle')
36        .height('20%')
37        .width('90%')
38        .margin('5%')
39        .onClick(() => {
40          this.rotateAngle = (this.rotateAngle === 0 ? 90 : 0);
41        })
42        .rotate({ angle: this.rotateAngle })
43        .animation({
44          curve: Curve.EaseOut,
45          playMode: PlayMode.Normal,
46        })
47    }.height('100%').alignItems(VerticalAlign.Center)
48  }
49}
50```
51## Transition Animation
52The following sample code uses the [transition](../reference/apis-arkui/arkui-ts/ts-transition-animation-component.md) API to implement the animation effect of image appearance and disappearance.
53
54![WidgetAnimation](figures/WidgetTransitionAnimation.gif)
55
56```ts
57// entry/src/main/ets/widget/pages/WidgetCard.ets
58@Entry
59@Component
60struct TransitionEffectExample1 {
61  @State flag: boolean = true;
62  @State show: string = 'show';
63
64  build() {
65    Column() {
66      Button(this.show).width(80).height(30).margin(30)
67        .onClick(() => {
68          // Tap the button to show or hide the image.
69          if (this.flag) {
70            this.show = 'hide';
71          } else {
72            this.show = 'show';
73          }
74          this.flag = !this.flag;
75        })
76      if (this.flag) {
77        // Apply the same transition effect to the appearance and disappearance of the image.
78        // When the image appears, it changes from the state where the opacity is 0 and the rotation angle is 180° around the z-axis to the state where the opacity is 1 and the rotation angle is 0°. The durations of the opacity and rotation animations are both 1000 ms.
79        // When the image disappears, it changes from the state where the opacity is 1 and the rotation angle is 0° to the state where the opacity is 0 and the rotation angle is 180° around the z-axis. The durations of the opacity and rotation animations are both 1000 ms.
80        Image($r('app.media.testImg')).width(200).height(200)
81          .transition(TransitionEffect.OPACITY.animation({ duration: 1000, curve: Curve.Ease }).combine(
82            TransitionEffect.rotate({ z: 1, angle: 180 })
83          ))
84      }
85    }.width('100%')
86  }
87}
88```
89