0

I need an animation where the image will have a double blink effect (opacity changes from 1 to 0.4 and does it 2 times in a row), then waits 3 seconds, and repeats this again an infinite number of times. I tried to solve it with .repeatCount(3), .delay(3) and .repeatForever() methods (a little code snippet with working animation below), but it gives the wrong effect (see gif).

@State private var blinking: Bool = false
var body: some View {
    VStack {
        Image(systemName: "globe")
            .renderingMode(.template)
            .foregroundColor(.red)
            .scaleEffect(4)
            .opacity(blinking ? 1 : 0.4)
            .animation(.linear(duration: 0.7)
                .repeatCount(3)
                .delay(3)
                .repeatForever(),
                       value: blinking)
            .onAppear {
                withAnimation {
                    blinking = true
                }
            }
    }
    .padding()
}

Here we use .repeatCount(3) and each iteration the object gets the opposite opacity effect, what is wrong (it should have value 1 opacity at the end of iteration every time). Moreover, the effect does not start immediately, but I need the effect to start flashing immediately when it appears on the screen. It have a delay.

enter image description here

If we use .repeatCount(4) (with value 4), we get a completely wrong, twitching, ragged effect.

enter image description here

We can get rid of delay use Timer like that:

.onAppear {
    withAnimation {
       blinking = true
       Timer.scheduledTimer(withTimeInterval: 3, repeats: true) { timer in
          blinking.toggle()
       }
    }
 }

But we got the same effect, the object has a different opacity every time.

Hope somebody can help me with that with a good advice

Dobry Siabar
  • 53
  • 1
  • 3

0 Answers0