example ⟩ Picker

import SwiftUI
import PlaygroundSupport

// 🌀 RoundedRectangle(), 🌀 shape.outlined()
let r1 = RoundedRectangle().outlined(fill: .blue)
let r2 = RoundedRectangle().outlined(fill: .pink)
let spring = Animation.spring(response: 0.5, dampingFraction: 0.5, blendDuration: 0)

// live view
struct ContentView: View {
    
    // ⭐️ view state
    @State private var index = 0
    @State private var change = false
    
    var a: Double { change ? 1 : 0 }  // opacity
    
    // helper
    func makeBody(size: CGSize) -> some View {
        let w = size.width
        var isTag0 : Bool    { index == 0 }
        var d      : CGFloat { isTag0 ? 0 : w }  // offset
        var t      : Double  { isTag0 ? 1 : 0 }  // opacity
        return ZStack {
            r1
                .offset(x: d).opacity(t)  // slide & fade away
                .animation(spring)
            r2
                .offset(x: d - w).opacity(1 - t)
                .animation(.default)
        }
    }
    
    // view body
    var body: some View {
        VStack {
            
            if self.change {
                // rounded rects
                GeometryReader { geo in 
                    self.makeBody(size: geo.size)
                }.transition(.asymmetric(insertion: .move(edge: .bottom), removal: .opacity))
                // segmented control (picker)
                Picker("Day & Night", selection: $index) {
                    Text("🌞 Day").tag(0)
                    Text("🌙 Night").tag(1)
                }.pickerStyle(SegmentedPickerStyle())
            } else {
                // segmented control (picker)
                Picker("Day & Night", selection: $index) {
                    Text("🌞 Day").tag(0)
                    Text("🌙 Night").tag(1)
                }.pickerStyle(SegmentedPickerStyle())
                // rounded rects
                GeometryReader { geo in 
                    self.makeBody(size: geo.size)
                }.transition(.asymmetric(insertion: .move(edge: .top), removal: .opacity))
            }
            
            Divider().padding(.top, 4)
            
            Button(action: { self.change.toggle() }, label: {
                Text("Change")
                    .font(.caption)
                    .padding(8)
                    .padding(.horizontal, 6)
                    .accentColor(.white)
                    .background(Color.orange)
                    .cornerRadius(10)
            })
            
        }// container: VStack
            .frame(350, 200)
            .shadow(radius: 8)
            .padding()
            .background(Color.gray)
            .cornerRadius(10).animation(.default)
    }
}

PlaygroundPage.current.setLiveView(ContentView())