Animation is lost when view is not displayed (yet) in SwiftUI - animation

Question

I have a button implemented like so:
struct CircleButtonView: View {
init(_ content: Image, tutorial: Bool = false, _ action: (() -> ())? = nil) {
self.content = content
self.repetitions = tutorial ? 6.0 : 0.0
self.action = action
}
let content: Image
var repetitions: CGFloat
let action: (() -> ())?
var body: some View {
Button(action: {
action?()
}) {
Circle()
.fill(.white)
.shadow(color: Color(hex: 0x000000, alpha: 0.1), radius: 10, x: 0, y: 10)
.overlay(
GeometryReader { proxy in
content
.resizable()
.aspectRatio(contentMode: .fit) // 1:1
.frame(width: proxy.size.width * 0.4)
.position(x: proxy.size.width / 2, y: proxy.size.height / 2)
}
)
.aspectRatio(1 / 1, contentMode: .fit)
}
.shake(repetitions: repetitions)
.animation(repetitions != 0 ? .linear(duration: 1).delay(2).repeatForever(autoreverses: false) : .default, value: repetitions)
}
}
Via the tutorial bool i want to manipulate whether the button animates (an initial shake animation used to explain the button, if the user clicked it once i remove the animation).
This works nicely. However i have to use a "hack", which i dont like and will describe now.
I call the button in some parent view like so:
CircleButtonView(Image("flash.selected"), tutorial: <condition for tutorial> && appeared) {
// vm.boost()
}
.onAppear {
appeared = true
}
As you can see, despite my condition i also have to check wheter the button has appeared. If i would not do that, the animation would be lost ... (this is, as the init block runs and the view did not appear yet, any future calls, where the view appeared, do work perfectly)
As this does not feel right, is this the correct way ?

Answer 1

In order to animate, SwiftUI needs to observe a before state of the view and an after state. As you've seen, SwiftUI needs to see the repetitions value change from 0 to 6 in order to perform the animation. Processing the .onAppear { } from the user of CircleButtonView is the wrong place. Put that code inside of CircleButtonView.
Make repetitions into an #State private var. Don't set it in init().
#State private var repetitions = 0
In init(), store tutorial in a local let:
self.tutorial = tutorial
Then add this .onAppear to your Button:
}
.shake(repetitions: repetitions)
.animation(repetitions != 0 ? .linear(duration: 1).delay(2).repeatForever(autoreverses: false) : .default, value: repetitions)
.onAppear {
repetitions = tutorial ? 6.0 : 0.0
}