SAAnimationView: A Framework to Programmatically Create iOS Animations

Development iOS

Last year we started working on a framework that was initially inspired by an animation in a podcasting app we crafted for The Cato Institute called CatoAudio. Our work with CatoAudio helped us realize that we wanted an animation framework that would allow us to create a simple, smooth animation that could easily be paused, resumed, and reversed. So far we've used this framework we call SAAnimationView on a number of projects. We decided to release it outside of Savvy Apps so other developers can take advantage of the way it makes it easy to create and iterate on animations.

The original animation in CatoAudio that later inspired SAAnimationView.

What is the SAAnimationView Framework?

The SAAnimationView framework provides a simple interface to programmatically create an animation. Using CADisplayLink, this framework animates content by updating once per frame, every frame until the animation is paused. As mentioned in our article about crafting interactive iOS animations, CADisplayLink is the easiest way to change content when creating an animation. Read Tips to Create Your Own Interactive iOS Animations to learn more about how CADisplayLink works as well as more tips for making animations that react to user input.

Why Use SAAnimationView?

SAAnimationView doesn't rely on images, giving it a few advantages over other animation frameworks. Because the framework draws the content with code instead of using images, it makes it simple to iterate on, doesn't require additional exports, and decreases the animation's burden on the size of the app. Its reliance on code also ensures that the same animation can last one or 10 seconds and always be smooth. Animations made with this framework can be paused, played forwards and backwards, and sped up and slowed down. It's also very easy to add and modify the animation's curve and timing once the basic code is in place.

One thing to consider is that animations created with this framework, especially animations done with Core Graphics, can have a bigger impact on the processor than other kind of animations. Using too many of them at the same time might downgrade the performance of your application. We recommend you use this framework to bring certain parts of your applications to life, but don't rely only on it. And, of course, be sure to test and profile your application thoroughly.

How to Use the Framework

SAAnimationView is not an out-of-the-box solution, it requires you to implement the actual animation.

To start using SAAnimationView, create a subclass of it and implement your animation logic. Below you will find two examples of simple animations.

@interface AnimationView : SAAnimationView

This example is a simple animation of an empty circle that is drawn gradually as the animation is executed.

- (void)drawRect:(CGRect)rect {
  UIBezierPath *circlePath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(CGRectGetMidX(rect), CGRectGetMidY(rect))
                                                            radius:CGRectGetWidth(rect) / 2 - 3
                                                        startAngle:0 endAngle:(self.progress * 2 * M_PI) clockwise:NO];
  [circlePath stroke];
}

If you don't want to draw your content using Core Graphics, you can also use views to create an animation.SAAnimationView has a method called update: that gets called every frame when the animation is not paused.

- (void)update:(CGFloat)delta {
  CGFloat scale = MAX(0.01, self.progress);
  self.imageView.transform = CGAffineTransformMakeScale(scale, scale);
}

Get SAAnimationView

Read the full documentation on GitHub.

SAAnimationView is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod 'SAAnimationView'

Go to savvyapps.com/contact to reach us with questions or feedback.

Emilio is an iOS developer with some experience in game development and design. He enjoys bringing concepts from game development into applications to improve user interactivity.

You made it this far so...