HarmonyOS Next中如何实现自定义弹窗显示和退出动画？

Question

在应用开发中，系统弹窗的显示和退出动画往往不满足需求，若要实现自定义弹窗出入动画，可以使用以下方式，例如：1）渐隐渐显的方式弹出，2）从左往右弹出，从右往左收回，3）从下往上的抽屉式弹出、关闭时从上往下收回。我们以从下往上的抽屉式弹出、关闭时从上往下收回为例，来介绍自定义弹窗的显示和退出动画。

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

Answer 1

在应用开发中，系统弹窗的显示和退出动画往往不满足需求，若要实现自定义弹窗出入动画，可以使用以下方式，例如：1）渐隐渐显的方式弹出，2）从左往右弹出，从右往左收回，3）从下往上的抽屉式弹出、关闭时从上往下收回。我们以从下往上的抽屉式弹出、关闭时从上往下收回为例，来介绍自定义弹窗的显示和退出动画。

答案：
可以基于UIContext.getPromptAction弹窗实现，通过CustomDialogOptions自定义弹窗的内容，BaseDialogOptions弹窗选项transition参数可以设置弹窗显示和退出的过渡效果。

import { PromptAction } from '@kit.ArkUI';

@Component
export struct CustomDialogDisplayAndExitAnimations {
  private promptAction: PromptAction = this.getUIContext().getPromptAction();
  private customDialogComponentId: number = 0;
  @Consume('NavPathStack') pageStack: NavPathStack;

  @Builder
  customDialogComponent() {
    Column() {
      Row() {
        Text('Title')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
      .height(56)
      .justifyContent(FlexAlign.Center)

      Text('This is a custom dialog box with different entrance and exit animations.')
        .fontSize(14)
        .width('100%')

      Button('CONFIRM')
        .fontSize(16)
        .fontColor('#0A59F7')
        .backgroundColor(Color.White)
        .onClick(() => {
          this.promptAction.closeCustomDialog(this.customDialogComponentId);
        })
        .width('100%')
        .margin({
          top: 8,
          bottom: 16
        })
    }
    .padding({
      left: 24,
      right: 24
    })
    .width('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
    .backgroundColor(Color.White)
    .borderRadius(32)
  }

  build() {
    NavDestination() {
      Column() {
        Row() {
          Button('OPEN')
            .fontSize(16)
            .width('100%')
            .borderRadius(20)
            .margin({ bottom: 16 })
            .backgroundColor('#0A59F7')
            .onClick(() => {
              this.promptAction.openCustomDialog({
                builder: () => {
                  this.customDialogComponent();
                },
                alignment: DialogAlignment.Center,
                maskColor: 'rgba(0, 0, 0, 0.2)',
                // Set two animations, corresponding to the pop-up window display and hidden animation respectively.
                transition: TransitionEffect.asymmetric(
                  TransitionEffect.OPACITY
                    .animation({ duration: 1000 })
                    .combine(
                      TransitionEffect
                        .translate({ y: 1000 })
                        .animation({ duration: 1000 }))
                  ,
                  TransitionEffect.OPACITY
                    .animation({ delay: 1000, duration: 1000 })
                    .combine(
                      TransitionEffect
                        .translate({ y: 1000 })
                        .animation({ duration: 1000 }))
                )
              }).then((dialogId: number) => {
                this.customDialogComponentId = dialogId;
              })
            })
        }
        .width('100%')
        .alignItems(VerticalAlign.Center)
      }
      .width('100%')
      .height('100%')
      .padding({
        left: 16,
        right: 16
      })
      .justifyContent(FlexAlign.End)
    }
  }
}

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