Animate an automatic layout using UIKitDynamics

Question

I would like to use UIKitDynamics UISnapBehaviour to animate the animation (appearance + change of position when rotated) of the button, which itself is positioned in the view using automatic layout.

I understand that, using the power of UIKitDynamics, I need to temporarily disable the automatic layout restrictions from the button. I am thinking about the following process ...

• Get the target center / button border before switching to the automatic layout (but after launching it). Save this value.
• Temporarily disable all automatic button layouts / restrictions
• Apply UISnapBehaviour. Submit it with the saved target center or border value from the automatic layout (from step 1).
• When the UIKitDynamics animation is completed to re-enable , limitations are in place to prepare for further layout changes

Is this the right approach?

Which delegate / layout should I use for these relevant steps + how do I get the target center for presentation from Auto Layout before the actual animation based on Auto Layout / transition occurs?

Answer 1

I could suggest a different approach that approaches UISnapBehavior but avoids trying to marry UIKit Dynamics with auto-layout, where you rely on the auto-layout engine to determine the end position of the view. (Obviously, if you knew the final destination, then you simply pause the automatic layout, the binding, and when this binding is completed, you will then apply the restrictions.)

For the bouncing effect, when the view snaps into place, you can use animateWithDuration with the usingSpringWithDamping parameter, for example:

 // create the view UIView *view = ...; view.translatesAutoresizingMaskIntoConstraints = NO; [self.view addSubview:view]; // add all of the constraints for the final position NSDictionary *views = NSDictionaryOfVariableBindings(view); [self.view addConstraints:...]; // animate the application of those constraints with low `withSpringWithDamping` [UIView animateWithDuration:1.0 delay:0.0 usingSpringWithDamping:0.5 initialSpringVelocity:0.0 options:0 animations:^{ [view layoutIfNeeded]; } completion:nil]; 

If you also want a little twist when it snaps into place, you can use animateKeyframesWithDuration :

 [UIView animateKeyframesWithDuration:1.0 delay:0.0 options:0 animations:^{ [UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.5 animations:^{ view.transform = CGAffineTransformMakeRotation(M_PI_4 / 2); }]; [UIView addKeyframeWithRelativeStartTime:0.5 relativeDuration:0.25 animations:^{ view.transform = CGAffineTransformMakeRotation(-M_PI_4 / 4); }]; [UIView addKeyframeWithRelativeStartTime:0.75 relativeDuration:0.125 animations:^{ view.transform = CGAffineTransformMakeRotation(M_PI_4 / 16); }]; [UIView addKeyframeWithRelativeStartTime:0.875 relativeDuration:0.125 animations:^{ view.transform = CGAffineTransformMakeRotation(0); }]; } completion:nil]; 

This is not exactly UISnapBehavior , but comes close to it quite closely. You can play with the time and the number of spins in the keyframe animation, as well as with the spring damping factor. But this illustrates one approach to getting sticky behavior using block animation.