SwiftUI: Stop an Animation that Repeats Forever

Question

I would like to have a 'badge' of sorts on the screen and when conditions are met, it will bounce from normal size to bigger and back to normal repeatedly until the conditions are no longer met. I cannot seem to get the badge to stop 'bouncing', though. Once it starts, it's unstoppable.

What I've tried: I have tried using a few animations, but they can be classified as animations that use 'repeatForever' to achieve the desired effect and those that do not. For example:

Animation.default.repeatForever(autoreverses: true)

and

Animation.spring(response: 1, dampingFraction: 0, blendDuration: 1)(Setting damping to 0 makes it go forever)

followed by swapping it out with .animation(nil). Doesn't seem to work. Does anyone have any ideas? Thank you so very much ahead of time! Here is the code to reproduce it:

struct theProblem: View {
    @State var active: Bool = false

    var body: some View {
        Circle()
            .scaleEffect( active ? 1.08: 1)
            .animation( active ? Animation.default.repeatForever(autoreverses: true): nil )
            .frame(width: 100, height: 100)
            .onTapGesture {
                self.active = !self.active

        }
    }
}

Answer 1

After going through many things, I found out something that works for me. At the least for the time being and till I have time to figure out a better way.

struct WiggleAnimation<Content: View>: View {
    var content: Content
    @Binding var animate: Bool
    @State private var wave = true

    var body: some View {
        ZStack {
            content
            if animate {
                Image(systemName: "minus.circle.fill")
                    .foregroundColor(Color(.systemGray))
                    .offset(x: -25, y: -25)
            }
        }
        .id(animate) //THIS IS THE MAGIC
        .onChange(of: animate) { newValue in
            if newValue {
                let baseAnimation = Animation.linear(duration: 0.15)
                withAnimation(baseAnimation.repeatForever(autoreverses: true)) {
                    wave.toggle()
                }
            }
        }
        .rotationEffect(.degrees(animate ? (wave ? 2.5 : -2.5) : 0.0),
                        anchor: .center)
    }

    init(animate: Binding<Bool>,
         @ViewBuilder content: @escaping () -> Content) {
        self.content = content()
        self._animate = animate
    }
}

Use

@State private var editMode = false

WiggleAnimation(animate: $editMode) {
    VStack {
        Image(systemName: image)
            .resizable()
            .frame(width: UIScreen.screenWidth * 0.1,
                   height: UIScreen.screenWidth * 0.1)
            .padding()
            .foregroundColor(.white)
            .background(.gray)
        
        Text(text)
            .multilineTextAlignment(.center)
            .font(KMFont.tiny)
            .foregroundColor(.black)
    }
}

How does it work? .id(animate) modifier here does not refresh the view but just replaces it with a new one, so it is back to its original state.

Again this might not be the best solution but it works for my case.

Answer 2

Aspid comments on the accepted solution that an Xcode update broke it. I was struggling with a similar problem while playing around with an example from Hacking with Swift, and

.animation(active ? Animation.default.repeatForever() : Animation.default)

was not working for me either on Xcode 13.2.1. The solution I found was to encapsulate the animation in a custom ViewModifier. The code below illustrates this; the big button toggles between active and inactive animations.

`

struct ContentView: View {
    @State private var animationAmount = 1.0
    @State private var animationEnabled = false
    
    var body: some View {
        VStack {
            
            Button("Tap Me") {
                // We would like to stop the animation
                animationEnabled.toggle()
                animationAmount = animationEnabled ? 2 : 1
            }
            .onAppear {
                animationAmount = 2
                animationEnabled = true
            }
            .padding(50)
            .background(.red)
            .foregroundColor(.white)
            .clipShape(Circle())
            .overlay(
                Circle()
                    .stroke(.red)
                    .scaleEffect(animationAmount)
                    .opacity(2 - animationAmount)
            )
            .modifier(AnimatedCircle(animationAmount: $animationAmount, animationEnabled: $animationEnabled))
        }
    }
}

struct AnimatedCircle: ViewModifier {
    @Binding var animationAmount: Double
    @Binding var animationEnabled: Bool
    func body(content: Content) -> some View {
        if animationEnabled {
            return content.animation(.easeInOut(duration: 2).repeatForever(autoreverses: false),value: animationAmount)
        }
        else {
            return content.animation(.easeInOut(duration: 0),value: animationAmount)
        }
    }
}

`

