transition有两种使用,可以直接使用合并动画,即显示隐藏共用同种动画,也可以分设置两种不同状态动画效果如下:
效果:
合并效果动画:

拆分效果动画:

代码:
struct Translations: View {
@State private var windowControl = false
var body: some View {
VStack{
Button("切换视图"){
withAnimation{
self.windowControl.toggle()
}
}
// 卡片
if windowControl{
Rectangle()//矩形形空间
.fill(Color.purple)
.frame(width: 300, height: 400)
// .transition(.scale)//合并动画
//transition有两种动画 insertion显示/removal隐藏
.transition(.asymmetric(insertion: .scale, removal: .slide))
}
}
}
}
网友评论