1# Screen Rotation Animation Enhancement
2
3You can add fade-in and fade-out transition effects to a screen rotation animation, to create a seamless transition experience.
4
5Below is the complete sample code and effect.
6
7```ts
8// xx.ets
9import { display } from '@kit.ArkUI';
10
11@Entry
12@Component
13struct rotation {
14  @StorageLink('orientation') myOrientation: display.Orientation = display.Orientation.PORTRAIT;
15
16  build() {
17    Stack() {
18      if (this.myOrientation == display.Orientation.PORTRAIT || this.myOrientation == display.Orientation.PORTRAIT_INVERTED) {
19        Image($r('app.media.sky'))
20          .size({ width: 100, height: 100 })
21          .id('image1')
22      } else {
23        Image($r('app.media.tree'))
24          .position({ x: 0, y: 0 })
25          .size({ width: 200, height: 200 })
26          .id('image2')
27      }
28    }
29    .backgroundColor(Color.White)
30    .size({ width: '100%', height: '100%' })
31  }
32}
33```
34
35In the **EntryAbility.ets** file, add processing logic to the **onWindowStageCreate** method to obtain the screen display orientation.
36```ts
37onWindowStageCreate(windowStage: window.WindowStage): void {
38    // Main window is created, set main page for this ability
39    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
40
41    let mainWindow: window.Window;
42    try {
43      mainWindow = windowStage.getMainWindowSync();
44      let displayClass: display.Display = display.getDefaultDisplaySync();
45      AppStorage.setOrCreate('orientation', displayClass.orientation);
46      // Listen for the windowsSizeChange event, which is triggered when the screen is rotated.
47      mainWindow.on('windowSizeChange', (data) => {
48        console.info('Succeeded in enabling the listener for window size changes. Data: ' + JSON.stringify(data));
49        let displayClass: display.Display | null = null;
50        try {
51          displayClass = display.getDefaultDisplaySync();
52          console.info('display orientation is ' + JSON.stringify(displayClass.orientation));
53          // Obtain the screen display orientation.
54          AppStorage.set('orientation', displayClass.orientation);
55        } catch {
56          return;
57        }
58      })
59    } catch {
60      hilog.info(0x0000, 'testTag', '%{public}s', 'error');
61      return;
62    }
63
64    windowStage.loadContent('pages/Index', (err) => {
65      if (err.code) {
66        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
67        return;
68      }
69      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
70    });
71}
72```
73
74In the **module.json5** file of the project, add **orientation** to the **abilities** list and set the ability to **auto_rotation**.
75```json
76"orientation": "auto_rotation",
77```
78
79![rotation-opacity](figures/rotation-opacity.gif)
80