스크롤 애니메이션 렉

[QuaRang1225]

6 - 해당잇슈를 구현하다 생긴 문제

• 현재 스크롤을 업/다운 minY값에 따라 항목 카테고리를 보여주고 있는데 스크롤로 매끄럽지 못함
• minY값은 사소한 변경에도 .onChange가 실행 되기 떄문에 CPU의 연산처리량이 많아서 그럴 것으로 예상됨

[QuaRang1225]

현재 사용 중인 코드

GeometryReader{ proxy in
                    let minY = proxy.frame(in: .global).minY
                    Color.clear
                        .onChange(of: minY) { value in
                                if value < mainOffsetY{
                                    DispatchQueue.main.async{
                                        withAnimation {
                                            show = false
                                        }
                                    }

                                }
                                if value > mainOffsetY{
                                    DispatchQueue.main.async{
                                        withAnimation {
                                            show = true
                                        }
                                    }
                                }
                        }
                }.frame(height: 1)

• 메인큐에서 업데이트가 되고 있기 떄문에 트래픽이 상당할 것임

[QuaRang1225]

해결

• 임계값을 설정하고 변화량과 감지량의 차이를 구해 임계값 이상이 되었을때만 값을 업데이트 시키도록 구현

GeometryReader{ proxy in
                    let minY = proxy.frame(in: .global).minY
                    Color.clear
                        .onChange(of: minY) { value in
                                if abs(value - lastminY) > 10 {    //임계값 10으로 설정
                                    lastminY = value
                                    withAnimation {
                                        if lastminY < mainOffsetY {
                                            show = false
                                        } else if lastminY > mainOffsetY {
                                            show = true
                                        }
                                    }
                                }
                        }
                }.frame(height: 1)