【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：
可选，用来加更多属性配置，基础用法暂时用不上，但导入也不影响。

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

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 装饰器，方便后续动态修改参数（比如点击改变颜色）：

@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 叠在一起。

基础渲染代码：

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 改了下，做了个“点击切换流光颜色”的胶囊按钮，直接复制就能跑：

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')) // 页面背景，突出胶囊}
}