SwiftUI实现图片跨屏连续动画scaledToFill模式下裁切异常

错位核心原因是两张拼接图片的布局约束不一致，加之外层容器尺寸设置错误：

1. 原代码仅给第二张图片设置了屏宽frame，第一张图片无明确宽度约束，scaledToFill模式下会按照HStack分配的非整屏宽度计算缩放比例，两张图缩放系数不同，自然出现高度差
2. 外层承载两张图的HStack仅设置了单屏宽度，无法完整容纳两张等大的拼接图，布局阶段就会出现子视图压缩、对齐基准偏移，动画切换alignment时就会出现裁切错位
3. .aspectRatio(contentMode: .fit)模式下图片会优先完整显示内容、自动适配父容器高度，所以不会暴露宽度约束不一致的问题，但本质布局逻辑依然存在缺陷。

• 给两张拼接图片设置完全一致的屏宽、屏高frame，保证两者缩放基准完全统一
• 外层HStack宽度设置为两倍屏宽，刚好容纳两张拼接图，避免子视图被压缩
• 改用offset实现平移动画，比切换alignment的布局性能更稳定，不会出现布局跳变
• 等首帧布局完成后再启动动画，避免启动时的帧错位

修复后完整代码 #

struct ImageBackgroundView: View {
    @State var animate: Bool = false
    let animation: Animation = Animation.linear(duration: 10.0).repeatForever(autoreverses: false)
    
    var body: some View {
        GeometryReader { geo in
            HStack(spacing: 0) {
                Image("lightBackground")
                    .resizable()
                    .scaledToFill()
                    .frame(width: geo.size.width, height: geo.size.height)
                
                Image("lightBackground")
                    .resizable()
                    .scaledToFill()
                    .frame(width: geo.size.width, height: geo.size.height)
            }
            .frame(width: geo.size.width * 2, height: geo.size.height)
            .offset(x: animate ? 0 : -geo.size.width)
            .clipped()
        }
        .ignoresSafeArea()
        .onAppear {
            DispatchQueue.main.async {
                withAnimation(animation) {
                    animate.toggle()
                }
            }
        }
    }
}

关键修改说明 #

• 移除原HStack的spacing: -1，改用0间距避免拼接处出现细缝
• 两张图片统一设置屏宽屏高的固定frame，scaledToFill缩放比例完全一致，从根源消除高度差
• HStack宽度设为两倍屏宽，和两张图片的总宽度完全匹配，布局阶段不会出现子视图压缩问题
• 用offset做位移动画：初始状态偏移-屏宽，动画结束时偏移到0点，循环过程完全无缝，不会出现alignment切换带来的布局重排问题
• 动画触发放在主队列异步回调中，等首帧布局完成后再启动，避免首帧错位
• 添加clipped()修饰符，裁减掉超出屏幕范围的图片内容，避免溢出影响其他页面布局

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