可参考如下demo:@Entry @Component struct WaterPage { @State message: string = 'Hello World'; @State flag: boolean = false @State ballX: number = 0 @State ballY: number = 0 build() { Column() { Column() { }.layoutWeight(1).backgroundColor(Color.Pink).width("100%") Stack() { Button("按钮").width("100%").height("100%").stateEffect(false) if (this.flag) { Row() .width(5) .height(5) .position({ x: this.ballX, y: this.ballY }) .backgroundColor("rgba(0,0,0,0.7)") .transition(TransitionEffect.asymmetric( TransitionEffect.IDENTITY, TransitionEffect.OPACITY.animation({ duration: 1000, curve: Curve.EaseInOut }).combine( TransitionEffect.scale({ x: 100, y: 100 }) ) )) .borderRadius(15) } }.width("100%").height(60).clip(true) .onClick((e) => { this.ballX = e.x - 3 this.ballY = e.y - 3 this.flag = !this.flag; setTimeout(() => { this.flag = !this.flag; }, 100) }) Column() { }.layoutWeight(1).backgroundColor(Color.Pink).width("100%") } .width('100%') .height('100%') } }
可参考如下demo: