SwiftUI基础控件之withAnimation和@State属性跳转

  • 使用withAnimation和@State属性显示新的View 以及移除新的View 来达到跳转和返回的效果

.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),//这里控制视图进入的方向
                        removal: .move(edge: .leading)//这里控制视图退出的方向
                    ))
                    .zIndex(1) // 确保它在上面  ***这个是重点如果没有实现这个代码点击返回的时候就不会触发 removal: .move(edge: .leading)动画效果
            }
        }
    }
}

struct SlideInView: View {
    @Binding var showStack: Bool

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

            Button("关闭") {
                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. 旋转加缩放(组合):.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)

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容