0

I'd like to animate a view to slide in and out from the left.
What I did so far:

enter image description here

When the user clicks on the upper left icon, an action (show/hide menu-view) is triggered.

The "menu-view" includes the dark mask view, the semi-transparent white view and all three views (label + image).
Now this menu view shall slide in and out.

I tried to add a constraint to the menu view: 

func viewDidLoad() {
    super.viewDidLoad()
    menuView.translatesAutoresizingMaskIntoConstraints = false
    menuViewLeftConstraint = NSLayoutConstraint(item: menuView, attribute: .left, relatedBy: .equal, toItem: view, attribute: .left, multiplier: 1, constant: -1000)
    menuViewLeftConstraint.isActive = true
}

and I toggled the constant on every click the user performs (-1000 or 0).

But the animation does not look like I thought it would.

Pek
  • 166
  • 1
  • 15
j3141592653589793238
  • 1,810
  • 2
  • 16
  • 38
  • You want to animate a change in the constraints, which I *think* you already are trying. An alternative to "sliding" the left anchor, you could increase the width. My slide out does this: (OUT) Unhide all controls and increase width constant to desired width. (IN) Hide all controls and set width to 0. –  Dec 28 '17 at 20:31
  • @dfd Hmm, sounds nice, could you make an example? Btw., do you have any idea why animating the left constraint does not work for me? – j3141592653589793238 Dec 28 '17 at 20:35
  • Without seeing the other constraints I can say. @J.Doe's answer may be the best way, but only as long as you know how much to move centerX. –  Dec 28 '17 at 21:02
  • Well, I just move the centerX constraint by 1000 every time: centerX.constant += 1000. – j3141592653589793238 Dec 28 '17 at 21:04
  • 2
    That works, at least until Apple releases a "table" iPad!, The 12.9" iPad Pro has a portrait width of 1024 and a height of 1366. (The answer provided a good way to "future proof" your code.) –  Dec 28 '17 at 21:09
  • Well, this app is only made for iPhone xD But I will set it to 1500, don't worry ;-) – j3141592653589793238 Dec 28 '17 at 21:11

1 Answers1

3

Why do this programmatically with a fixed constant? Set the right of your uiview (trailing) equal to the leading (left) of your superciew (uiviewcontroller). Create an outlet of that constraint and animate it by adding a constant which is equal to the uiview’s width and maybe some offset.

Alternative you can make your subview equal to your superviews width - someoffset, equal height -someoffset, centerX and centerY to the superview and animate the centerX constraint.

J. Doe
  • 12,159
  • 9
  • 60
  • 114
  • Thanks! How am I able to animate the centerX constraint? self.menuView.centerXAnchor.constraint(equalTo: view.centerXAnchor, constant: -1000) does not seem to work as intended. – j3141592653589793238 Dec 28 '17 at 20:51
  • I got it, thanks for your help. Moving the centerX is also described here: https://stackoverflow.com/questions/32802210/animate-anchor-style-constraints-in-ios9-0 – j3141592653589793238 Dec 28 '17 at 21:06