【HarmonyOS 6】仿AI唤起屏幕边缘流光特效

一、前言

最近在做 HarmonyOS 6.0 的适配，发现 Beta1版本里多了个很实用的视效功能------自带背景的双边流光。

之前做屏幕边缘流光特效的时候，要么得自己写渐变+动画拼效果，要么就得套好几个组件叠层，加上视频或者lottie，调试起来特别麻烦。

现在用系统提供的 HdsVisualComponent 直接调用，参数配置好就能出效果，省了不少事儿。今天就把这个功能的实战过程跟大家捋一捋，附上能直接跑的 Demo 代码。

二、先搞懂：这个功能到底能干嘛？

简单说，这个自带背景的双边流光是通过 HdsVisualComponent（通用视效组件）提供的场景接口实现的，核心能做两件事：

1、控制两条独立的流光 ：每条流光都能设起始位置、终止位置和颜色，比如一条从左到右，一条从下到上，颜色还能不一样； 2、叠加背景板颜色：背景可以是单色，也能搞渐变色（传颜色数组就行），不用再额外套一个 Container 当背景；

之前自己写的时候，光处理流光的"流动方向"和"背景不穿透"就踩了好几个坑，现在系统把这些封装成场景接口，直接传参数就行，效率提升不是一点半点。

三、从导入到出效果，3步搞定

1、先导入必须的模块

首先得把需要的组件和枚举导入进来，不用记全，重点是这几个

HdsVisualComponent：核心的视效组件，所有效果都靠它渲染

HdsSceneController：用来控制场景参数（比如流光位置、颜色）

HdsSceneType：指定场景类型，这里必须用 DUAL_EDGE_FLOW_LIGHT_WITH_BACKGROUND_MASK（双边流光带背景）

HdsVisualComponentAttribute：可选，用来加更多属性配置，基础用法暂时用不上，但导入也不影响。

代码如下，直接复制到页面顶部就行：

typescript 复制代码

import {
  HdsVisualComponent,
  HdsSceneController,
  HdsSceneType,
  // HdsVisualComponentAttribute // 基础用法暂不启用，注释掉也能跑
} from '@kit.UIDesignKit';
// 别忘了导入Color，处理颜色用
import { Color } from '@ohos.ui';

2、初始化场景控制器，配置核心参数

接下来要创建 HdsSceneController 实例，关键是通过 setSceneParams 配置参数。这里得拎清楚每个参数的作用，不然效果可能跟预期不一样：

参数名	作用说明
backgroundMaskColors	背景色，支持单色（传一个颜色）或渐变色（传多个颜色，比如 [绿, 红] 就是红绿渐变）
firstEdgeFlowLight	第一条流光配置：startPos（起始位置）、endPos（终止位置）、color（流光颜色）
secondEdgeFlowLight	第二条流光配置：参数跟第一条一样，注意 startPos/endPos 可以正负值控制方向

这里有个小细节： startPos 和 endPos 是相对位置，范围建议在 -1 到 1 之间。

正数代表"从组件起点向终点方向"（比如水平组件的从左到右），负数代表"从终点向起点方向"（比如从右到左）。

比如 endPos: 0.5 就是流光到组件中间位置停，endPos: -0.5 就是从中间往反方向延伸。

初始化代码可以用 @State 装饰器，方便后续动态修改参数（比如点击改变颜色）：

typescript 复制代码

@State sceneController: HdsSceneController = new HdsSceneController()
  .setSceneParams({
    // 背景用红绿渐变，从绿到红
    backgroundMaskColors: [Color.Green, Color.Red],
    // 第一条流光：从0位置开始，到中间（0.5）结束，红色
    firstEdgeFlowLight: {
      startPos: 0,
      endPos: 0.5,
      color: Color.Red
    },
    // 第二条流光：从0位置开始，到反方向中间（-0.5）结束，绿色
    secondEdgeFlowLight: {
      startPos: 0,
      endPos: -0.5,
      color: Color.Green
    }
  });

3、渲染 HdsVisualComponent，绑定场景

最后一步就是在 build 里把 HdsVisualComponent 渲染出来，指定场景类型和控制器，再设好宽高（不然组件没大小，看不到效果）。

