【关键字】
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