SwiftUI view identity, ForEach, structural identity and id() - swiftui

Question

I'm trying to decipher how identity works in SwiftUI. Demystify SwiftUI helps, but essentially suggests there is explicit or structural identity, which is used to determine state and transitions.
Let's apply the concept on a simple test case, where I would like to shuffle two blocks back-and-forth by pressing a toggle button. The following example accomplishes this using 2 alternative methods, one with a ForEach and one which spells each out explicitly. Oddly enough, only the ForEach method appears to allow the blocks to maintain identity as they shuffle around in the container – spelling the views out with an explicit identity breaks the animation:
struct SimplePreview: PreviewProvider, View {
static var previews = Self()
#State
private var isRunning = false
var body: some View {
VStack {
Button("Toggle is \(self.isRunning ? "on" : "off")") {
withAnimation {
self.isRunning.toggle()
}
}
// 1
HStack {
ForEach([self.isRunning, !self.isRunning], id: \.self) {
Rectangle()
.fill($0 ? Color.accentColor : Color.gray)
}
}
// 2
HStack {
Rectangle()
.fill(self.isRunning ? Color.blue : Color.gray)
Rectangle()
.fill(!self.isRunning ? Color.blue : Color.gray)
}
// 3
HStack {
Rectangle()
.fill(self.isRunning ? Color.blue : Color.gray)
.id(self.isRunning)
Rectangle()
.fill(!self.isRunning ? Color.blue : Color.gray)
.id(!self.isRunning)
}
}
}
}
What I take from this is that in case:
ForEach allows the individual items to maintain their full identity
The individual items have a separate structural identity and as their state changes, they transition individually.
The individual items have a separate structural identity, but when their internal .id changes, they are seen as completely new views, breaking animation entirely.
The question is then obviously:
How can maintain full view identity outside of something like ForEach? We want to achieve the effect seen in [1] using an approach like [2] or [3].

Answer 1

I believe you can achieve this with matchedGeometryEffect and #Namespace, e.g.
#Namespace private var animation
// 2
HStack {
if isRunning {
Rectangle()
.fill(Color.blue)
.matchedGeometryEffect(id: 1, in: animation)
.transition((.scale(scale: 1))) // this is to override the default transition which is opacity that looks bad.
Rectangle()
.fill(Color.gray)
.matchedGeometryEffect(id: 2, in: animation)
.transition(.scale(scale: 1))
}
else {
Rectangle()
.fill(Color.gray)
.matchedGeometryEffect(id: 2, in: animation)
.transition(.scale(scale: 1))
Rectangle()
.fill(Color.blue)
.matchedGeometryEffect(id: 1, in: animation)
.transition(.scale(scale: 1))
}
Here is a tutorial covering this feature.
Here is another fun way of achieving a similar animation, the difference being the blue always slides behind the gray.
// 4
HStack {
Rectangle()
.fill(Color.blue)
Rectangle()
.fill(Color.gray)
}
.environment(\.layoutDirection, isRunning ? .leftToRight : .rightToLeft)