这里建议用 Stack 包一下，方便后续叠加其他内容（比如文字、图标）。比如做胶囊按钮的话，就把文字放在 Stack 里，跟 HdsVisualComponent 叠在一起。

基础渲染代码：

typescript 复制代码

build() {
  Stack({ alignContent: Alignment.Center }) {
    // 双边流光组件：作为背景
    HdsVisualComponent()
      // 绑定场景类型和控制器，回调可选（成功渲染的提示）
      .scene(
        HdsSceneType.DUAL_EDGE_FLOW_LIGHT_WITH_BACKGROUND_MASK,
        this.sceneController,
        () => {
          console.info('双边流光渲染成功！');
        }
      )
      // 设宽高：100%宽，50%高（根据需求调整）
      .width('100%')
      .height('50%')
      // 圆角：模拟胶囊效果，可选
      .borderRadius(24)

    // 叠加文字：比如胶囊按钮的文字
    Text('双边流光示例')
      .fontSize(20)
      .fontColor(Color.White)
      .fontWeight(FontWeight.Bold)
  }
  .padding(20)
}

DEMO源码：

这个功能从 6.0.0 (20) Beta1 开始支持，低于这个版本的设备会报错，建议在使用前加版本判断（比如用 deviceInfo.apiVersion 做兼容）。

上面的基础版能看到效果，但实际开发中肯定需要交互（比如点击改变流光颜色）。我把 Demo 改了下，做了个"点击切换流光颜色"的胶囊按钮，直接复制就能跑：

typescript 复制代码

import {
  HdsVisualComponent,
  HdsSceneController,
  HdsSceneType
} from '@kit.UIDesignKit';
import { Color, FontWeight, Alignment } from '@ohos.ui';
import { Component, Entry, State, Stack, Text, TapGesture } from '@ohos.ui.components';

@Entry
@Component
struct DualEdgeFlowLightDemo {
  // 用@State存颜色，方便点击修改
  @State bgColors: Color[] = [Color('#2196F3'), Color('#9C27B0')]; // 初始背景：蓝到紫
  @State firstFlowColor: Color = Color('#FFEB3B'); // 第一条流光：黄色
  @State secondFlowColor: Color = Color('#00E676'); // 第二条流光：绿色

  // 场景控制器：依赖颜色状态，所以用getter动态更新
  get sceneController(): HdsSceneController {
    return new HdsSceneController()
      .setSceneParams({
        backgroundMaskColors: this.bgColors,
        firstEdgeFlowLight: {
          startPos: 0,
          endPos: 0.6, // 第一条流光大半屏
          color: this.firstFlowColor
        },
        secondEdgeFlowLight: {
          startPos: 0,
          endPos: -0.6, // 第二条流光反方向大半屏
          color: this.secondFlowColor
        }
      });
  }

  build() {
    Stack({ alignContent: Alignment.Center }) {
      // 1. 双边流光背景
      HdsVisualComponent()
        .scene(
          HdsSceneType.DUAL_EDGE_FLOW_LIGHT_WITH_BACKGROUND_MASK,
          this.sceneController,
          () => {
            console.info('流光渲染成功，点击可切换颜色～');
          }
        )
        .width('80%')
        .height(56) // 胶囊按钮高度，固定更美观
        .borderRadius(28) // 圆角=高度/2，完美胶囊
        // 加点击手势：切换颜色
        .gesture(
          TapGesture()
            .onAction(() => {
              // 点击切换颜色：蓝紫→红绿，黄→红，绿→黄
              this.bgColors = this.bgColors[0] === Color('#2196F3') 
                ? [Color.Green, Color.Red] 
                : [Color('#2196F3'), Color('#9C27B0')];
              this.firstFlowColor = this.firstFlowColor === Color('#FFEB3B') 
                ? Color.Red 
                : Color('#FFEB3B');
              this.secondFlowColor = this.secondFlowColor === Color('#00E676') 
                ? Color('#FFEB3B') 
                : Color('#00E676');
            })
        )

      // 2. 叠加按钮文字
      Text('点击切换流光颜色')
        .fontSize(18)
        .fontColor(Color.White)
        .fontWeight(FontWeight.Bold)
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color('#F5F5F5')) // 页面背景，突出胶囊
  }
}