SwiftUI perform action after Spring() animation has completed

Question

I'm trying to figure out how to detect that an animation has completed in SwiftUI, to be specific: a Spring() animation. My first thought was to use a GeometryReader to detect when the Circle in the example below reaches the point of origin (offset = .zero), however there is one caveat to this approach: the Spring() animation goes a little bit beyond the point where it should end and then bounces back. So the "end of the animation" would be triggered before the animation has finished.

I did some research and found another approach : SwiftUI withAnimation completion callback. However, in this solution the offset of the animated object is compared to the point of origin so it's the same problem as described above.

I could use a timer but that wouldn't be an elegant solution since the duration of the Spring() animation dynamically changes depending from where it started, so that's not the way.

In the example below, I would like that the circle gets green after the animation has finished.

Is there a way to solve this issue? Thanks for helping!

struct ContentView: View {
    
    @State var offset: CGSize = .zero
    @State var animationRunning = false
    
    var body: some View {
        
        VStack {
            Circle()
                .foregroundColor(self.animationRunning ? .red : .green)
                .frame(width: 200, height: 200)
                .offset(self.offset)
                .gesture(
                    DragGesture()
                        .onChanged{ gesture in
                            self.offset = gesture.translation
                    }
                    .onEnded{_ in
                        self.animationRunning = true
                        
                        withAnimation(.spring()){
                            self.offset = .zero
                        }
                })
            Spacer()
        }
    }
}

score 13 · Accepted Answer · edited Aug 23 '22 at 08:45

13

Default animation duration (for those animations which do not have explicit duration parameter) is usually 0.25-0.35 (independently of where it is started & platform), so in your case it is completely safe (tested with Xcode 11.4 / iOS 13.4) to use the following approach:

withAnimation(.spring()){
    self.offset = .zero
    DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
        self.animationRunning = false
    }
}

Note: you can tune that 0.5 delay, but the difference is not remarkable for human eye.

edited Aug 23 '22 at 08:45

Martijn Pieters

1,048,767
296
4,058
3,343

answered Aug 13 '20 at 07:26

Asperi

228,894
20
464
690

Thanks! So there is no way to do this precise? For ex. if I wanted to run a lot of animations successively a few ms can make a big difference... – leonboe1 Aug 13 '20 at 07:38
Apple does not give us explicit API for that, so any approach is more or less precise but workaround. With successive animations will be the same. – Asperi Aug 13 '20 at 07:44
3

Okay, that’s very unfortunate. Hope that functionality will be added soon – leonboe1 Aug 13 '20 at 07:50

SwiftUI perform action after Spring() animation has completed

1 Answers1