【HarmonyOS】ArkTS 组件内转场动画，动画播放时颜色异常问题

​【关键字】

HarmonyOS、ArkTS、组件内转场动画、颜色异常

 

【问题描述】

根据组件内转场动画文档中示例编写代码，使用动画转场组件button，并给button设置背景色让button透明度为0，实现动画转场时，会先出现默认蓝色button，然后动画再消失，问题代码如下所示：

@State flag: boolean = true;
@State show: string = 'show';

build() {
  Column() {
    Button(this.show).width(80).height(30).margin(30)
      .onClick(() => {
        if (this.flag) {
          this.show = 'hide';
        } else {
          this.show = 'show';
        }

        animateTo({ duration: 1000 }, () => {
          this.flag = !this.flag;
        })
      })
    if (this.flag) {
      Button('按钮')
        .transition({ type: TransitionType.Insert, translate: { x: 20, y: -20 } })
        .transition({ type: TransitionType.Delete, opacity: 0, scale: { x: 0, y: 0 } })
        .backgroundColor('rgba(255,255,255,0)')
        .width(100)
        .height(30)
        .margin(5)
    }
  }
}

问题现象请见下图，中间button按钮动画显示的时候，应该透明的，但是出现了蓝色按钮再消失现象

​

 

【问题分析与解决】

设置组件转场动画时，若组件存在默认背景色或者其他默认属性颜色，使用上述方式设置转场动画时，会闪现默认属性颜色；目前可通过如下方式解决，如组件本身就不可见，可不通过if判断this.flag变量来控制，而是通过组件的visibility属性判断是否显示，代码如下所示，这样就可以解决button播放动画时默认颜色显示问题了。

build() {
  Column() {
    Button(this.show).width(80).height(30).margin(30)
      .onClick(() => {
        if (this.flag) {
          this.show = 'hide';
        } else {
          this.show = 'show';
        }

        animateTo({ duration: 1000 }, () => {
          this.flag = !this.flag;
        })
      })

    Button('按钮')
      .transition({ type: TransitionType.Insert, translate: { x: 20, y: -20 } })
      .transition({ type: TransitionType.Delete, opacity: 0, scale: { x: 0, y: 0 } })
      .visibility(this.flag ? Visibility.Visible : Visibility.None)
      .backgroundColor('rgba(255,255,255,0)')
      .width(100)
      .height(30)
      .margin(5)
  }
}

 

【参考文档】

https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/arkts-transition-animation-within-component-0000001500755277-V3

​