SwiftUI：如何实现视图出现时图片自动左移且不消失？

问题分析 #

• 图片过渡后消失：原代码初始show = true，视图出现后立刻将show改为false，直接移除了图片，导致消失。
• 过渡方向为向右：原代码执行的是图片消失动画，默认.slide过渡在删除视图时会向右滑出，而你需要的是图片出现时向左滑入的动画。

修正后的代码 #

struct StarView: View {
    // 初始设为false，让图片一开始不显示
    @State private var show = false
    
    var body: some View {
        HStack {
            if show {
                // 用SwiftUI原生Image初始化，避免强制解包引发崩溃
                Image("star")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 300, height: 300)
                    // 图片从屏幕右侧向左滑入，实现向左过渡效果
                    .transition(.move(edge: .trailing))
            }
        }
        // 在容器视图的onAppear触发动画，确保时机准确
        .onAppear {
            withAnimation(.spring()) {
                show = true
            }
        }
    }
}

关键修改说明 #

• 解决图片消失问题：将show初始值改为false，视图出现时设置show = true，让图片以动画形式出现后持续显示。
• 实现向左过渡：使用.transition(.move(edge: .trailing))，让图片从屏幕右侧向左移动到目标位置，完全符合向左过渡的需求。如果需要图片从左侧滑入，可改为.move(edge: .leading)。
• 优化代码安全性：替换强制解包的UIImage初始化方式，改用SwiftUI原生的Image("star")，避免图片资源不存在时触发崩溃。

可选进阶：自定义双向过渡 #

如果后续需要给图片添加消失动画，可以使用不对称过渡分别定义出现和消失的方向：

.transition(.asymmetric(
    insertion: .move(edge: .trailing),  // 出现时向左滑入
    removal: .move(edge: .leading)      // 消失时向左滑出
))

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