1# 旋转屏动画
2
3旋转屏动画主要分为两类：[布局切换的旋转屏动画](#布局切换的旋转屏动画)和[透明度变化的旋转屏动画](#透明度变化的旋转屏动画)，旨在实现屏幕显示方向变化时的自然过渡。布局切换的旋转屏动画实现较为简便，例如在module.json5中配置自动旋转（或设置窗口显示方向）即可实现。而透明度变化的旋转屏动画则需在module.json5配置的基础上，预备两套视图，在屏幕旋转时，通过视图切换，使消失的视图呈现渐隐效果，新出现的视图则渐显，从而营造流畅的视觉体验。
4
5## 布局切换的旋转屏动画
6
7布局切换时的旋转屏动画，是在屏幕显示方向改变时，为窗口与应用视图同步旋转而设计的大小和位置过渡动画。这种布局切换的旋转屏动画是系统默认的，便于开发者实现。当屏幕显示方向变化时，系统会生成窗口旋转动画，并自动调整窗口大小以匹配旋转后的尺寸。在此过程中，窗口会通知对应的应用，要求其根据新的窗口大小重新布局，产生与窗口旋转动画参数相同的布局动画。
8
9切换屏幕方向即可实现布局切换的旋转屏动画效果。
10
11```ts
12// xx.ets
13import { display } from '@kit.ArkUI';
14
15@Entry
16@Component
17struct rotation {
18
19  build() {
20    Stack() {
21      Image($r('app.media.tree'))
22        .position({ x: 0, y: 0 })
23        .size({ width: 100, height: 100 })
24        .id('image1')
25    }
26    .backgroundColor(Color.White)
27    .size({ width: '100%', height: '100%' })
28  }
29}
30```
31
32需要在项目的module.json5文件中的abilities列表里添加"orientation"，指定为"auto_rotation"。
33```json
34"orientation": "auto_rotation",
35```
36
37布局切换的旋转屏动画，会对同步旋转的窗口与应用视图做大小和位置的过渡。
38
39![Alt text](figures/rotation.gif)
40
41## 透明度变化的旋转屏动画
42
43透明度变化的旋转屏动画在屏幕显示方向变化时启用，当窗口进行旋转动画时，为旋转过程中新增或删除的组件添加默认透明度转场，以实现组件的优雅出现和消失。此功能通过监听窗口旋转事件，在事件中切换组件的视图效果，如果消失视图的根节点和新出现视图的根节点未设置转场效果，会为其自动添加默认透明度转场（即[TransitionEffect](../reference/apis-arkui/arkui-ts/ts-transition-animation-component.md#transitioneffect10对象说明).OPACITY），展现出透明度的渐隐和渐显效果。
44
45```ts
46// xx.ets
47import { display } from '@kit.ArkUI';
48
49@Entry
50@Component
51struct rotation {
52
53  // 获取通过监听窗口的windowsSizeChange事件得到的屏幕显示方向
54  @StorageLink('orientation') myOrientation: display.Orientation = display.Orientation.PORTRAIT;
55
56  build() {
57    Stack() {
58
59      // 当屏幕显示方向变化时，切换组件的视图效果
60      if (this.myOrientation == display.Orientation.PORTRAIT || this.myOrientation == display.Orientation.PORTRAIT_INVERTED) {
61        Image($r('app.media.sky'))
62          .size({ width: 100, height: 100 })
63          .id('image1')
64
65          // 开发者也可以通过自行设置transition的TransitionEffect.OPACITY转场效果来实现旋转屏动画的透明度变化
66          // .transition(TransitionEffect.OPACITY)
67      } else {
68        Image($r('app.media.tree'))
69          .position({ x: 0, y: 0 })
70          .size({ width: 200, height: 200 })
71          .id('image2')
72
73          // 开发者也可以通过自行设置transition的TransitionEffect.OPACITY来实现旋转屏动画的透明度变化
74          // .transition(TransitionEffect.OPACITY)
75      }
76    }
77    .backgroundColor(Color.White)
78    .size({ width: '100%', height: '100%' })
79  }
80}
81```
82
83监听窗口旋转的同步事件windowsSizeChange来实现视图的切换。例如可在EntryAbility.ets文件的onWindowStageCreate方法中添加处理逻辑以获取屏幕的显示方向
84```ts
85onWindowStageCreate(windowStage: window.WindowStage): void {
86
87    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
88
89    let mainWindow: window.Window;
90    try {
91      mainWindow = windowStage.getMainWindowSync();
92      let displayClass: display.Display = display.getDefaultDisplaySync();
93      AppStorage.setOrCreate('orientation', displayClass.orientation);
94      // 监听窗口的windowsSizeChange事件，旋转屏时会触发该事件
95      mainWindow.on('windowSizeChange', (data) => {
96        console.info('Succeeded in enabling the listener for window size changes. Data: ' + JSON.stringify(data));
97        let displayClass: display.Display | null = null;
98        try {
99          displayClass = display.getDefaultDisplaySync();
100          console.info('display orientation is ' + JSON.stringify(displayClass.orientation));
101          // 获取屏幕的显示方向
102          AppStorage.set('orientation', displayClass.orientation);
103        } catch {
104          return;
105        }
106      })
107    } catch {
108      hilog.info(0x0000, 'testTag', '%{public}s', 'error');
109      return;
110    }
111
112    windowStage.loadContent('pages/Index', (err) => {
113      if (err.code) {
114        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
115        return;
116      }
117      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
118    });
119}
120```
121
122需要在项目的 module.json5 文件中的 abilities 列表里添加 "orientation"，指定为 "auto_rotation"
123```json
124"orientation": "auto_rotation",
125```
126
127透明度变化的旋转屏动画，会对窗口做大小和位置的过渡，并同时对应用视图做切换过渡，且为消失隐藏的应用视图做渐隐效果，对新出现的视图做渐显的效果。
128
129![rotation-opacity](figures/rotation-opacity.gif)