UIKit animate bounds x/y

Question

Since bounds is an animatable property of UIView, I wanted to see what happened if I animated the x and y values of a view's bound's origin.

My view (view1) has a UILabel inside of it.

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
       
        UIView.animate(withDuration: 2, delay: 0.0, animations: {
            self.view1.bounds.origin.y = 50
        })
       
    }

Doing so makes the label animate upwards (50). Similarly, if y is negative, the label will animate downwards. Animating x causes similar behaviour...setting a positive x in the animate block makes the label animate left and negative x makes the label animate right.

The documentation and samples I've looked at don't explain enough about animating bounds x/y so I don't understand what's going on.

Can someone explain the behaviour I'm seeing?

Thanks.

UIKit

1.4k

Posted by

weslowsk

Reply

Add a Comment

Answer 1

What is not clear ? Is it the direction of animation ? What did you expect ?

You change the bounds of the view. You change the inner coordinates references of view1.

As bounds doc states:

The bounds rectangle, which describes the view’s location and size in its own coordinate system.

Changing the bounds rectangle automatically redisplays the view

So if you set y to 50 (it was 0 to start with), the reference in the view is moved 50 to the top. Hence, views inside the view now align to this new reference, hence moving 50 upward (because initial value was 0).

If you wanted to move the view, use frame, not bounds. Then the view will move to the top of screen (the move will not be 50 points, because initial frame.top is not 0)

If you need a detailed torial, watch this:

h ttps://www.slideshare.net/onoaonoa/cs193p-lecture-5-view-animation

or read this

https://stackoverflow.com/questions/1210047/cocoa-whats-the-difference-between-the-frame-and-the-bounds

Posted by

Claude31

Add a Comment

Answer 2

I didn't expect the label to animate opposite to the direction that I was moving the coordinate with animation. I didn't know what to expect. But, if I had to guess how it would react, I would have expected that the label would not move. Clearly I'm wrong...

I have read the bounds and frame documentation, as well as reading the article and slide you provided, but none of them explain what should happen when a bounds origin coordinate is animated as I have done.

I understand that if I want to move the view itself within its subview, then moving the frame is the way to go.

I'm still confused, though, about the effect when I animate the bounds origin coordinates.

If bounds origin y is 0 to start with and changes to 50, that would mean the bounds origin is moving down and the bounds rectangle moves down. Yet, the label inside of the view moves up. I'm missing something and still need a different explanation of the effect.

Posted by

weslowsk

Add a Comment

Answer 3

When you change the bounds (with or without animation), you change the coordinate system inside the view.

So, if you increase bounds.y by 50, the origin of coordinate system is now 50 below (y coordinates go down). Just as if you move a window inside the view by 50 down.

But the frame does not move.

Hence, a text in the view, that was at pos 20,20 is now at pos 20, -30 respective to the new bounds.

Hence, it moves up by 50.

With animation, this just moves animated.

I think https://stackoverflow.com/questions/1210047/cocoa-whats-the-difference-between-the-frame-and-the-bounds

gives a very clear explanation, with illustrations, which is better.

Posted by

Claude31

Add a Comment

Answer 4

I've re-read the articles several times but I can't say I have a firm grasp of the "why". It's probably something that I will just have to accept and over time it'll make more sense...but I don't think I will be fully understanding it today. Many others seem to have gotten it...eventually I will too.

Apple's archive documentation is somewhat helpful as well:

https://developer.apple.com/library/archive/documentation/WindowsViews/Conceptual/ViewPG_iPhoneOS/WindowsandViews/WindowsandViews.html#//apple_ref/doc/uid/TP40009503-CH2-SW1

"If you change the origin of the bounds rectangle, anything you draw inside the new rectangle becomes part of the view’s visible content."

I change the origin of the bounds rectangle but I'm not drawing anything. But, I'm effectively moving the bounds rectangle down below the label to an area where there is nothing to display which is why "the view's visible content" changes.

I found that "setting the superview’s

clipsToBounds

property to

YES

" made the label disappear during the animation which helps with the conceptualization of what's happening.

I appreciate the discussion and your patience.

Posted by

weslowsk

Add a Comment

Answer 5

Yes, it is a bit difficult to grasp.

Personally, I need to imagine bounds as a window that look a part the view.

If you move that window down (+50), objects (the text) that is inside will apparently move up !, relative to the view frame.

However, when testing the case, I discovered that it could be drawn outside of the view.

That's where the clipping comes into play.

Animation does not change the final drawing of course.

Posted by

Claude31

Add a Comment

UIKit animate bounds x/y

Replies