目录

Background Flowing Light Effect

Use Case

The background flowing light effect is supported since version 6.0.0(20).

Your app can call the background flowing light effect API to configure the animated background glow effect for a component. You can set the background color before and after the gradient change. This is commonly applied to full-screen background flowing light effects.

Development Procedure

  1. Import required modules.

    import { hdsEffect } from '@kit.UIDesignKit';

  2. Configure the background flowing light effect.

    @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%')
  }
}