Swift: Animator

A block-based UIView animation helper which enables complex animations to be performed with ease.

Animations are very important in apps. They give the user a sense of hierarchy, connection and relationship between the elements in the UI. As designers and developers, we utilize animations also to beautify the app and make it feel more responsive and fluid.

Because of this, animations have been built into UIKit extensively. Out of the box, we get stock animations for transitions between view controllers, selections of table view rows, highlighting of buttons and many such interactions. UIKit also provides APIs for tailoring animations of our UI elements as we require them to be.

That being said, we all know how horrendous, unreadable and unmanageable our codes get for performing a complex set of animations. We usually break these complex animations down into smaller animatable steps and animate these smaller steps one after the other.

To do this, every new animation step needs to be invoked after the completion of the last step. When using the stock UIView animate methods, the code gets very ugly and unmanageable with a complex animation. As the next step of animation needs to be invoked from the completion closure of the last. If there are many steps involved, either the closure of the first animation step gets really bulky or you invoke another method which makes the code disconnected and less readable.

As a developer, when you visualize an animation, and when you need to prototype that and polish over it, having a readable codebase helps a lot. It helps you better understand the steps and fix bugs easily. That is where Animator comes in to help.

vishalvshekkar/Animator

Animator

Animator is a swift class which allows chain-able and consecutive animation blocks to be animated one after the other with a clean and readable syntax. Since the blocks are chained, you can always know just by looking what happens after what. The sense of continuity is important when designing and developing an animation.

To use the animator, most simply, call addAnimations: with a closure that contains the animation code on Animator. Invoke animate to begin animating. This animates whatever statements are in the block with a 1s duration (default).

Animator.addAnimations() {
    //Animation code
}.animate()

Read the following to get better acquainted with the Animator.

1. Every block of animations that need to be performed during one animation cycle needs to be passed as a parameter to addAnimations:
2. addAnimations: can be chained.
3. The blocks passed with addAnimations: are executed in the ordered these methods are invoked.
4. Every animation block is performed only after the previous block completes.
5. Call animate after all animations have been added to begin animating from the first block.
6. addAnimations: method contains various parameters that can be passed along to tweak the animation behavior.
7. Most of these parameters have been given default values to get you started with ease.

Many animation blocks can be chained together very easily as seen below.

Animator.addAnimations() {
    //Animation code
}.addAnimations() {
    //Animation code
}.addAnimations() {
    //Animation code
}.addAnimations() {
    //Animation code
}.addAnimations() {
    //Animation code
}.animate()

As you would expect, each block is executed after the completion of the last one.

Features

1. Supports setting duration, delay and animationOptions.

Animator.addAnimations(withDuration: 1, delay: 1, options: [UIViewAnimationOptions.curveLinear]) {
    //Animation code
}

2. Supports animations with spring damping and initial velocity constants.

Animator.addAnimations(usingSpringWithDamping: 0.7, initialSpringVelocity: 0) {
    //Animation code
}

3. You could pass duration, delay and animationOptions along with with spring damping and initial velocity constants to the function. You could instead choose to leave out duration, animationOptions or delay selectively when invoking the function.

4. The animate method can accept a completion block to let you know when the entire batch of animations that have been chained together completes.

Animator.addAnimations() {
    //Animation code
}.addAnimations() {
    //Animation code
}.addAnimations() {
    //Animation code
}.animate { 
    //Completion of all animations chained above
}

Other Facts to Know

1. Developed in Swift 3.0.1
2. The playground contains a demo which you can go through.
3. You need to open the assistant editor in the Playground to view the output animation. (View -> Assistant Editor -> Show Assistant Editor) or the keyboard shortcut option+command+return (if you haven’t changed that).
4. To use Animator in your project, just drag the file 'Animator.swift' into your project which is available in the 'Source' directory in this repository. (Copy it to your project directory). Link to the file.

Demo Playground

Output multi-step Animation from the Demo Playground

The github repo for the demo playground can be found here. This playground contains a very simple multi-step animation which uses Animator.

Play around with the Playground by forking the project and publish interesting things you come up with by using Animator.

Feel free to discuss about this further by writing a response to this story.

I write about everything I find interesting and worthy enough to share.
♥︎ this article if you feel more people should read it and follow me and my blog to read my future stories.

You can follow me on Twitter here.