在HarmonyOS NEXT中，组件内部转场可以设置动画效果吗？

Question

在HarmonyOS NEXT中，组件内部转场可以设置动画效果吗

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

在 HarmonyOS NEXT 中，组件内部转场可以设置动画效果。可以使用 transition 结合不同的转场效果如 TransitionEffect.move、TransitionEffect.translate 等设置动画，还可以通过设置 animation 的属性如 duration、tempo 等来控制动画的持续时间和缓动效果等。例如：

@Entry
@Component
struct TransitionEffectExample2 {
  @State flag: boolean = true;
  @State show: string = 'show';
  build() {
    Column() {
      Button(this.show).width(80).height(30).margin(30)
       .onClick(() => {
          // 点击 Button 控制 Image 的显示和消失
          if (this.flag) {
            this.show = 'hide';
          } else {
            this.show = 'show';
          }
          animateTo({ duration: 2000 }, () => {
            this.flag =!this.flag;
          });
        })
      if (this.flag) {
        Image($r('app.media.icon')).width(200).height(200)
         .transition(TransitionEffect.move(TransitionEdge.TOP).animation({ duration: 1000 }))
      }
    }
  }
}

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。