HarmonyOS 鸿蒙Next中想做一个效果就是按压模块后整个模块都发光然后别的模块会有反射，怎么实现呀

HarmonyOS 鸿蒙Next中想做一个效果就是按压模块后整个模块都发光然后别的模块会有反射，怎么实现呀 想做一个效果就是按压模块后整个模块都发光然后别的模块会有反射，怎么实现呀

cke_727.png


更多关于HarmonyOS 鸿蒙Next中想做一个效果就是按压模块后整个模块都发光然后别的模块会有反射，怎么实现呀的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

  1. 目前可通过点光源效果；通过视效动画设置；shader阴影设置；animation视效动画设置来实现该需求，注API为20方能使用

    具体参考点光源效果： https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ui-design-visual-effect-point-light

  2. 具体效果参数设置请参考： https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ui-design-hdseffect#section67731724154216

    cke_222.png

更多关于HarmonyOS 鸿蒙Next中想做一个效果就是按压模块后整个模块都发光然后别的模块会有反射，怎么实现呀的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


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

// 创建按压光效
@Entry
@Component
struct PressEffectSample {
  @State isPressed: boolean = false;

  build() {
    Column() {
      // 主按压模块
      Column()
        .width(200)
        .height(200)
        .backgroundColor(Color.Gray)
        .visualEffect(
          new hdsEffect.HdsEffectBuilder()
            .pointLight({
              lightSourceType: this.isPressed ? 
                hdsEffect.PointLightSourceType.BRIGHT : 
                hdsEffect.PointLightSourceType.NONE,
              intensity: 0.8
            })
            .pressShadow({
              type: this.isPressed ?
                hdsEffect.PressShadowType.BLEND_WHITE :
                hdsEffect.PressShadowType.NONE
            })
        )
        .onTouch((event) => {
          this.isPressed = (event.type === TouchType.Down);
        })
    }
  }
}

参考地址

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ui-design-visual-effect-point-light#section26065263610

在HarmonyOS Next中，可通过以下方式实现按压发光与反射效果：

  1. 使用ArkTS声明式UI的通用属性clickEffect设置按压态光效，或通过gesture事件监听按压操作触发状态变化。

  2. 发光效果通过组件属性实现：

    • 设置backgroundColor为渐变或高亮色值
    • 添加shadow属性配置发光阴影
    • 结合opacity与scale动画增强视觉效果

  3. 反射效果通过相邻组件的状态联动实现：

    • 使用@State装饰器管理按压状态
    • 通过状态变量控制相邻组件的background、shadow等属性变化
    • 配合transition动画实现平滑过渡

关键代码结构：

@State isPressed: boolean = false

...

Button()
  .onTouch((event) => {
    if(event.type === TouchType.Down){
      this.isPressed = true
    }
  })
  .background(this.isPressed ? glowingEffect : normalEffect)
  .shadow(this.isPressed ? glowShadow : defaultShadow)

// 相邻组件
OtherComponent()
  .background(this.isPressed ? reflectionEffect : normalBackground)

在HarmonyOS Next中实现按压发光与反射效果，可以通过以下步骤完成：

  1. 按压发光效果
    使用TouchListener检测按压事件，通过状态变量控制模块的发光样式。
    在组件的背景或边框上应用Background的gradient或effect属性，设置发光颜色（如浅蓝/白色）和模糊半径，按压时动态调整透明度或亮度。

  2. 反射效果实现

    • 为其他模块添加半透明背景（如#20FFFFFF）和模糊效果，通过Component.animate在按压时触发缩放或透明度动画，模拟反射光感。
    • 使用Canvas绘制动态光晕，根据按压位置计算反射模块的受光强度，通过PropertyAnimation调整参数。

  3. 关键代码示例

    // 按压事件触发发光
[@State](/user/State) isPressed: boolean = false;

build() {
  Column() {
    // 主模块
    Rect()
      .onTouch((event: TouchEvent) => {
        if (event.type === TouchType.Down) {
          this.isPressed = true;
        } else {
          this.isPressed = false;
        }
      })
      .backgroundEffect(this.isPressed ? 
        Effect.SHINE : Effect.NONE) // 自定义发光样式
    
    // 反射模块
    Rect()
      .opacity(this.isPressed ? 0.6 : 0.2)
      .scale({ x: this.isPressed ? 1.1 : 1.0 })
  }
}

  4. 性能优化
    使用@Reusable装饰器减少重复创建，避免频繁动画导致的渲染压力。若反射模块较多，可通过LazyForEach动态加载。

通过组合触摸交互、动态样式与动画，即可实现自然的光效与反射响应。

回到顶部