@Entry @Component struct Page1 { @State message: string = 'Hello World' @State isBegin: boolean=false build() { Column() { //组件转场动画 if (this.isBegin){ Text('^-^') .fontSize(50) .fontWeight(FontWeight.Bold) .transition({ //初态 rotate:{angle:90}, //顺时针旋转90度 //TransitionType默认包括组件新增和删除,默认是All type:TransitionType.All, //opacity设置为0,则旋转开始的时候看不见 opacity:0, //不透明度,0完全透明,1完全显示 translate:{ //平移效果,为插入点起点和终点的值 //正中间为x、y轴交点 x:-60 }, scale:{ //设置初态的倍数大小(缩小与扩大) x:2, y:2 } }) } Button('更新') .onClick(()=>{ animateTo({},()=>{ //终态 this.isBegin=!this.isBegin }) }) } .width('100%') .height('100%') } }
实现效果图: