Change width UIView by animation and center

Question

I have a view and need change width from 100 to 200 by animation.

UIView.animate(withDuration: 5
            ,animations: {
                    self.backgroundPlaceHolderView.frame.size.width += 200
})

when running this code, my view change width, but I need a change in width from the center, but this code increase view to the right

Can you show us how the animation looks right now? You should center align the view for it to animate from the center. — Rakesha Shastri, Dec 14 '18 at 13:48
@RasoulMiri since you are working with frames, try what sagar suggested. — Rakesha Shastri, Dec 14 '18 at 14:17

gulyashki · Accepted Answer · 2018-12-14T14:28:14.947

7

If you really need to do it with frames, here's a code snippet:

UIView.animate(withDuration: 1, animations: {
        self.backgroudPlaceHolderView.frame.origin.x -= 100
        self.backgroudPlaceHolderView.frame.size.width += 200
    })

edited Dec 14 '18 at 14:28

answered Dec 14 '18 at 14:17

gulyashki

449
3
5

score 6 · Answer 2 · answered Dec 14 '18 at 14:10

If you moved from manipulating the frame to manipulating constraints this would be easier and cleaner in my opinion.

In the InterfaceBuilder (or programmatically) center your UIView horizontally.
Outlet your width constraint (which would begin at 100).

When you want to increase the width of your UIView you can do the following;

view.layoutIfNeeded() // always make sure any pending layout changes have happened

widthConstraint.constant = 200

UIView.animate(withDuration: 0.3, animations: {
    self.view.layoutIfNeeded()
})

Autolayout will take care of the rest for you. Your view is centered horizontally so it should expand from the center.

score 2 · Answer 3 · answered Dec 14 '18 at 13:58

2

You should have that backgroundPlaceHolderView constrained on the centerX. It's probably anchored on the left.

answered Dec 14 '18 at 13:58

Gustavo Vollbrecht

3,188
2
19
37

Change width UIView by animation and center

3 Answers3