Hi,

I was following Customizing Animation tutorial. The code ran perfectly, but there is one thing I can not understand well. As animationAmount was changed to 2 inside onAppear() and I believed it was 2 forever. How could the transparency of stroken red circle be changing?

I have thinked about it for more than an hour and could not figure it out. Hope someone could help me. Really appreciate it!

struct ContentView: View {
    @State private var animationAmount: CGFloat = 1

    var body: some View {
        Button("Tap Me") {
            // self.animationAmount += 1
        }
        .padding(40)
        .background(Color.red)
        .foregroundColor(.white)
        .clipShape(Circle())
        .overlay(
            Circle()
                .stroke(Color.red)
                .scaleEffect(animationAmount)
                .opacity(Double(2 - animationAmount))
                .animation(
                    Animation.easeOut(duration: 1)
                        .repeatForever(autoreverses: false)
                )
        )
        .onAppear {
            self.animationAmount = 2
        }
    }
}

Edited: added State variable to make the code complete

Hey, just learning the SwiftUI myself.. but the first thing I noticed is that you have no state set up to see a change. Also, the .OnAppear really won't have any effect here except at setup. I was playing with the code.. this is what I tried, and it gives me something that works... Try this, see if it helps

struct ContentView: View { @State var animationAmount = 0.0 var body: some View { Button("Tap Me") { self.animationAmount += 0.25 if (self.animationAmount > 2.0 ) { self.animationAmount = 0.0 } } .padding(40) .background(Color.red) .foregroundColor(.white) .clipShape(Circle()) .overlay( Circle() .stroke(Color.blue) .scaleEffect(CGSize(width: Double(animationAmount), height: Double(animationAmount)), anchor:.center) .opacity(Double(2 - animationAmount)) .animation( Animation.easeOut(duration: 1) .repeatForever(autoreverses: false) ) ) // .onAppear { // if (self.animationAmount > 2.0 ) { // self.animationAmount = 0.0 // } // } } }

Not sure about this mark down.. maybe this will be better.

struct ContentView: View {
    @State var animationAmount = 0.0
    var body: some View {
        Button("Tap Me") {
            self.animationAmount += 0.25
            if (self.animationAmount > 2.0 ) {
                self.animationAmount = 0.0
            }
        }
        .padding(40)
        .background(Color.red)
        .foregroundColor(.white)
        .clipShape(Circle())
        .overlay(
            Circle()
                .stroke(Color.blue)
                .scaleEffect(CGSize(width: Double(animationAmount), height: Double(animationAmount)), anchor:.center)
                .opacity(Double(2 - animationAmount))
                .animation(
                    Animation.easeOut(duration: 1)
                        .repeatForever(autoreverses: false)
                )
        )
//        .onAppear {
//            if (self.animationAmount > 2.0 ) {
//                self.animationAmount = 0.0
//            }
//        }
    }
}

Hi @numerics,

Extreamly appreciate your reply!

Your solution is kind of different from what is expected in the tutorial. I don't know how to upload a screen record, but you could copy my code into Xcode and run to take a look. (I have edited my post so State variable is included now.)

Look carefully at the circle around the button. You do not need to click, but the transparency is changing.