1
import SwiftUI

struct ContentView: View {

    let letters = Array("Testing stuff")
    @State private var enabled = false
    @State private var dragAmount = CGSize.zero


    var body: some View {
        HStack(spacing: 0)
        {
            ForEach(0..<letters.count) { num in
                Text(String(letters[num]))
                    .padding(5)
                    .font(.title)
                    .background(enabled ? .blue : .red)
                    .offset(dragAmount)
                    .clipShape(Circle())
                    .animation(.default.delay(Double(num) / 20), value: dragAmount)
            }

        }
        .gesture(
            DragGesture()
                .onChanged { dragAmount = $0.translation}
                .onEnded { _ in
                    dragAmount = .zero
                    enabled.toggle()
                }
        )




    }
}

So I have this piece of code, I'm mostly just testing out animation stuff, originally the clipShape modifier was before the offset modifier and everything worked and went as expected, but when I move the clipShape modifier to be after the offset everything still animates but it seems like it's stuck in the Shape and I can't see anything outside the Circle. Could someone maybe explain exactly why this is?

I understand the order of the modifiers is obviously very important in SwiftUI but to me it seems like whenever dragAmount changes then each view gets redrawn and offset and that offset modifier just notices changes in dragAmount and when it notices one it just offsets but why is it a problem if I put clipShape after that? Shouldn't it still totally be fine? I obviously don't understand why the order of the modifiers is important in this case so it would be nice if someone could clarify.

1 Answer 1

2

It doesn't work because the text is offsetted, and then clipShape clips the original location for the text.

Paul Hudson sums it up well:

Using offset() will cause a view to be moved relative to its natural position, but won’t affect the position of other views or any other modifiers placed after the offset.

- https://www.hackingwithswift.com/quick-start/swiftui/how-to-adjust-the-position-of-a-view-using-its-offset

Here, the only part you can see if the part of the yellow rectangle that is inside of the circle (outlined in red).

Diagram

If you want the content to be clipped, then offsetted, use the clipShape modifier before the offset modifier.

Then it should look something like this (the part you can see is outlined in red):

Diagram 2

2
  • Thanks that actually makes sense so just to clarify when I use the offset modifier it moves the view somewhere(offsets it by dragAmount in this case) but then that clipShape modifier clips where the text ORIGINALLY was before the offset correct? I know I'm basically just repeating what you said but is this correct?
    – tommyk
    Commented Jul 19, 2022 at 21:59
  • Yes. You should look at this article for more info. Commented Jul 19, 2022 at 22:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.