It may not be the best conceivable solution, but it works. I hope it helps somebody.

Answer 3

How about using a Transaction

In the code below, I turn off or turn on the animation depending on the state of the active

Warning: Be sure to use withAnimation otherwise nothing will work

@State var active: Bool = false

var body: some View {
    Circle()
        .scaleEffect(active ? 1.08: 1)
        .animation(Animation.default.repeatForever(autoreverses: true), value: active)
        .frame(width: 100, height: 100)
        .onTapGesture {
            useTransaction()
        }
}

func useTransaction() {
    var transaction = Transaction()
    transaction.disablesAnimations = active ? true : false
    
    withTransaction(transaction) {
        withAnimation {
            active.toggle()
        }
    }
}

Answer 4

I figured it out!

An animation using .repeatForever() will not stop if you replace the animation with nil. It WILL stop if you replace it with the same animation but without .repeatForever(). ( Or alternatively with any other animation that comes to a stop, so you could use a linear animation with a duration of 0 to get a IMMEDIATE stop)

In other words, this will NOT work: .animation(active ? Animation.default.repeatForever() : nil)

But this DOES work: .animation(active ? Animation.default.repeatForever() : Animation.default)

In order to make this more readable and easy to use, I put it into an extension that you can use like this: .animation(Animation.default.repeat(while: active))

Here is an interactive example using my extension you can use with live previews to test it out:

import SwiftUI

extension Animation {
    func `repeat`(while expression: Bool, autoreverses: Bool = true) -> Animation {
        if expression {
            return self.repeatForever(autoreverses: autoreverses)
        } else {
            return self
        }
    }
}

struct TheSolution: View {
    @State var active: Bool = false
    var body: some View {
        Circle()
            .scaleEffect( active ? 1.08: 1)
            .animation(Animation.default.repeat(while: active))
            .frame(width: 100, height: 100)
            .onTapGesture {
                self.active.toggle()
            }
    }
}

struct TheSolution_Previews: PreviewProvider {
    static var previews: some View {
        TheSolution()
    }
}

As far as I have been able to tell, once you assign the animation, it will not ever go away until your View comes to a complete stop. So if you have a .default animation that is set to repeat forever and auto reverse and then you assign a linear animation with a duration of 4, you will notice that the default repeating animation is still going, but it's movements are getting slower until it stops completely at the end of our 4 seconds. So we are animating our default animation to a stop through a linear animation.

Answer 5

There is nothing wrong in your code, so I assume it is Apple's defect. It seems there are many with implicit animations (at least with Xcode 11.2). Anyway...

I recommend to consider alternate approach provided below that gives expected behaviour.

struct TestAnimationDeactivate: View {
    @State var active: Bool = false

    var body: some View {
        VStack {
            if active {
                BlinkBadge()
            } else {
                Badge()
            }
        }
        .frame(width: 100, height: 100)
        .onTapGesture {
            self.active.toggle()
        }
    }
}

struct Badge: View {
    var body: some View {
        Circle()
    }
}

struct BlinkBadge: View {
    @State private var animating = false
    var body: some View {
        Circle()
            .scaleEffect(animating ? 1.08: 1)
            .animation(Animation.default.repeatForever(autoreverses: true))
            .onAppear {
                self.animating = true
            }
    }
}

struct TestAnimationDeactivate_Previews: PreviewProvider {
    static var previews: some View {
        TestAnimationDeactivate()
    }
}