withAnimation 버그 해결

https://stackoverflow.com/questions/77022165/why-occur-animation-effect-in-swiftui

stackoverflow에 질문을 올렸었는데, 분명히 아래의 Rectangle은 색이 변하는 애니메이션이 작동할 이유가 없다.

하지만 지속적으로 색이 변하는 애니메이션이 생기길래 관찰해보니,

앱을 실행할때마다 멈춰있기도 하고 가끔은 위쪽의 Rectangle이 멈추기도하길래 단순 버그인걸 알게되었다.

문제는 이 버그가 너무나 많이 생긴다는것.

struct ContentView: View {
    
    var randColor: Color {
        Color(red: randomNumber/255, green: randomNumber/255, blue: randomNumber/255)
    }
    @State var isAnimation = false
    
    var randomNumber: Double {
        return Double.random(in: 0...255)
    }
    
    var body: some View {
        
        VStack {
            Rectangle()
                .fill(isAnimation ? randColor : .red)
                .frame(width: 200, height: 200)
                .onAppear {
                    withAnimation(.easeIn(duration: 1).repeatForever(autoreverses: true)) {
                        isAnimation = true
                    }
                }
            
            BottomRectangle()
            
        }
    }
}

이를 어떻게 해결해야 할까 했는데 animation modifire을 통해 해결할 수 있었다.

animation modifire에 withAnimation에 넣던 Animation() 객체를 그대로 넣어주고

onAppear(perform:) 에서 변화가 생기도록, 즉 isAnimation = true를 해주면 거의 모든 경우에 우리가 의도한대로 작동함을 확인했다.

struct ContentView: View {
    
    var randColor: Color {
        Color(red: randomNumber/255, green: randomNumber/255, blue: randomNumber/255)
    }
    @State var isAnimation = false
    
    var randomNumber: Double {
        return Double.random(in: 0...255)
    }
    
    var body: some View {
        VStack {
            Rectangle()
                .fill(isAnimation ? randColor : .red)
                .frame(width: 200, height: 200)
                .animation(.easeIn(duration: 1).repeatForever(autoreverses: true), value: isAnimation)
                .onAppear {
                    isAnimation = true
                } // Change!!
            
            BottomRectangle()
        }
    }
}

댓글