GO FURTHER, FASTER: Try the Swift Career Accelerator today! >>

SOLVED: Project 17: can't wrap my head around the order of .rotationEffect and .offset().

Forums > 100 Days of SwiftUI

Hello everyone!

In the Moving views with DragGesture and offset() section there’s a part on the importance of modifier order, esspesially when dealling with offsets and rotations:

If we rotate then offset, then the offset is applied based on the rotated axis of our view. For example, if we move something 100 pixels to its left then rotate 90 degrees, we’d end up with it being 100 pixels to the left and rotated 90 degrees. But if we rotated 90 degrees then moved it 100 pixels to its left, we’d end up with something rotated 90 degrees and moved 100 pixels directly down, because its concept of “left” got rotated.

Where things get doubly tricky is when you factor in how SwiftUI creates new views by wrapping modifiers. When it comes to moving and rotating, this means if we want a view to slide directly to true west (regardless of its rotation) while also rotating it, we need to put the rotation first then the offset.

Initially, I assumed the way to move the card view directly to the west (or east) would be by applying offset first and then rotationEffect, and the first paragraph above seemed to reinforce that idea. However, it turns out the correct order is to apply rotationEffect first, then offset, which i find a bit puzzling. Even more baffling, applying offset first and then rotationEffect makes the card view move in an arc directi.

No mater how many times i reread the second paragraph, i still can't understand why the correct order is rotation first, and offset second.

Could anyone help clarify why the rotation needs to come first here?

   

Hello,

Modifiers such as offset and rotationEffect in SwiftUI only affect the visual presentation of a view without changing its original layout frame. When you apply additional modifiers like border after these transformations, they will use the original frame instead of the transformed position or orientation.

You can try adding .border(Color.green) to your code to see how it works. Attached a small example to illustrate how it might look. "How to adjust the position of a view using its offset" can also clarify more what is happening.

struct ContentView: View {
    var body: some View {
        RoundedRectangle(cornerRadius: 50)
            .fill(.gray).opacity(0.1).frame(width: 450, height: 250)

            .border(Color.green)
            .offset(x: 300)
            .border(Color.gray)
            .rotationEffect(.degrees(45))
            .border(Color.red)
    }
}

1      

@MartinAtElitappar Thank you very much for the example! Got it right away

1      

Hacking with Swift is sponsored by Essential Developer.

SPONSORED Transform your career with the iOS Lead Essentials. This Black Friday, unlock over 40 hours of expert training, mentorship, and community support to secure your place among the best devs. Click for early access to this limited offer and a free crash course.

Save your spot

Sponsor Hacking with Swift and reach the world's largest Swift community!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.