iOS Animation Tutorial: Introduction to Easy Animation

Easy Animation Sequences

Now you’ll add a second animation that runs after the button has rotated to animate all changed properties back to their initial values.

So far you’ve probably used the completion block to chain animations in a sequence – but everyone who has tried to make a sequence of two or more animations knows that this approach leads to a very messy code.

Easy Animation introduces two new methods you can use to start a sequence of animations:

animateAndChainWithDuration(_:delay:options:animations:completion:) lets you create an animation sequence by providing exactly the same initial parameters as you would for its original UIKit counterpart.

animateAndChainWithDuration(_:delay:usingSpringWithDamping:
initialSpringVelocity:options:animations:completion:) starts an animation chain with a spring animation as the first animation. It takes the same parameters as its original UIKit counterpart.

Starting an animation sequence is very simple – replace the method name in your code:

UIView.animateWithDuration(…

with:

UIView.animateAndChainWithDuration(…

Since the parameter count and names are the same, you can run and test your project right away. Nothing has changed though – you’ve created an animation sequence consisting of a single animation.

To add a second animation to the sequence, just place the cursor after the closing parenthesis of the first animation call, and type a “.” (a period or full stop); Xcode’s autocomplete feature will offer more animations for you to add:

Choose the third animateWithDuration option from the suggested list – the one that lets you specify animation options — and set cornerRadius and borderWidth to their initial values. Use 0.15 seconds for the animation duration, 0.5 seconds of delay, and .CurveEaseOut for the options.

The completed code should now look like this:

UIView.animateAndChainWithDuration(1.0, delay: 0.0, usingSpringWithDamping: 0.33, initialSpringVelocity: 0.0, options: [], animations: {
  self.plusButton.transform = CGAffineTransformRotate(
    self.plusButton.transform, CGFloat(-M_PI_2))
  self.plusButton.layer.cornerRadius = 62.5
  self.plusButton.layer.borderWidth = 2.0
  self.plusButton.layer.borderColor = 
    UIColor.grayColor().CGColor
}, completion: nil)
  .animateWithDuration(0.15, delay: 0.5, options: .CurveEaseOut, animations: {
  self.plusButton.layer.cornerRadius = 0.0
  self.plusButton.layer.borderWidth = 0.0
}, completion: nil)

Run your project again, tap the button and you’ll see it rotate, pause for half a second, then grow its corners back. At the end of the animation, the button will look the same as it did before you tapped it:

You can tap the button again and again and it will run the animation sequence each time.

Note: To have a little fun at the button’s expense, add the .Repeat option to the second animation call. Run the project, tap the button and watch it go! :] Don’t forget to remove .Repeat option before continuing working trough the tutorial.

Completion closures

With Easy Animation, chaining animations is easy and doesn’t require the use of the completion parameter. However, they’re still available; you can use the completion closures to execute custom code at the end of the animation or in between the different animations of a sequence.

In this section, you are going to disable the button while it animates so the user cannot tap it again during the current animation.

Insert the following to the top of actionAddItem():

plusButton.enabled = false

Then replace the nil value of the completion block of the second animation with:

{_ in
  self.plusButton.enabled = true
}

This code will disable the button and re-enable it when the second animation in the sequence has finished running. If you tap repeatedly on the button it won’t react while it’s animating.

Finally replace the nil value of the completion parameter of the first animation with the following:

{_ in
  self.addRandomItem()
}

This code will add a random item to the list once the first leg of the button animation has completed. Run and enjoy the finished app:

And that’s a wrap! You now know the basics of Easy Animation – a tiny animations library, which saves you lots of code lines and development time.

Where To Go From Here?

Now that you know the basics, you’re ready to try some of Easy Animation’s more advanced features.

Ever wanted to stop a repeating view animation? Easy Animation lets you do even that!

If you want to learn more, check out our book iOS Animations by Tutorials. In the book, which is fully updated for Swift 2.0 and iOS 9, you’ll learn how to animate with springs, transitions, keyframe animations, CALayer animations, Auto Layout constraint animations, view controller transition animations, and more.

We hope you enjoyed this tutorial, and if you have any questions or comments, please join the forum discussion below!