HarmonyOS 鸿蒙Next中通过动画改变透明度，发现视频组件渐现的过程中背景比较黑，这如何优化？

HarmonyOS 鸿蒙Next中通过动画改变透明度，发现视频组件渐现的过程中背景比较黑，这如何优化？

this.getUIContext()?.animateTo({
  duration: 0,
  curve: Curve.Linear
}, () => {
  // this.loopVideoOpacity = 0.8
  // this.changeVideoOpacity = 0.5
  this.changeVideoOpacity = 0
})
}
}
}).backgroundColor($r('app.color.start_window_background'))
  // .transition(TransitionEffect.OPACITY)
  .opacity(this.changeVideoOpacity)

试过将这个控件的背景色设置成蓝色或纯白，但是还是会出现灰色和蓝色的问题，这个如何解决？

cke_20801.png


更多关于HarmonyOS 鸿蒙Next中通过动画改变透明度，发现视频组件渐现的过程中背景比较黑，这如何优化？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

我试了这样布局的话看起来的效果还OK，楼主可以尝试一下

Stack() {
  Video({ /* your video params */ })
    .width('100%')
    .height('100%')

  // 遮罩
  Rect()
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Blue) // 或你想要的色
    .opacity(this.maskOpacity)
}
.onAppear(() => {
  this.maskOpacity = 1
  this.getUIContext()?.animateTo({
    duration: 1500,
    curve: Curve.Linear
  }, () => {
    this.maskOpacity = 0
  })
})

更多关于HarmonyOS 鸿蒙Next中通过动画改变透明度，发现视频组件渐现的过程中背景比较黑，这如何优化？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


楼主你这个应该是背景色与视频层叠加问题。Video组件本身自带黑色背景，如果通过opacity设置整体透明度，会导致背景色与视频黑底混合。所以你即使外层容器设置backgroundColor，也会因透明度叠加产生灰蓝混合现象。还有使用animateTo直接控制opacity会导致背景与内容同步透明化，并不能单独控制视频背景。

你试一下使用RGBA独立控制背景透明度

// 将背景色改为带透明度的RGBA格式

.backgroundColor('rgba(255, 255, 255, 0.9)') // 白色背景+90%透明度

延迟启动动画规避黑屏

// 视频加载完成后触发动画

Video({ src: $rawfile('video.mp4') })

  .onPrepared(() => {

    setTimeout(() => {

      this.getUIContext()?.animateTo({

        duration: 1000,  // 调整为1秒

        curve: Curve.EaseOut

      }, () => {

        this.changeVideoOpacity = 1; // 最终透明度设为1

      });

    }, 300); // 这适当延迟

  })

在鸿蒙Next中优化视频组件渐现时的黑色背景问题，可通过以下方式处理：

  1. 使用ArkUI的Video组件时，设置backgroundColor属性为透明色：
Video({
  src: $rawfile('video.mp4'),
  backgroundColor: Color.Transparent
})
  1. 在动画配置中，同时控制视频组件和背景容器的透明度：
animateTo({ duration: 1000 }, () => {
  this.videoOpacity = 1.0
  this.backgroundOpacity = 1.0
})
  1. 确保视频源本身不含黑色背景，可预先用视频编辑工具处理。

在HarmonyOS Next中优化视频组件透明度动画的背景问题，可以尝试以下方法：

  1. 检查视频源本身的背景色，确保视频内容没有自带黑色背景
  2. 使用Video组件的background属性单独设置背景色：
Video({...})
  .background(Color.Blue)  // 使用明确的背景色
  .opacity(this.changeVideoOpacity)
  1. 尝试在动画开始前预加载视频帧，避免黑屏：
// 先设置初始透明度为0但不显示
this.changeVideoOpacity = 0.01
// 然后开始动画过渡到目标透明度
  1. 如果问题依旧，可能是硬件加速导致的，可以尝试禁用硬件加速：
Video({...})
  .hardwareAcceleration(false)
  1. 确保动画曲线设置合理，避免突然变化：
animateTo({
  duration: 300,  // 适当增加时长
  curve: Curve.EaseOut  // 使用更平滑的曲线
})

这些调整应该能改善视频渐现时的背景显示问题。

回到顶部