SwiftUI - 非对称过渡

非对称过渡是一种特殊的过渡类型，使用它我们可以为视图的出现和消失指定不同的过渡方式。例如，视图的出现使用滑动过渡，而视图的消失使用不透明度过渡。此方法用于 `.transition()` 修饰符内。

语法

以下是语法：

static func asymmetric(insertion: AnyTransition, 
   removal: AnyTransition) -> AnyTransition

参数

此方法采用以下参数：

• insertion: 表示视图的插入过渡。

• removal: 表示视图的移除过渡。

示例 1

在下面的 SwiftUI 程序中，我们将非对称过渡应用于圆角矩形。此处圆角矩形使用滑动过渡进入，并使用不透明度过渡退出屏幕。

import SwiftUI
struct ContentView: View {    
   @State private var anime = false   
   var body: some View {   
      ZStack{
         if anime{
            RoundedRectangle(cornerRadius: 10)
               .fill(.red)
               .frame(width: 150, height: 100)            
               // Here we apply asymmetric transition on the shape
               .transition(.asymmetric(insertion: .slide, removal: .opacity))
         }
      }.padding(30)      
      Button("Click Me"){
         withAnimation(.default){
            anime.toggle()
         }
      }.font(.title).foregroundStyle(.brown)
   }
}
#Preview {
   ContentView()
}

输出

示例 2

在下面的 SwiftUI 程序中，我们为两种（真和假）状态更改应用不同的非对称过渡。

import SwiftUI
struct ContentView: View {   
   @State private var anime = false   
   var body: some View {   
      ZStack{
         if anime{
            RoundedRectangle(cornerRadius: 10)
            .fill(.red)
            .frame(width: 150, height: 100)            
            // Here we apply asymmetric transition on the shape
            .transition(.asymmetric(insertion: .slide, removal: .push(from: .top)))
         }else{
            
            RoundedRectangle(cornerRadius: 10)
            .fill(.yellow)
            .frame(width: 150, height: 100)
            
            // Here we apply asymmetric transition on the shape
            .transition(.asymmetric(insertion: .push(from: .top), removal: .slide))
            
         }
      }.padding(30)      
      Button("Click Me"){
         withAnimation(.default){
            anime.toggle()
         }
      }.font(.title).foregroundStyle(.brown)
   }
}
#Preview {
   ContentView()
}

输出