SwiftUI中使用offset过渡后如何防止图像消失？

你遇到的问题根源在于：当前代码通过if !moveUpLogo条件判断控制Logo的显示，当moveUpLogo变为true时，Logo会被直接从视图树中移除，动画结束后自然消失——过渡动画只是定义了视图被移除时的动画效果，但最终视图还是会被销毁。

要让Logo在动画结束后依然保留，你需要让它始终存在于视图树中，通过状态变量控制它的位置，而非移除它。修改后的代码如下：

import Foundation
import SwiftUI
import ApplicationCore

struct StartUpScreen: View {
    
    @State var moveUpLogo = false
    @State var fadeInText = false
    
    var body: some View {
        
        ZStack {

            Image("BackgroundFirstScreen")
                .resizable()
                .scaledToFill()
                .ignoresSafeArea()
            
            VStack {
                Spacer()
                
                // 让Logo始终存在，用offset控制位置
                Image("Logo")
                    .resizable()
                    .scaledToFit()
                    .frame(width: 130, height: 130)
                    .cornerRadius(10)
                    .overlay(RoundedRectangle(cornerRadius: 10)
                        .stroke(AppColors.backgroundColor, lineWidth: 8))
                    .shadow(radius: 10)
                    .offset(y: moveUpLogo ? -150 : 0) // 根据状态控制偏移量
                
                // 文本放在Logo下方，通过opacity控制显示
                Text("Enter email")
                    .frame(width:100)
                    .opacity(fadeInText ? 1 : 0)
                
                Spacer()
            }
        }
        .onAppear {
            DispatchQueue.main.asyncAfter(deadline: .now() + 1.0) {
                withAnimation(.linear(duration: 3)) {
                    self.moveUpLogo = true
                }
            }
            DispatchQueue.main.asyncAfter(deadline: .now() + 2.0) {
                withAnimation(.linear(duration: 3)) {
                    self.fadeInText = true
                }
            }
        }
    }
    
}

struct StartUpScreen_Previews: PreviewProvider {
    static var previews: some View {
        StartUpScreen()
    }
}

修改要点说明： #

• 移除原有的if-else判断，确保Logo始终保留在视图结构中
• 用offset(y: moveUpLogo ? -150 : 0)替代过渡动画，直接通过状态变量控制Logo的位置，动画会随状态变化自动生效
• 调整文本布局，让它自然出现在Logo移动后的下方位置，保留原有淡入动画逻辑

这样修改后，Logo会在动画结束后停留在偏移后的位置，不会消失。

内容的提问来源于stack exchange，提问作者stefanosn