Intro to POP, iOS Core Animation Wrapper

Pop is the Core Animation wrapper built by Facebook that underlies their new (Flipboard killing) app, Paper. The interaction, animations and transitions in Paper are current, creative and sophisticated. The lack of imagination in the iOS dev community has been one of my personal frustrations for a long time now. For Facebook to release Pop under an open source license is a commendable effort and will hopefully push more iOS developers to get a bit more inventive with their interfaces and stop lazily relying on native transitions.

I’ve been threatening to build a Core Animation wrapper for years. The current interface is bloated, arcane and well over due for a makeover. Heaven forbid wanting to do anything more complex than a basic easeInOut animation using the UIView API. Talking from experience, having done this on multiple high profile apps, if you want a simple bounce ease you have to include 3rd party C easing classes. If you need dynamic UI movement, updating on user interaction, you’re better off rolling your own. It really shouldn’t have to be this way. The SpriteKit Actions API has progressed this somewhat, however combining UiKit and SpriteKit will quickly turn your code into a tangled mess.

Pop doesn’t solve all the problems (for instance I’d really like to be able to do a simple back ease) but it does make the creation of Spring Animations a lot simpler, and it consolidates all of the CA animatable properties as constants in a single location. Why Apple didn’t already do this years ago I have absolutely no idea. Remembering completely arbitrary names such as “view.scaleXY” has been one of the biggest frustrations of creating custom animations in iOS.

In this post I’m creating a simple scale animation using the POPSpringAnimation class. Generally I’m not a big fan of spring animations in UI, if you don’t get the timing perfectly right they end up looking gangly and amateur. So we’ll be tweaking the springBounciness and springSpeed properties to get it looking more like a back ease instead.

The Pop open Source repo resides on GitHub at this location, there you’ll also find some useful resources related to Pop and iOS animation. I used CocoaPods to install the framework, if you’re not familiar with CocoaPods there’s a great tutorial on Ray Wenderlich’s site here, or you can simply drag and drop the Pop folder from the GitHub download, remember to set up you C++ linkers. Download the finished project from my GitHub repo here and have a play around.

   [self.circle pop_removeAllAnimations];
    
    CGRect largeRect = CGRectMake(2.5,2.5, 0, 0);
    CGRect smallRect = CGRectMake(1.,1., 0, 0);
    
    POPSpringAnimation *animation = [POPSpringAnimation animationWithPropertyNamed:kPOPViewScaleXY];
    animation.springBounciness = 8;
    animation.springSpeed = 1.5;
    
    if (self.animatingOut) {
        animation.toValue = [NSValue valueWithCGRect:largeRect];
        self.animatingOut = NO;
    }
    else {
        animation.toValue = [NSValue valueWithCGRect:smallRect];
        self.animatingOut = YES;
        
    }
    
    [self.circle pop_addAnimation:animation forKey:@"size"];

In the project I’ve added a png of a circle to a UiImageView and hooked up a button to trigger the animations. There’s a BOOL, self.animatingOut, to keep track of whether we’re animating in or out. It’s important to remove all the animations on the object we are about to animate, then create an instance of POPSpringAnimation and it’s springBounciness and springSpeed to the desired amounts, and call the pop_addAnimation method on the animation.

Leave a Reply

Your email address will not be published. Required fields are marked *