背景流光
====

#### 场景介绍

从6.0.0(20)版本开始，新增支持[背景流光](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ui-design-hdseffect#effecttype)。

通过背景流光接口可以设置组件的背景流动发光效果，并且可以设置背景色及渐变背景色，常用于全屏幕背景流光等。

#### 开发步骤

1.  导入模块。
    
    import { hdsEffect } from '@kit.UIDesignKit';
    
2.  设置背景流光效果。
    
    @Entry
    @Component
    struct UVFlowLight {
      @State controller: hdsEffect.ShaderEffectController = new hdsEffect.ShaderEffectController();
    
      build() {
        Stack() {
        }
        .visualEffect(new hdsEffect.HdsEffectBuilder()
          .shaderEffect({
            effectType: hdsEffect.EffectType.UV\_BACKGROUND\_FLOW\_LIGHT,
            animation: {
              duration: 10000,
              iterations: -1,
              autoPlay: true,
              onFinish: ()=> {
                console.info('Succeeded in finishing');
              }
            },
            controller: this.controller
          })
          .buildEffect())
        .width('100%')
        .height('100%')
      }
    }
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/21/v3/D3aBKmDIS5ei1slrYEOqcQ/zh-cn_image_0000002594668578.jpg?HW-CC-KV=V1&HW-CC-Date=20260612T073350Z&HW-CC-Expire=86400&HW-CC-Sign=0679310B3963F1CA117992640C3438F5E19728F018D7F9E8C2263E3375E8724C)