#鸿蒙通关秘籍#如何在HarmonyOS中为不同状态设置不同的转场动画？

若需要在组件出现和消失时使用不同的转场动画，可以利用TransitionEffect.asymmetric()函数，分别指定每种状态下的转场效果。下面的代码展示了如何在组件的出现和消失状态下，应用不同的动画效果：

@Entry
@Component
struct AsymmetricTransitionExample {
  @State componentVisible: boolean = true;

  build() {
    Column() {
      Button(this.componentVisible ? 'Hide' : 'Show').width(80).height(30).margin(30)
        .onClick(() => {
          animateTo({ duration: 2000 }, () => {
            this.componentVisible = !this.componentVisible;
          });
        })
      if (this.componentVisible) {
        Image($r('app.media.sampleImage')).width(200).height(200)
          .transition(
            TransitionEffect.asymmetric(
              TransitionEffect.OPACITY.animation({ duration: 1000 }).combine(
                TransitionEffect.rotate({ z: 1, angle: 180 }).animation({ delay: 1000, duration: 1000 })
              ),
              TransitionEffect.OPACITY.animation({ delay: 1000, duration: 1000 }).combine(
                TransitionEffect.rotate({ z: 1, angle: 180 }).animation({ duration: 1000 })
              )
            )
          )
      }
    }.width('100%')
  }
}

在此例中，TransitionEffect.asymmetric()用来设置趋显与趋隐时的不同动画。比如，出现时，组件的透明度从0变为1，并旋转指定角度；消失时，相反的动画效果会被应用。