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.
If we use .repeatCount(4) (with value 4), we get a completely wrong, twitching, ragged effect.
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