Sasha found a solution in another web site, but stopped short of understanding it.
Unfortunately, I don't have a clear idea of the details of how this code works
Don't give up! This is a learning forum. Try the Rubber Duck 🐤 technique.
I've pasted the magic part of the code below.
index holds the current moon phase (0, 1, 2, 3, or 4)
index is in both the
Image and the
Text views? This is important.
index changes, the
HStack must redraw itself based on the new value of
So, grab a piece of paper and draw for yourself.
What does the HStack look like when the value is 3? Draw it!
What does the HStack look like when the value is 4? Draw this also!
Put your two drawings side-by-side.
The magic occurs with the
As the old
HStack is removed, it is moved towards the
.leading edge and fades out.
At the same time, the new
HStack is inserted into the view. It moves in from the
.trailing edge, and fades in.
These two transitions work together making a smooth motion animation.
// ---- @ChrisR provides the solution
// ---- snip ---------
Image(systemName: phases[index].image) // This draws the moon graphic
Text(phases[index].name) // next to the moon phase text.
.transition(.asymmetric(insertion: .move(edge: .trailing ).combined(with: .opacity), // new view is inserted
removal: .move(edge: .leading ).combined(with: .opacity))) // old view is removed