【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')) // 頁面背景，突出膠囊}
}