组件内转场 transition

组件内转场 transition

在组件插入和删除时显示过渡动效，主要用于容器组件中的子组件插入和删除

• 显示与隐藏使用同一个动画 TransitionEffect.opacity(0).animation()
• 显示与隐藏使用不同动画 TransitionEffect.asymmetric(appear, disappear)
  • appear 指定出现的转场效果
  • disappear 指定消失的转场效果
• combine组合多属性动画

import { hilog } from "@kit.PerformanceAnalysisKit";

@ComponentV2
export struct TransitionComponent {
  @Local isVisible: boolean = true;
  @Local isShow: boolean = true;
  @Local isDisplay: boolean = true;

  build() {
    NavDestination() {
      Stack() {
        if (this.isVisible) {
          // 1、显示与隐藏使用同一个动画
          Row() {}.width(200).aspectRatio(1).backgroundColor(Color.Orange)
            .transition(
              // TransitionEffect以函数的形式指定转场效果
              TransitionEffect
                .opacity(0)
                .animation({
                  duration: 500,
                  curve: Curve.Linear,
                  delay: 0,
                  iterations: 1,
                  playMode: PlayMode.Alternate
                }),
              // 转场动画结束回调 true显示动画 false隐藏动画
              (trans: boolean) => {
                hilog.info(0x0123, '', `动画完成 => ${trans}`)
              }
            )
        }

        if (this.isShow) {
          // 2、显示与隐藏使用不同动画
          Row() {}.width(160).aspectRatio(1).backgroundColor(Color.Blue)
          .transition(
            TransitionEffect.asymmetric(
              TransitionEffect.opacity(0).animation({ duration: 1000 }),
              TransitionEffect.translate({ x: -160 }).animation({ duration: 1000 })
            ),
            (trans: boolean) => {
              hilog.info(0x0123, '', `动画完成 => ${trans}`)
            }
          )
        }

        if (this.isDisplay) {
          // 3、combine组合多属性动画
          Row() {}.width(100).aspectRatio(1).backgroundColor(Color.Red)
          .transition(
            TransitionEffect.opacity(0).animation({ duration: 1000 })
              .combine(TransitionEffect.translate({ x: 100 }))
              .combine(TransitionEffect.rotate({ x: 0, y: 0, z: 1, angle: 360 }))
              .combine(TransitionEffect.scale({ x: 0.5, y: 0.5 }).animation({ duration: 500 }))
          )
        }

        Column({ space: 10 }) {
          Button('显式/隐藏使用同一接口动画').fontSize(10)
            .onClick(() => {
              this.isVisible = !this.isVisible;
            })
          Button('显式/隐藏使用不同接口动画').fontSize(10)
            .onClick(() => {
              this.isShow = !this.isShow;
            })
          Button('combine链式组合多属性动画').fontSize(10)
            .onClick(() => {
              this.isDisplay = !this.isDisplay;
            })
        }
        .position({ left: 0, bottom: 20 })
      }
      .width('100%')
      .height('100%')
      .alignContent(Alignment.TopStart)
    }
    .width('100%')
    .height('100%')
  }
}