SwiftUI, how to make the background color animate multiple times

user_10648846 0
Viewed 3814

I have a SwiftUI project that includes a Text object with a .onTapGesture working that, when triggered, should cause the button's background color to pop to another color then quickly fade back to the original color. In my code, I'm able to trigger the color pop, but it stays that way and won't fade back. I'm kind of at a loss on what to do, any help is appreciated...here is the code I'm using:

@State var buttonFlash = false


var body: some View {
    Text("Hello")
        .font(.system(size: 20))
        .frame(width: 30, height: 30)
        .foregroundColor(Color.blue)
        .background(buttonFlash ? Color.white : Color.red)
        .animation(nil)
        .background(Color.red)
        .animation((Animation.linear).delay(0.1))
        .cornerRadius(30)
        .onTapGesture {
            print("Tapped!")
            self.buttonFlash.toggle()

        }
swiftui swift ios
2 Answers

should cause the button's background color to pop to another color then quickly fade back to the original color.

You need to declare a function for that. Here is a possible approach for it:

struct ContentView: View {
    
    @State var buttonFlash: Bool = false
    
    var body: some View {
        Text("Hello")
            .font(.system(size: 20))
            .frame(width: 100, height: 50)
            .foregroundColor(Color.blue)
            .background(buttonFlash ? Color.white : Color.red)
            .cornerRadius(30)
            .onTapGesture {
                print("Tapped!")
                self.colorChange()
            }
    }
    
    private func colorChange() {
        // first toggle makes it red
        self.buttonFlash.toggle()
        
        // wait for 1 second
        DispatchQueue.main.asyncAfter(deadline: .now() + .seconds(1), execute: {
            // Back to normal with ease animation
            withAnimation(.easeIn){
                self.buttonFlash.toggle()
            }
        })
    }
}

It calls the method once tapped. This then triggers the color change and reverses it after 1 second.

Produces this outcome:

enter image description here

user_96827600

If you're trying to flash the backgroundColor multiple number of times. Use a method and loop over until a condition is met. Here's an example:

struct ContentView: View {

    @State private var buttonFlash: Bool = false
    @State private var numberOfTimes = 6

    var body: some View {
        Text("Hello")
            .font(.system(size: 20))
            .frame(width: 300, height: 50)
            .foregroundColor(Color.blue)
            .background(buttonFlash ? Color.white : Color.red)
            .animation(nil)
            .background(Color.red)
            .animation((Animation.linear).delay(0.1))
            .cornerRadius(30)
            .onTapGesture {
                print("Tapped!")
                self.animate()
            }
    }

    private func animate() {
        self.buttonFlash.toggle()
        if numberOfTimes > 0 {
            numberOfTimes -= 1
        } else {
            numberOfTimes = 6
            return
        }
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.5, execute: {
            self.animate()
        })
    }
}
user_70986500
Related