HarmonyOS 鸿蒙Next 属性动画对于backgroundImage属性不生效

发布于 1周前 作者 songsunli 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 属性动画对于backgroundImage属性不生效

属性动画对于backgroundImage属性不生效 某个页面需要改变Column的背景图片，设置属性动画，未生效，但是测试其他属性，比如backgroundColor，比如height，都会生效，唯独backgroundImage不生效  代码如下:  

import { ConstantsFloat, ConstantsMedia } from 'ResModule/Index';

@Component
export struct LoginBackgroundView {
  bgImageArray: Resource[] = [ConstantsMedia.login_background_image1, ConstantsMedia.login_background_image2,
    ConstantsMedia.login_background_image3,]
  bgColorArray: Color[] = [Color.Red, Color.Green, Color.Blue,]
  bgHeightArray: string[] = ['100%', '50%', '20%',]
  @State bgImage: Resource = this.bgImageArray[0]
  @State bgColor: Color = this.bgColorArray[0]
  @State bgHeight: string = this.bgHeightArray[0]
  index: number = 1
  timerId?: number

  aboutToAppear(): void {
    this.timerId = setInterval(() => {
      if (this.index == 3) {
        this.index = 0
      } /*改变背景图片不生效*/
      this.bgImage = this.bgImageArray[this.index] /*测试改变如下两个属性会生效*/
      // this.bgColor = this.bgColorArray[this.index] 
      // this.bgHeight = this.bgHeightArray[this.index] 
      this.index++
    }, 5000)
  }

  boutToDisappear(): void {
    clearInterval(this.timerId)
  }

  build() {
    Column() {
    }.width(ConstantsFloat.FULL_PERCENT).height(ConstantsFloat.FULL_PERCENT)
    // 测试如下两个属性动画会生效 
    // .height(this.bgHeight) 
    // .backgroundColor(this.bgColor) 
    // 背景不生效 .backgroundImage(this.bgImage) 
    .backgroundImageSize(ImageSize.Cover) /*属性动画*/.animation({ duration: 2000 })
  }
}
Harmonyos Next教程
3 回复 
属性动画对于backgroundImage属性是不生效的，可以用两个图片去显示
[@Entry](/user/Entry)
[@Component](/user/Component)
export struct LoginBackgroundView {
  bgImageArray: Resource[] = [
    $r("app.media.login_background_image1"),
    $r("app.media.login_background_image2"),
    $r("app.media.login_background_image3"),
  ]
  bgColorArray: Color[] = [
    Color.Red,
    Color.Green,
    Color.Blue,
  ]
  bgHeightArray: string[] = [
    '100%',
    '50%',
    '20%',
  ]
  [@State](/user/State) bgImage: Resource = this.bgImageArray[0]
  [@State](/user/State) bgColor: Color = this.bgColorArray[0]
  [@State](/user/State) bgHeight: string = this.bgHeightArray[0]
  [@State](/user/State) isShow: boolean = false
  index: number = 1
  timerId?: number
  aboutToAppear(): void {
    this.timerId = setInterval(() => {
        animateTo({
          duration: 2000,
          curve: Curve.Ease,
          playMode: PlayMode.Normal,
          onFinish: () => {
            console.info('play end')
          }
        }, () => {
          if (this.index == 3) {
            this.index = 0
          }
          this.bgImage = this.bgImageArray[this.index]
          this.index++
          this.isShow = !this.isShow
        })
    }, 5000)
  }
  aboutToDisappear(): void {
    clearInterval(this.timerId)
  }
  build() {
    Column() {
      Stack() {
        if (this.isShow){
          Image(this.bgImage).width(200).height(200)
        }else {
          Image(this.bgImage).width(200).height(200)
        }
      }
    }
    .width("100%")
    .height("100%")
  }
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

使用 Image 亲测有效

[@Builder](/user/Builder)
buildMainBg() {
  if (this.selectedIndex <= 2) {
    Image($r("app.media.bg_main"))
      .width("100%")
      .height("100%")
      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
      .transition(TransitionEffect.OPACITY.animation({ duration: 500 }))
      .linearGradientBlur(60, { fractionStops: [[1, 0], [1, 1]], direction: GradientDirection.Bottom })
  } else {
    Image($r("app.media.bg_main_me"))
      .width("100%")
      .height("100%")
      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
      .transition(TransitionEffect.OPACITY.animation({ duration: 500 }))
      .linearGradientBlur(60, { fractionStops: [[1, 0], [1, 1]], direction: GradientDirection.Bottom })
  }
}

针对HarmonyOS 鸿蒙Next中属性动画对于backgroundImage属性不生效的问题，可能的原因包括：

  1. 动画属性不支持：在HarmonyOS鸿蒙Next中，不是所有属性都支持属性动画。如果backgroundImage属性本身不支持动画效果，那么动画将不会生效。
  2. API限制：某些API版本可能限制了backgroundImage属性的动画效果。确保您的HarmonyOS版本支持对backgroundImage属性的动画操作。
  3. 组件或样式冲突：检查是否有其他组件或样式设置影响了backgroundImage的显示和动画效果。
  4. 图片格式或路径问题：确保backgroundImage所引用的图片格式正确且路径无误，图片文件需存在于指定路径中。

综上所述，需要仔细排查上述可能原因，确保动画属性被正确应用且backgroundImage属性支持动画效果。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html 。

回到顶部