CODEWITHSUNDEEP
animationswiftui
Dan Schümacher
Dan Schümacher

Reputation: 265

How to STOP Animation().repeatForever in SwiftUI

In SwiftUI I am trying to start and STOP an animation with a button. I can't find a method within SwiftUI that lets me stop an automation. In Swift 4 I used to say "startButton.layer.removeAllAnimations()". Is there an equivalent in SwiftUI?

For the code below, how would I used the value of start to enable/disable the animation. I tried .animation(start ? Animation(...) : .none) without any luck [creates some odd animation within the button].

import SwiftUI

struct Repeating_WithDelay: View {
    @State private var start = false

    var body: some View {
        VStack(spacing: 20) {
            TitleText("Repeating")
            SubtitleText("Repeat With Delay")
            BannerText("You can add a delay between each repeat of the animation. You want to add the delay modifier BEFORE the repeat modifier.", backColor: .green)

            Spacer()

            Button("Start", action: { self.start.toggle() })
                .font(.largeTitle)
                .padding()
                .foregroundColor(.white)
                .background(RoundedRectangle(cornerRadius: 10).fill(Color.green))
                .overlay(
                    RoundedRectangle(cornerRadius: 10)
                        .stroke(Color.green, lineWidth: 4)
                        .scaleEffect(start ? 2 : 0.9)
                        .opacity(start ? 0 : 1))
                .animation(Animation.easeOut(duration: 0.6)
                    .delay(1) // Add 1 second between animations
                    .repeatForever(autoreverses: false))

            Spacer()

        }
        .font(.title)
    }
}

struct Repeating_WithDelay_Previews: PreviewProvider {
    static var previews: some View {
        Repeating_WithDelay()
    }
}

Upvotes: 9

Views: 5662

Answers (1)

Asperi
Asperi

Reputation: 258491

Update - retested with Xcode 13.4 / iOS 15.5

enter image description here

The following should work, moved animation into overlay-only and added conditional to .default (tested with Xcode 11.2 / iOS 13.2)

Button("Start", action: { self.start.toggle() })
    .font(.largeTitle)
    .padding()
    .foregroundColor(.white)
    .background(RoundedRectangle(cornerRadius: 10).fill(Color.green))
    .overlay(
        RoundedRectangle(cornerRadius: 10)
            .stroke(Color.green, lineWidth: 4)
            .scaleEffect(start ? 2 : 0.9)
            .opacity(start ? 0 : 1)
            .animation(start ? Animation.easeOut(duration: 0.6)
                .delay(1) // Add 1 second between animations
                .repeatForever(autoreverses: false) : .default, value: start)
    )

On GitHub

Upvotes: 23

Related Questions