目录

HdsVisualComponent

HdsVisualComponent is used to implement complex visual effects. You can select specific visual effect scenes through HdsVisualComponent to develop corresponding complex visual effects.

Start version: 6.0.0(20)

Modules to Import

  • HdsVisualComponentAttribute is essential for configuring the HdsVisualComponent component. In version 6.0.1(21) and earlier, you must manually import HdsVisualComponentAttribute after importing the HdsVisualComponent component. Otherwise, a compilation error is reported. However, starting from version 6.0.2(22), the compilation toolchain automatically imports HdsVisualComponentAttribute when it detects the HdsVisualComponent component, so manual import is no longer necessary.

  • If you manually import HdsVisualComponentAttribute, DevEco Studio shows it as disabled (grayed out). In version 6.0.1(21) and earlier, removing this import causes a compilation error. But from version 6.0.2(22) onward, removing it does not affect the functionality.

Version 6.0.1(21) and earlier:

import { HdsVisualComponent, HdsVisualComponentAttribute, HdsSceneController, HdsSceneType, hdsEffect } from '@kit.UIDesignKit';

Version 6.0.2(22) and later:

import { HdsVisualComponent, HdsSceneController, HdsSceneType, hdsEffect } from '@kit.UIDesignKit';

Child Components

None

API

HdsVisualComponent()

Creates a common visual effect component HdsVisualComponent.

Widget capability: This API can be used in ArkTS widgets since version 6.0.2(22).

System capability: SystemCapability.UIDesign.HDSComponent.Core

Start version: 6.0.0(20)

Attributes

In addition to universal attributes, the following attributes are supported.

[h2]scene

scene(sceneType: HdsSceneType, controller: HdsSceneController, callback?: HdsSceneFinishCallback, frameRateRange?: hdsEffect.ExpectedFrameRateRange)

Sets a visual effect scene.

Widget capability: This API can be used in ArkTS widgets since version 6.0.2(22).

System capability: SystemCapability.UIDesign.HDSComponent.Core

Start version: 6.0.0(20)

Parameter Type Mandatory Description
sceneType HdsSceneType Yes Visual effect scene type.
controller HdsSceneController Yes Visual effect scene controller.
callback HdsSceneFinishCallback No Triggered when the visual effect scene ends.
frameRateRange hdsEffect.ExpectedFrameRateRange No Frame rate range for the visual effect scene.

Events

Universal events are supported.

HdsSceneType

Sets a visual effect scene.

Widget capability: This API can be used in ArkTS widgets since version 6.0.2(22).

System capability: SystemCapability.UIDesign.HDSComponent.Core

Start version: 6.0.0(20)

Name Value Description
DUAL_EDGE_FLOW_LIGHT_WITH_BACKGROUND_MASK 0

Dual-edge flowing light effect with a background.

NOTE: This effect does not apply for TVs.

HdsSceneFinishCallback

type HdsSceneFinishCallback = () => void

Defines the callback triggered upon visual effect animation ending.

Widget capability: This API can be used in ArkTS widgets since version 6.0.2(22).

System capability: SystemCapability.UIDesign.HDSComponent.Core

Start version: 6.0.0(20)

HdsSceneController

Scene controller.

Widget capability: This API can be used in ArkTS widgets since version 6.0.2(22).

System capability: SystemCapability.UIDesign.HDSComponent.Core

Start version: 6.0.0(20)

[h2]constructor

constructor()

Constructor for HdsSceneController.

Widget capability: This API can be used in ArkTS widgets since version 6.0.2(22).

System capability: SystemCapability.UIDesign.HDSComponent.Core

Start version: 6.0.0(20)

[h2]start

start(): void

Starts the animation of a visual effect scene.

System capability: SystemCapability.UIDesign.HDSComponent.Core

Start version: 6.0.0(20)

[h2]pause

pause(): void

Pauses the animation of a visual effect scene.

System capability: SystemCapability.UIDesign.HDSComponent.Core

Start version: 6.0.0(20)

[h2]resume

resume(): void

Resumes the animation of a visual effect scene.

System capability: SystemCapability.UIDesign.HDSComponent.Core

Start version: 6.0.0(20)

[h2]stop

stop(): void

Stops the animation of a visual effect scene.

System capability: SystemCapability.UIDesign.HDSComponent.Core

Start version: 6.0.0(20)

[h2]setSceneParams

setSceneParams(params: SceneParams): HdsSceneController

Sets visual effect scene parameters.

System capability: SystemCapability.UIDesign.HDSComponent.Core

Start version: 6.0.0(20)

Parameters

Name Type Mandatory Description
params SceneParams Yes Scene parameters.

Returns:

Type Description
HdsSceneController HdsSceneController object.

SceneParams

type SceneParams = DualEdgeFlowLightWithMaskParam

Sets visual effect scene parameters.

System capability: SystemCapability.UIDesign.HDSComponent.Core

Start version: 6.0.0(20)

Type Description
DualEdgeFlowLightWithMaskParam Dual-edge flowing light effect parameters.

DualEdgeFlowLightWithMaskParam

Defines dual-edge flowing light effect parameters.

System capability: SystemCapability.UIDesign.HDSComponent.Core

Start version: 6.0.0(20)

Name Type Read-Only Optional Description
backgroundMaskColors Array<ResourceColor> No No Background overlay color array.
firstEdgeFlowLight hdsEffect.EdgeFlowLightParam No No Parameters of the first flowing light edge.
secondEdgeFlowLight hdsEffect.EdgeFlowLightParam No No Parameters of the second flowing light edge.

Example

// Starting from version 6.0.2(22), you do not need to manually import HdsVisualComponentAttribute. For details, refer to the "Modules to Import" section of the HdsVisualComponent reference document.
import { HdsVisualComponent, HdsVisualComponentAttribute, HdsSceneController, HdsSceneType } from '@kit.UIDesignKit';

@Entry
@Component
struct EdgeFlowLightVisualComponent {
  @State sceneController: HdsSceneController = new HdsSceneController()
    .setSceneParams({
      backgroundMaskColors: [Color.Green, Color.Red],
      firstEdgeFlowLight: {
        startPos: 0,
        endPos: 0.5,
        color: Color.Red
      },
      secondEdgeFlowLight: {
        startPos: 0,
        endPos: -0.5,
        color: Color.Green
      }
    })

  build() {
    Stack() {
      HdsVisualComponent()
        .scene(HdsSceneType.DUAL_EDGE_FLOW_LIGHT_WITH_BACKGROUND_MASK, this.sceneController, () => {
          console.info('Succeeded in finishing');
        })
        .width('100%')
        .height('50%')
    }
  }
}