iOS17/Xcode15下ScrollView内视图帧切换出现camera lag问题

点击天气预览视图时，视图会通过动画展开高度。此前运行流畅，但升级至iOS 17和Xcode 15后，出现了相机卡顿（camera lag），推测原因是ScrollView内视图的frame变化影响了滚动"相机"的位置。

天气预览视图代码 #

MainWeatherView(time: 0.3, currentViewState: .eventPreview)
                                .clipShape(RoundedRectangle(cornerRadius: 10))
                                .padding(.horizontal)
                                .frame(height: geo.size.height / (secondWeatherTapped ? 3 : 9))
                                .onTapGesture {
                                    withAnimation {
                                        firstWeatherTapped = false
                                        secondWeatherTapped.toggle()
                                        thirdWeatherTapped = false
                                    }
                                }
                                .overlay(
                                    HStack {
                                        VStack(alignment: .leading) {
                                            Text("7:10 AM - 7:50 AM")
                                                .font(.title2.bold())
                                            Text("Breakfast")
                                                .font(.title2)
                                        }
                                        Spacer()
                                    }
                                        .foregroundStyle(.white)
                                        .padding(.leading, 40)
                                )

完整最小示例代码（含测试数据） #

GeometryReader { geo in
    ZStack {
        ScrollView(showsIndicators: false) {
            LazyVStack {
                ZStack {
                    Image("plusImage")
                        .resizable()
                        .scaledToFill()
                        .offset(y: -(geo.size.height / 6))
                    
                    VStack {
                        Image(systemName: "sun.and.horizon.fill")
                            .font(.system(size: geo.size.height / 10.48))
                        
                        Text("Monday+")
                            .font(.system(size: geo.size.height / 24, weight: .bold, design: .monospaced))
                            .padding(.bottom)
                            .padding(.top, geo.size.height / 84)
                        
                        Text("Style your Mondays and organize your life with ease.")
                            .font(.title2)
                            .fontWeight(.medium)
                            .padding(.horizontal, geo.size.height / 21)
                            .multilineTextAlignment(.center)
                    }
                    .offset(y: -(geo.size.height / 6.45))
                }
                .foregroundStyle(.white)
                
                Group {
                    VStack {
                        Text("Weather Backgrounds")
                            .font(.plusFeatures)
                        
                        Text("Create a refined schedule by incorporating foresight into the upcoming weather conditions.")
                            .multilineTextAlignment(.center)
                            .padding(.horizontal, 40)
                            .foregroundStyle(.primary.opacity(0.8))
                    }
                    
                    MainWeatherView(time: 0.3, currentViewState: .eventPreview)
                        .clipShape(RoundedRectangle(cornerRadius: 10))
                        .padding(.horizontal)
                        .frame(height: geo.size.height / (secondWeatherTapped ? 3 : 9))
                        .onTapGesture {
                            withAnimation {
                                firstWeatherTapped = false
                                secondWeatherTapped.toggle()
                                thirdWeatherTapped = false
                            }
                        }
                        .overlay(
                            Text("")
                        )
                    
                    MainWeatherView(time: 0.5, stormType: .thunderstorm, rainIntensity: 200, dropSpeed: thirdWeatherTapped ? 1 : 6, currentViewState: .eventPreview)
                        .clipShape(RoundedRectangle(cornerRadius: 10))
                        .padding(.horizontal)
                        .frame(height: geo.size.height / (thirdWeatherTapped ? 3 : 9))
                        .overlay {
                            ZStack(alignment: .bottom) {
                                Button {
                                    withAnimation {
                                        firstWeatherTapped = false
                                        secondWeatherTapped = false
                                        thirdWeatherTapped.toggle()
                                    }
                                } label: { RoundedRectangle(cornerRadius: 10).opacity(0) }
                                
                                VStack {
                                    Spacer()
                                    
                                    ResidueView(type: .rain, strenght: 700)
                                        .offset(y: thirdWeatherTapped ? geo.size.height / 6.3 : geo.size.height / 21)
                                }
                            }
                        }
                        .overlay(
                            Text("")
                        )
                    
                    MainWeatherView(time: 1, currentViewState: .eventPreview)
                        .clipShape(RoundedRectangle(cornerRadius: 10))
                        .padding(.horizontal)
                        .frame(height: geo.size.height / (firstWeatherTapped ? 3 : 9))
                        .onTapGesture {
                            withAnimation {
                                firstWeatherTapped.toggle()
                                secondWeatherTapped = false
                                thirdWeatherTapped = false
                            }
                        }
                        .overlay(
                            Text("")
                        )
                    
                    Group {
                        Rectangle()
                    }
                    .padding(.vertical, 40)
                }
                .offset(y: -(geo.size.height / 5 ))
                
                Spacer()
            }
            .padding(.bottom, 30)
        }
    }
    .animation(.easeInOut(duration: 0.4), value: allPlansPressed)
}

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