How To Add A Slide In-Out Animation To CustomDialog To Achieve Sliding In From The Bottom Right Corner and Sliding Out

Read the original article：How To Add A Slide In-Out Animation To CustomDialog To Achieve Sliding In From The Bottom Right Corner and Sliding Out

Problem Description

How to add a sliding animation to CustomDialog, sliding in from the bottom right and sliding out when leaving?

Background Knowledge

CustomDialog: Display custom dialogs using the CustomDialogController class. When using dialog components, custom dialogs are preferred to facilitate customization of dialog styles and content.

Appearing/Disappearing Transition: The transition is a basic component transition interface used to implement animation effects when a component appears or disappears. Various effects can be defined by combining different TransitionEffect objects.

animateTo: An explicit animation is a method used for smooth transition animations, typically employed to achieve smooth movements, scaling, or other changes in UI elements. It allows you to specify a target value and animate the transition over a specified time and curve.

Solution

Solution 1: Use the combine attribute to chain together TransitionEffects to form a TransitionEffect that includes multiple transition effects. Additionally, use the translate attribute to set the translation effect during component transitions, where the x value specifies the horizontal translation distance.

A complete example is as follows:

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

@CustomDialog
struct CustomDialogExample {
  controller: CustomDialogController
  @State showFlag: Visibility = Visibility.Visible;
  private effect: TransitionEffect =
    TransitionEffect.OPACITY.animation({ curve: curves.springMotion(0, 1) })
    // Add translation transition effect. The animation parameters here use the specified springMotion()
      .combine(TransitionEffect.translate({ x: 150 }).animation({ curve: curves.springMotion() }))

  build() {
    Column() {
      Button('Close Dialog')
    }
    .width('100%')
    .height(400)
    .backgroundColor(Color.Gray)
    .onClick(() => {
      this.cancel();
    })
    .visibility(this.showFlag)
    .transition(this.effect)
  }

  cancel() {
    this.showFlag = Visibility.Hidden
    setTimeout(() => {
      this.controller.close()
    }, 400)
  }
}

@Entry
@Component
struct CustomDialogUser {
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample(),
    alignment: DialogAlignment.Bottom,
    autoCancel: false,
    customStyle: true
  })

  build() {
    Column() {
      Button('Click Me')
        .onClick(() => {
          this.dialogController.open()
        })
    }
    .width('100%')
    .height('100%')
  }
}

Solution 2: Define a state variable translateX to set the translation distance of the component along the x-axis; define a state variable transparency to set the opacity of the component.
During the process of opening and closing the pop-up window, use explicit animations to dynamically control translateX and transparency, achieving the sliding-in/out animation effect.

A complete example is as follows:

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

@CustomDialog
struct CustomDialogExample {
  controller: CustomDialogController
  @State showFlag: Visibility = Visibility.Visible;
  @State translateX: number = 500 // Set the horizontal translation distance of the component
  @State transparency: number = 0 // Set the opacity of the component
  duration: number = 400

  build() {
    Column() {
      Button('Close Dialog')
    }
    .width('100%')
    .height(400)
    .backgroundColor(Color.Gray)
    .onClick(() => {
      this.cancel();
    })
    .visibility(this.showFlag)
    .opacity(this.transparency)
    .translate({ x: this.translateX })
    .onAppear(() => {
      this.getUIContext().animateTo({
        duration: this.duration,
        iterations: 1,
        curve: curves.springMotion(0, 1)
      }, () => {
        this.translateX = 0
        this.transparency = 1
      })
    })
  }

  cancel() {
    this.getUIContext().animateTo({
      duration: this.duration,
      iterations: 1,
      curve: curves.springMotion(),
      onFinish: () => {
      }
    }, () => {
      this.transparency = 0
      this.translateX = 500
    })

    setTimeout(() => {
      this.controller.close()
    }, 200)
  }
}

@Entry
@Component
struct CustomDialogUser {
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample(),
    alignment: DialogAlignment.Bottom,
    autoCancel: false,
    customStyle: true
  })

  build() {
    Column() {
      Button('Click Me')
        .onClick(() => {
          this.dialogController.open()
        })
    }
    .width('100%')
    .height('100%')
  }
}

Verification Result

This example supports API Version 20 Release and later versions.
This example supports HarmonyOS 6.0.0 Release SDK and later versions.
This example requires DevEco Studio 6.0.0 Release or later for building and running.

Written by Recep Sadullah Yegin