【鸿蒙南向开发】OpenHarmonyUI实战自定义对话框动效

前言

安卓可以通过 setWindowAnimations 方法可以设置自定义对话框进入时的各种动效，项目中要求模拟滑入动效；本文以下图实现效果（点击按钮后从上方飞入一个模态对话框）的实现代码为例提供一种思路和方法

实现思路和方法

模态对话框自带动效

OpenHarmony 提供了自定义弹窗，模态对话框通常可以采用弹窗实现。

自定义弹窗组件在 api10 新增了 openAnimation 参数，类型为 AnimateParam，可以设置自定义设置弹窗弹出的动画效果相关参数；但 AnimateParam 只能设置动画时间，不能设置滑入动效；无法直接达成所需目标效果

组件间转场动效

OpenHarmony 系统的转场动画效果丰富；如组件内转场主要通过 transition 属性配置转场参数，在组件插入和删除时显示过渡动效；支持透明度/平移/旋转等动效且可以多种动效组合显示；图中所示动效可以通过 move 实现

思路及代码实现

由此可以结合上述技术点实现丰富动效：

1、定义一个变量 visible 控制弹窗内内容插入或删除

2、弹窗自定义 openAnimation，在 onFinish 回调中设置 visible 插入弹窗内容

3、弹窗中定义动画效果

具体代码如下，api10 上可以直接运行

// xxx.ets
@CustomDialog
struct CustomDialogExample {
  controller: CustomDialogController

  @Link visible:boolean

  build() {
    if (this.visible) {
      Column() {
        Text('Change text').fontSize(20).margin({ top: 10, bottom: 10 })
        TextInput({ placeholder: '' }).height(60).width('90%')
          .onChange((value: string) => {

          })
        Text('Whether to change a text?').fontSize(16).margin({ bottom: 10 })
      }.borderRadius(10)
      .backgroundColor(Color.White)
      .transition(TransitionEffect.move(TransitionEdge.TOP).animation({ duration: 1000}))
      //.transition(TransitionEffect.move(TransitionEdge.TOP).animation({ duration: 1000}).combine(TransitionEffect.rotate({ z: 1, angle: 180 })))
    }
  }

  aboutToDisappear() {
    this.visible = false
  }
}

@Entry
@Component
struct CustomDialogUser {
  @State inputValue: string = 'click me'
  @State visible:boolean = false

  dialogController: CustomDialogController | null = new CustomDialogController({
    builder: CustomDialogExample({
      visible: $visible
    }),
    autoCancel: true,
    alignment: DialogAlignment.Bottom,
    offset: { dx: 0, dy: -20 },
    gridCount: 4,
    customStyle: true,
    backgroundColor: 0xd9ffffff,
    cornerRadius: 10,
    openAnimation:{duration:0, onFinish:()=>{
      this.visible = true
    }},
  })

  build() {
    Column() {
      Button(this.inputValue)
        .onClick(() => {
          if (this.dialogController != null) {
            this.dialogController.open()
          }
        }).backgroundColor(0x317aff)
    }.width('100%').margin({ top: 5 })
  }
}
// xxx.ets
@CustomDialog
struct CustomDialogExample {
  controller: CustomDialogController

  @Link visible:boolean

  build() {
    if (this.visible) {
      Column() {
        Text('Change text').fontSize(20).margin({ top: 10, bottom: 10 })
        TextInput({ placeholder: '' }).height(60).width('90%')
          .onChange((value: string) => {

          })
        Text('Whether to change a text?').fontSize(16).margin({ bottom: 10 })
      }.borderRadius(10)
      .backgroundColor(Color.White)
      .transition(TransitionEffect.move(TransitionEdge.TOP).animation({ duration: 1000}))
      //.transition(TransitionEffect.move(TransitionEdge.TOP).animation({ duration: 1000}).combine(TransitionEffect.rotate({ z: 1, angle: 180 })))
    }
  }

  aboutToDisappear() {
    this.visible = false
  }
}

@Entry
@Component
struct CustomDialogUser {
  @State inputValue: string = 'click me'
  @State visible:boolean = false

  dialogController: CustomDialogController | null = new CustomDialogController({
    builder: CustomDialogExample({
      visible: $visible
    }),
    autoCancel: true,
    alignment: DialogAlignment.Bottom,
    offset: { dx: 0, dy: -20 },
    gridCount: 4,
    customStyle: true,
    backgroundColor: 0xd9ffffff,
    cornerRadius: 10,
    openAnimation:{duration:0, onFinish:()=>{
      this.visible = true
    }},
  })

  build() {
    Column() {
      Button(this.inputValue)
        .onClick(() => {
          if (this.dialogController != null) {
            this.dialogController.open()
          }
        }).backgroundColor(0x317aff)
    }.width('100%').margin({ top: 5 })
  }
}

写在最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）文档用来跟着学习是非常有必要的。

这份鸿蒙（HarmonyOS NEXT）文档包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习文档能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习文档

鸿蒙（HarmonyOS NEXT）5.0最新学习路线

有了路线图，怎么能没有学习文档呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习文档

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V3.0白皮书》

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

《鸿蒙开发基础》

●ArkTS语言
●安装DevEco Studio
●运用你的第一个ArkTS应用
●ArkUI声明式UI开发
.……

《鸿蒙开发进阶》

●Stage模型入门
●网络管理
●数据管理
●电话服务
●分布式应用开发
●通知与窗口管理
●多媒体技术
●安全技能
●任务管理
●WebGL
●国际化开发
●应用测试
●DFX面向未来设计
●鸿蒙系统移植和裁剪定制
……

《鸿蒙进阶实战》

●ArkTS实践
●UIAbility应用
●网络案例
……

获取以上完整鸿蒙HarmonyOS学习文档，请点击→纯血版全套鸿蒙HarmonyOS学习文档