Percentage driven animation with NSLayoutConstraints

Question

I'm trying to implement a gesture driver interactive animation, where the layout changes are performed using NSLayoutConstraints. The animation works fine when using UIView.animate(withDuration:), but it is not percentage driven.

private func configureRight() {
    UIView.animate(withDuration: 1.0) {
        NSLayoutConstraint.activate(self.constraints2)
        NSLayoutConstraint.deactivate(self.constraints1)
        self.layoutIfNeeded()
    }
} 

When you're just changing an installed constraint it's simple. If the starting value is 50, the ending value is 100, and you want to animate to 50%, it's as easy as changing the value to 75 in the animation block. But there is no halfway between enabled and disabled.

I tried using CABasicAnimation, but it appears that there is no way to activate/deactivate layout constraints with a CABasicAnimation. Is there some way to access the animations that UIView.animate(withDuration:) creates to manually modify the animation progress with a gesture recognizer?

Answer 1

Yes, you can dig into the underlying animations that a UIView animation creates and manipulate them, but it's pretty painful.

I have a project (In Objective-C) called KeyframeViewAnimations on Github that creates both a UIView-based and CAAnimation-based version of a key frame animation and shows how to pause it, resume it, and scrub it back and forth. There is also a readme on in that repository called "Sleuthing UIView Animations" that explains how to figure out the CAAnimations the system generates in response to a UIView animation.

It took me quite a while to figure that stuff out, and I haven't looked at it in a while so I don't remember the gory details all that well. Like I said, it gets complicated.

You might want to instead use the new UIViewPropertyAnimator class that was added in iOS 10.

I have a project on github called UIViewPropertyAnimator-test that demonstrates using this new class. It makes scrubbing animations back and forth much easier, although scrubbing animations does not preserve custom timing curves.

Edit:

BTW, what are your 2 different groups of constraints? If you want to interpolate between different parts of your animation, you might want to find a way to modify the constant values on one or more constraints rather than turning off one constraint and turning on another. (Say for example you have a constraint on a view that specifies a Y position of 50 relative to the top of it's superview. You can animate changing the constraint's constant from 50 to 300 to move the view down.