It seems like the .onAppear modifier is being invoked multiple times. Is that correct?
Yep. The sheet
isn't the problem, the List
is. As you scroll your List
and rows go offscreen and onscreen, the onAppear
fires. (Note that your ContentView
, which has no scrolling list, does not exhibit the same issue.) You could attach onAppear
to the List
itself, not to any item inside the List
.
So:
List {
//blah blah blah
}
.onAppear {
newAnimationAmount += 0.1
}
That will prevent the text from continuing to enlarge every time you scroll it offscreen and then back onscreen. But it kills the animation.
You can solve both issues this way:
List {
Text("Don't Tap Me")
.scaleEffect(newAnimationAmount)
.animation(
.easeInOut(duration: 1)
.repeatForever(autoreverses: true),
value: newAnimationAmount
)
.onAppear {
newAnimationAmount = 1.1 //set the value explicitly
}
ForEach(1..<100) {
Text(String($0))
}
}
By setting the max value of newAnimationAmount
explicitly, you prevent it from continually increasing as you scroll and the animation works as desired.