SwiftUI - how to override nested offset/position animations?

Question

Consider this simple example:

struct TestView: View {
    @State private var enabled = false
    
    var body: some View {
        Circle()
            .foregroundColor(.red)
            .overlay(
                Circle()
                    .foregroundColor(.blue)
                    .frame(width: 50, height: 50)
                    .animation(.spring())
                
            )
            .frame(width: 100, height: 100)
            .offset(x: 0, y: enabled ? -50 : 50)
            .animation(.easeIn(duration: 1.0))
            .onTapGesture{
                enabled.toggle()
            }
            
    }
}

This yields the following animation when tapping on the resulting circle:

The nested circle animates to its new global position with its own timing function (spring), while the outer circle / parent view animates to the new global position with its easeInOut timing function. Ideally, all children would animate with the parents timing function if a modifier works at the parent views level of abstraction (in this case, offset, but also things like position).

Presumably this happens because the SwiftUI rendering engine computes new global properties for all affected children in the view hierarchy in a layout pass, and animates changes to each property based on the most specific animation modifier attached (even though, in this case, the relative position of the child within the parent does not change). And this makes it incredibly hard to do something as simple as translate a view properly when subviews of that view might have their own complex animations running (which the parent view doesn't and really shouldn't know of).

One other quirk I noticed is that, in this particular example, adding an animation(nil) modifier immediately before the offset modifier breaks the animations on the outer circle, despite the .easeInOut remaining attached directly to the offset modifier. This violates my understanding of how these modifiers are chained, where (according to this source) an animation modifier applies to all views it entails until the next nested animation modifier.

Answer 1

This seems like a bug to me, might be worth reporting to Apple. I did find a weird workaround, by adding another modifier before the .offset modifier:

struct TestView: View {
    @State private var enabled = false
    
    var body: some View {
        Circle()
            .foregroundColor(.red)
            .overlay(
                Circle()
                    .foregroundColor(.blue)
                    .frame(width: 50, height: 50)
                    .animation(.spring())
                
            )
            .frame(width: 100, height: 100)
            .scaleEffect(1) // <------- this doesn't do anything but somehow overrides the animation
            .offset(x: 0, y: enabled ? -50 : 50)
            .animation(.easeIn(duration: 1.0))
            .onTapGesture{
                enabled.toggle()
            }
            
    }
}

I've tried it with scaleEffect, rotationEffect, and rotation3DEffect, and they all work. Not all modifiers work. I'm really curious why these specific ones do.

The .animation(nil) thing also seems like a bug to me.