OpenHarmony开发者论坛

标题: [OH UI实战]自定义对话框动效 [打印本页]

作者: 深开鸿_石悌君 时间: 2024-3-20 09:47
标题: [OH UI实战]自定义对话框动效
[md]### 前言

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

<div align='center'><img src="https://forums-obs.openharmony.cn/forum/202403/20/093742vyme2bd9b59m2qzy.gif" alt="antimation" style="zoom: 25%;" /></div>

### 实现思路和方法

#### 模态对话框自带动效

OpenHarmony提供了[自定义弹窗](https://docs.openharmony.cn/page ... ustom-dialog-box.md)，模态对话框通常可以采用弹窗实现。

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

#### 组件间转场动效

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

#### 思路及代码实现

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

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

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

3、弹窗中定义动画效果

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

```typescript
// 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 })
  }
}
```

### 参考资料

[OpenHarmony自定义弹窗](https://docs.openharmony.cn/page ... ustom-dialog-box.md)

[组件间转场动效](https://docs.openharmony.cn/page ... mation-component.md)
[/md]

欢迎光临 OpenHarmony开发者论坛 (https://forums.openharmony.cn/)