【HarmonyOS NEXT】如何实现底部弹窗动画

【关键字】

ArkTS / dialog / 弹起 / 收回 / 动画

【问题描述】

ArkTS如何实现类似Android通过在xml里设置<set><translate>属性，来控制dialog弹起收回的动画效果？类似首次使用华为帐号，dialog底部弹起及收回的动画。

【解决方案】

请参考如下代码：

let anmDuration: number = 800;

// 弹窗交互
@CustomDialog
struct CustomDialogExample {

controller: CustomDialogController = new CustomDialogController({
builder: CustomDialogExample({}),
autoCancel:false
})

@State showFlag: Visibility = Visibility.Visible;
@State isAutoCancel: boolean = false;

build() {
Column() {
Text('点我关闭弹窗').fontSize(20).margin({ top: 10, bottom: 10 })
.backgroundColor('#FFFFFF')
.textAlign(TextAlign.Center)
.height(200)
.width('100%')
.margin({top:600})
.onClick(()=>{
this.cancel();
})
}
.width('100%')
.height('100%')
.margin({
bottom: -15
})
.onClick(()=>{
if(this.isAutoCancel){
this.cancel();
}
})
.visibility(this.showFlag)
.transition(TransitionEffect.OPACITY.animation({duration: anmDuration}).combine(TransitionEffect.translate({y: 100})))
}

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

@Entry
@Component
struct CustomDialogUser {
@State isAutoCancel: boolean = false;

dialogController: CustomDialogController = new CustomDialogController({
builder: CustomDialogExample({ isAutoCancel: this.isAutoCancel }),
autoCancel: this.isAutoCancel,
customStyle:true
})

build() {
Column() {
Button('click me')
.onClick(() => {
this.dialogController.open()
})
}.width('100%').height('100%').margin({ top: 5 })
.onClick(()=>{
})
}
}

参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-promptaction-0000001821000749