【HarmonyOS NEXT】自定义弹窗动画使用疑惑_鸿蒙customdialogcontroller 底部弹出弹框动画

 【关键字】

自定义弹窗 / openAnimation / 显式动画 / 属性动画 / AnimateParam

【问题描述】

自定义弹窗的openAnimation和closeAnimation该如何使用， AnimateParam文档中描述需要配合animationto使用，customercontroller只定义openAnimation能有什么效果？

【解决方案】

AnimateParam并非必须配合animationto使用。AnimateParam是一个对象类型，只是openAnimation，closeAnimation，animationto在传参时都会用到这个对象类型；CustomDialogController只定义 openAnimation的demo可以参考如下demo，可以控制弹窗出现动画的持续时间，速度等参数。

@CustomDialog
struct CustomDialogExample {
controller?: CustomDialogController
build() {
Column() {
Text('Whether to change a text?').fontSize(16).margin({ bottom: 10 })
}
}
}
 
@Entry
@Component
struct CustomDialogUser {
@State textValue: string = ''
@State inputValue: string = 'click me'
dialogController: CustomDialogController | null = new CustomDialogController({
builder: CustomDialogExample(),
openAnimation: {
duration: 1200,
curve: Curve.Friction,
delay: 500,
playMode: PlayMode.Alternate,
onFinish: () => {
console.info('play end')
}
},
autoCancel: true,
alignment: DialogAlignment.Bottom,
offset: { dx: 0, dy: -20 },
gridCount: 4,
customStyle: false,
backgroundColor: 0xd9ffffff,
cornerRadius: 10,
})
 
// 在自定义组件即将析构销毁时将dialogControlle置空
aboutToDisappear() {
this.dialogController = null // 将dialogController置空
}
 
 
build() {
Column() {
Button(this.inputValue)
.onClick(() => {
if (this.dialogController != null) {
this.dialogController.open()
}
}).backgroundColor(0x317aff)
}.width('100%').margin({ top: 5 })
}
}