#鸿蒙通关秘籍#如何为旋转屏动画配置渐隐和渐现的转场效果？

为了在旋转屏动画中添加渐隐和渐现的转场效果，需要对项目中的代码进行一些调整。首先，在原有富有旋转屏功能的代码中，可以通过在 Image 标签中使用 Opacity 属性来实现渐隐渐现的效果。

以下是修改后的代码示例：

import { display } from '@kit.ArkUI';

@Entry
@Component
struct rotation {
  @StorageLink('orientation') myOrientation: display.Orientation = display.Orientation.PORTRAIT;

  build() {
    Stack() {
      if (this.myOrientation == display.Orientation.PORTRAIT || this.myOrientation == display.Orientation.PORTRAIT_INVERTED) {
        Image($r('app.media.sky'))
          .size({ width: 100, height: 100 })
          .opacity(0.0) // 开始为不可见
          .then(() => this.props.opacity = 1.0, 500) // 动画持续时间为500ms
          .id('image1')
      } else {
        Image($r('app.media.tree'))
          .position({ x: 0, y: 0 })
          .size({ width: 200, height: 200 })
          .opacity(0.0) // 同样开始为不可见
          .then(() => this.props.opacity = 1.0, 500) // 设置动画渐显效果
          .id('image2')
      }
    }
    .backgroundColor(Color.White)
    .size({ width: '100%', height: '100%' })
  }
}

在 module.json5 文件内，可以确保已正确设置了方向旋转为 auto_rotation：

"orientation": "auto_rotation",

这样，可以实现从一个方向切换到另一个方向的过程中应用渐隐和渐现的视觉效果。