HarmonyOS鸿蒙Next中如何启动ability异形窗口。我们的app要实现一个这样的窗口用于加载动画。

HarmonyOS鸿蒙Next中如何启动ability异形窗口。我们的app要实现一个这样的窗口用于加载动画。

用户问题是关于鸿蒙pc应用开发中启动异形窗口的问题。他需要启动一个抖动的小鸟加载动画,类似win 迅雷客户端启动时,显示一只抖动的小鸟。目前遇到的困难,窗口大小无法调整,无法加载异形窗口,白色背景去不掉。启动 ability 的 startWindowIcon 也无法去掉。

7 回复

异形窗口不理解具体指的是什么？能否提供个demo，描述清楚具体想要的效果呢。

更多关于HarmonyOS鸿蒙Next中如何启动ability异形窗口。我们的app要实现一个这样的窗口用于加载动画。的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


启动一个不规则窗口

就是启动一个不规则窗口，类似 穿越火线客户端首次打开的是一个不规则的窗口，

希望HarmonyOS能继续推出更多实用的功能，满足用户的不同需求。

我的思路是通过设置窗口背景透明、禁用系统装饰实现异形效果。 使用window.setWindowBackgroundColor('#00000000')设置透明背景，然后通过clip属性对根组件进行形状裁剪，配合动画组件实现动态视觉效果。可能不对仅供参考！！！！！

配置Ability透明属性：

// Ability生命周期中配置窗口
import window from '@kit.ArkUI';

onWindowStageCreate(windowStage: window.WindowStage) {
  const mainWindow = windowStage.getMainWindow()
  
  // 设置窗口透明属性
  mainWindow.setWindowBackgroundColor('#00000000')
  mainWindow.setWindowLayoutFullScreen(true) // 全屏显示但透明
  mainWindow.setWindowDecorEnable(false) // 禁用系统装饰
  
  // 设置窗口尺寸（示例尺寸）
  mainWindow.resize(300, 300) // 单位vp
}

异形动画组件：

// 自定义动画组件
@Component
struct BirdLoading {
  @State rotateAngle: number = 0

  build() {
    Image($r('app.media.bird'))
      .size({ width: 100, height: 100 })
      .clip(Shape.Circle) // 圆形裁剪--这个根据你的需要吧
      .position({ x: '50%', y: '50%' })
      .rotate({ angle: this.rotateAngle })
      .onClick(() => {
        animateTo({
          duration: 1000,
          curve: Curve.EaseInOut
        }, () => {
          this.rotateAngle = 360
        })
      })
  }
}

窗口叠加层控制：

// 创建子窗口实现悬浮效果
const subWindow = windowStage.createSubWindow('bird_loading')
subWindow.loadContent('pages/BirdLoading')
subWindow.setWindowLayoutFullScreen(false)
subWindow.resize(300, 300)
subWindow.moveTo(100, 100) // 设置初始位置

我希望的是首个窗口就是不规则的，而不是子窗口。

在HarmonyOS NEXT中，通过Window模块配置异形窗口。首先在config.json中声明abilities的window属性，设置"isTransparent":true和"isDecorEnable":false。使用window.createWindow()创建窗口时，通过WindowStage的setWindowShape()方法设置路径区域，格式为"path://[你的SVG路径]"。动画资源需放在resources/base/media/目录下，通过window.setUIContent()加载布局。注意窗口需在onWindowStageCreate生命周期中初始化。

在HarmonyOS Next中实现异形窗口(如小鸟加载动画)的关键步骤如下：

  1. 使用WindowStage的setWindowBackgroundColor设置透明背景：
onWindowStageCreate(windowStage: window.WindowStage) {
    windowStage.loadContent('pages/loading', (err) => {
        windowStage.getMainWindow().then((win) => {
            win.setWindowBackgroundColor('#00000000'); // 全透明背景
        });
    });
}
  1. 在config.json中配置透明窗口属性：
"abilities": [
    {
        "backgroundModes": ["graphics"],
        "window": {
            "designWidth": 300,
            "autoDesignWidth": false,
            "transparent": true,
            "dimEnabled": false
        }
    }
]
  1. 实现异形窗口的核心方案：
  • 使用自定义布局设置全透明背景
  • 通过动画组件实现小鸟抖动效果
  • 窗口大小通过Window的setWindowAttributes调整
  1. 去除默认图标的方法：
windowStage.getMainWindow().then((win) => {
    win.setWindowSystemBarEnable([]); // 隐藏所有系统栏
});

注意：确保动画资源使用透明PNG格式，窗口尺寸应与动画内容匹配以避免留白。

回到顶部