【鸿蒙南向开发】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 })
      }.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值