鸿蒙开发教程实战案例源码分享-弹框从上往下进入动画
有时需要改变弹框的进入动画。这次说的是弹框从上往下进入的动画效果。
一、思路：
用transition位移动画
二、效果图：
三、关键代码：
build() {
Column(){
Column({space:16}){
Row(){
Blank()
Image($r('app.media.ic_close_dialog_white'))
.width(25)
.height(25)
.onClick(()=>{
this.controller?.close()
})
}
.width('100%')
Image($r('app.media.yishi4'))
.width(64)
.height(64)
.borderRadius(32)
Text('有趣的灵魂')
.fontColor(Color.White)
.fontSize(14)
.width('100%')
.textAlign(TextAlign.Center)
.textOverflow({
overflow:TextOverflow.Ellipsis
})
.maxLines(1)
Text('聊天可好')
.fontColor(Color.Black)
.fontSize(16)
.fontWeight(FontWeight.Bold)
.textAlign(TextAlign.Center)
.width(190)
.height(40)
.backgroundColor(Color.White)
.borderRadius(20)
}
.width('100%')
.padding(20)
.backgroundImage($r('app.media.yishi6'))
.backgroundImageSize(ImageSize.Cover)
.clip(true)
.borderRadius(8)
}
.padding({
left:20,
right:20,
top:70
})
.transition(TransitionEffect.move(TransitionEdge.TOP)
四、项目demo源码结构图：
有问题或者完整源码的可以看简介联系我，也可以私信我，我每天都看私信的
