1

I'm working on an app using a lot of animation :). I use Auto Layout to layout the views. Then I use Core Animation to animate.

My question is what is the best practice in dealing the conflict between Auto Layout Constraints and Core Animation?

For instance, I have constraints to specify the position of a view. Then I use core animation to move this view 100pt down. The problem is after the animation completed, the Auto Layout constraints pull that view back to the original position.

What I was thinking is deactivate the constraints of that views and other views whose their position are depending on this view as well. Then go ahead and perform the Core Animation stuff.

Any thoughts? I really appreciate.

UPDATED: I just figured out. After Core Animation stuff finish, just update the the constraints's constants as well.

Ryan Ho
  • 293
  • 1
  • 3
  • 14
  • 1
    You animate the constraint instead of the position. See https://stackoverflow.com/questions/12622424/how-do-i-animate-constraint-changes. – kennytm Apr 19 '17 at 18:18
  • the position is just an example. I did use Auto Layout constraints, changed theirs constants – Ryan Ho Apr 20 '17 at 15:28

2 Answers2

1

Say you have a UIView that is 100x100, centered on the screen. Now you wish to move it 50 points down. For starters, you have (at least) the following constraints:

let myCenterX = squareView.centerXAnchor.constraint(equalTo: view.centerXAnchor
let myCenterY = squareView.centerYAnchor.constraint(equalTo: view.centerYAnchor
let mySquareSize = squareView.heightAnchor.constraint(equalToConstant: 100)
let mySquareConstraint = squareView.widthAnchor.constraint(equalTo: squareView.heightAnchor.isActive
myCenterX.isActive = true = true
myCenterY.isActive = true = true
mySquareSize.isActive = true = true
mySquareConstraint.isActive = true = true

(There are a few ways to make a 100x100 UIView, this is but one.)

Now you want to change the centerYAnchor and animate:

myCenterY.constant = 100
UIView.animate(withDuration: 0.3) { self.view.layoutIfNeeded() }
  • I'm assuming this code is part of your view controller. The first group can be put in viewDidLoad, at least how it's written.
  • I tried to do a shortcut - adding the isActive = true to the declarations. It built okay, but Xcode didn't recognize it was a NSLayoutConstraint.
  • Change the animation duration to whatever you'd like.

I've shown one way - using anchors. But the other two ways of doing auto layout (at least the verbose declarations of NSLayoutConstraint) will work also. (I honestly don't know if VFL (Visual Format Language) can handle changing constants - I believe it can.

The main thing is you (1) change the constraint you want, then (2) tell your view to animate the changes you made.

  • Thanks @dfd. I understand what you're saying. But what I want is doing animation via Core Animation, not the changing constant of Auto Layout Constraint. The reason is I am working on the Spring Animation using RK4 Spring, not the UIKit Spring supplied by Apple. So I cannot using the animation methods in UIView like the one you showed. I am using this from Flinto https://github.com/flinto/spring – Ryan Ho Apr 19 '17 at 20:53
-1

You have to change the constant value of the constraint and then animate the view.

for example:

leadingMenuConstraint.constant = 0;
[self.view setNeedsUpdateConstraints];

[UIView animateWithDuration:0.5f animations:^{
    [self.view layoutIfNeeded];
}];
Rakesh Ingle
  • 1
  • 1