1# Rotation Transition Animation
2
3Rotation transition animations are designed to create seamless visual transitions when the screen display orientation changes. There are two approaches to choose from:
4
5- [Rotation transition animation with layout switching](#rotation-transition-animation-with-layout-switching): This animation is your go-to solution for an out-of-the-box implementation experience. It can be achieved by simply configuring automatic rotation (or setting the window display orientation) in the **module.json5** file.
6-  [Rotation transition animation with opacity changing](#rotation-transition-animation-with-opacity-changing): This animation adds a touch of sophistication with fade-in and fade-out effects for components during screen rotations. It requires additional setup beyond the **module.json5** configuration, including the preparation of two sets of visuals.
7
8## Rotation Transition Animation with Layout Switching
9
10The rotation transition animation with layout switching is crafted to synchronize the rotation of windows and application views with the screen's orientation change. It's the system's default offering, making it easy for you to implement without the need for complex configurations. When the screen orientation changes, the system automatically initiates a window rotation animation, resizing the window to fit the new orientation. Your application is then prompted to reconfigure its layout to align with the resized window, creating a layout animation that matches the window's rotation parameters.
11
12This animation is activated once the user rotates the screen.
13
14```ts
15// xx.ets
16import { display } from '@kit.ArkUI';
17
18@Entry
19@Component
20struct rotation {
21
22  build() {
23    Stack() {
24      Image($r('app.media.tree'))
25        .position({ x: 0, y: 0 })
26        .size({ width: 100, height: 100 })
27        .id('image1')
28    }
29    .backgroundColor(Color.White)
30    .size({ width: '100%', height: '100%' })
31  }
32}
33```
34
35To enable this animation, add **"orientation": "auto_rotation"** to the **abilities** list in the **module.json5** file of the project.
36```json
37"orientation": "auto_rotation",
38```
39
40The rotation transition animation with layout switching ensures a seamless transition of size and position for windows and application views that rotate in synchronization.
41
42![Alt text](figures/rotation.gif)
43
44## Rotation Transition Animation with Opacity Changing
45
46The rotation transition animation with opacity changing is activated upon changes in the screen display orientation. It applies a default opacity transition to components that are added or removed during the rotation, allowing for an elegant appearance and disappearance of components. This feature listens for window rotation events and switches the visual effects of components within these events. If the root nodes of the disappearing and appearing views have not been set with a transition effect, it will automatically apply a default opacity transition (that is, [TransitionEffect](../reference/apis-arkui/arkui-ts/ts-transition-animation-component.md#transitioneffect10).OPACITY), creating a smooth fade-in and fade-out effect.
47
48```ts
49// xx.ets
50import { display } from '@kit.ArkUI';
51
52@Entry
53@Component
54struct rotation {
55
56  // Obtain the screen display orientation received by listening for the windowsSizeChange event.
57  @StorageLink('orientation') myOrientation: display.Orientation = display.Orientation.PORTRAIT;
58
59  build() {
60    Stack() {
61
62      // Switch the component's visual effect when the screen display orientation changes.
63      if (this.myOrientation == display.Orientation.PORTRAIT || this.myOrientation == display.Orientation.PORTRAIT_INVERTED) {
64        Image($r('app.media.sky'))
65          .size({ width: 100, height: 100 })
66          .id('image1')
67
68          // You can also implement opacity changes for rotation transition animations by setting TransitionEffect.OPACITY.
69          // .transition(TransitionEffect.OPACITY)
70      } else {
71        Image($r('app.media.tree'))
72          .position({ x: 0, y: 0 })
73          .size({ width: 200, height: 200 })
74          .id('image2')
75
76          // You can also implement opacity changes for rotation transition animations by setting TransitionEffect.OPACITY.
77          // .transition(TransitionEffect.OPACITY)
78      }
79    }
80    .backgroundColor(Color.White)
81    .size({ width: '100%', height: '100%' })
82  }
83}
84```
85
86Listen for the **windowSizeChange** event to manage the transitions. For example, you can add logic in the **onWindowStageCreate** API of the **EntryAbility.ets** file to obtain the screen display orientation.
87```ts
88onWindowStageCreate(windowStage: window.WindowStage): void {
89
90    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
91
92    let mainWindow: window.Window;
93    try {
94      mainWindow = windowStage.getMainWindowSync();
95      let displayClass: display.Display = display.getDefaultDisplaySync();
96      AppStorage.setOrCreate('orientation', displayClass.orientation);
97      // Listen for the windowsSizeChange event, which is triggered when the screen is rotated.
98      mainWindow.on('windowSizeChange', (data) => {
99        console.info('Succeeded in enabling the listener for window size changes. Data: ' + JSON.stringify(data));
100        let displayClass: display.Display | null = null;
101        try {
102          displayClass = display.getDefaultDisplaySync();
103          console.info('display orientation is ' + JSON.stringify(displayClass.orientation));
104          // Obtain the screen display orientation.
105          AppStorage.set('orientation', displayClass.orientation);
106        } catch {
107          return;
108        }
109      })
110    } catch {
111      hilog.info(0x0000, 'testTag', '%{public}s', 'error');
112      return;
113    }
114
115    windowStage.loadContent('pages/Index', (err) => {
116      if (err.code) {
117        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
118        return;
119      }
120      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
121    });
122}
123```
124
125To enable this animation, add **"orientation": "auto_rotation"** to the **abilities** list in the **module.json5** file of the project.
126```json
127"orientation": "auto_rotation",
128```
129
130The rotation transition animation with opacity changing manages the transition of size and position for the window and smoothly switches between application views, providing a fade-out effect for the disappearing view and a fade-in effect for the appearing view.
131
132![rotation-opacity](figures/rotation-opacity.gif)
133