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.

user_13281032 · Answer

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.

user_8697793 · Answer

I'll try to clarify some points you mentioned in your question:

Ideally, all children would animate with the parents timing function if a modifier works at the parent views level of abstraction

Consider the following example:

Circle()
    .overlay(
        Circle()
            .frame(width: 50, height: 50)
            .foregroundColor(.blue)
    )
    .frame(width: 100, height: 100)
    .foregroundColor(.red)

If what you said would be true, then the nested Circle should be red. In SwiftUI parent modifiers don't override child modifiers.

adding an animation(nil) modifier immediately before the offset modifier breaks the animations on the outer circle

This happens for exactly the same as in the example above.

By calling:

Circle()
    .foregroundColor(.red)
    .overlay(
        Circle()
            .foregroundColor(.blue)
            .frame(width: 50, height: 50)
            .animation(.spring())
    )
    .frame(width: 100, height: 100)
    .animation(nil) // with `nil` animation
    .offset(x: 0, y: enabled ? -50 : 50)
    .animation(.easeIn(duration: 1.0))
    .onTapGesture {
        enabled.toggle()
    }

you're setting the animation to nil to the parent only. The child view has its own animation modifier.

It would work if the inner Circle had no animation modifiers and therefore the parent modifier would apply to this particular child view as well:

Circle()
    .foregroundColor(.red)
    .overlay(
        Circle()
            .foregroundColor(.blue)
            .frame(width: 50, height: 50)
            // .animation(.spring())
    )
    .frame(width: 100, height: 100)
    .animation(nil) // now this will work for both parent and child view
    .offset(x: 0, y: enabled ? -50 : 50)
    .animation(.easeIn(duration: 1.0))
    .onTapGesture {
        enabled.toggle()
    }

This violates my understanding of how these modifiers are chained, where [...] an animation modifier applies to all views it entails until the next nested animation modifier.

until the next nested animation modifier is the key here. Setting animation(nil) works until it finds another animation modifier.

how to override nested offset/position animations?

The easiest option is simply to remove the nested .animation(.spring()) modifier.

If this is not possible you can create one view from both circles, e.g. using scaleEffect as @bze12 suggested in their answer.

From the documentation of scaleEffect:

Scales this view's rendered output by the given vertical and horizontal size amounts, relative to an anchor point.

This means that the below code:

Circle()
    .foregroundColor(.red)
    .overlay(
        Circle()
            .foregroundColor(.blue)
            .frame(width: 50, height: 50)
            .animation(.spring())
    )
    .frame(width: 100, height: 100)
    .scaleEffect()
    .offset(x: 0, y: enabled ? -50 : 50)
    .animation(.easeIn(duration: 1.0))
    .onTapGesture {
        enabled.toggle()
    }

can be also read as:

scaledView
    .offset(x: 0, y: enabled ? -50 : 50)
    .animation(.easeIn(duration: 1.0))
    .onTapGesture {
        enabled.toggle()
    }

As you can see there is only one animation modifier now and it applies to the resulting scaled view.

SwiftUI - how to override nested offset/position animations?

2 Answers