SwiftUI基礎(chǔ)控件之withAnimation和@State屬性跳轉(zhuǎn)

  • 使用withAnimation和@State屬性顯示新的View 以及移除新的View 來達(dá)到跳轉(zhuǎn)和返回的效果

.transition(.opacity)淡出淡出效果
.transition(.slide)平移滑動效果
.transition(.scale)縮放效果

import SwiftUI

struct ContentView: View {
    @State private var showStack = false

    var body: some View {
        ZStack {
            Color(.systemBackground)
                .ignoresSafeArea()

            VStack {
                Button("顯示視圖") {
                    withAnimation {
                        showStack = true
                    }
                }
                .font(.title)
            }

            // 顯示滑入滑出的視圖
            if showStack {
                SlideInView(showStack: $showStack)
                    .transition(.asymmetric(
                        insertion: .move(edge: .trailing),//這里控制視圖進(jìn)入的方向
                        removal: .move(edge: .leading)//這里控制視圖退出的方向
                    ))
                    .zIndex(1) // 確保它在上面  ***這個是重點(diǎn)如果沒有實(shí)現(xiàn)這個代碼點(diǎn)擊返回的時候就不會觸發(fā) removal: .move(edge: .leading)動畫效果
            }
        }
    }
}

struct SlideInView: View {
    @Binding var showStack: Bool

    var body: some View {
        VStack {
            Spacer()
            Text("我是滑入的視圖")
                .font(.title)
                .padding()

            Button("關(guān)閉") {
                withAnimation {
                    showStack = false
                }
            }
            .padding()
            Spacer()
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.blue.opacity(0.9))
        .foregroundColor(.white)
    }
}

2. 縮放:.scale

.transition(.scale)
插入時從小變大,移除時從大變小。

你還可以帶上比例因子:
.transition(.scale(scale: 0.1, anchor: .center))

3. 旋轉(zhuǎn)加縮放(組合):.scale.combined(with: .rotationEffect(...))

SwiftUI 不直接支持 .rotationEffect 作為過渡,但你可以用 .modifier(...) 自定義:

.transition(
    .modifier(
        active: MyTransitionModifier(scale: 0.2, opacity: 0.0),
        identity: MyTransitionModifier(scale: 1.0, opacity: 1.0)
    )
)

自定義 Transition 示例(放大 + 淡入)

extension AnyTransition {
    static var scaleAndFade: AnyTransition {
        .scale(scale: 0.8).combined(with: .opacity)
    }
}
用法
MyView()
    .transition(.scaleAndFade)

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容