Chapter 17
Basic Animations, Visual Effects and Unwind Segues

Animation can explain whatever the mind of man can conceive. This facility makes it the most versatile and explicit means of communication yet devised for quick mass appreciation.

– Walt Disney

In iOS, creating sophisticated animations does not require you to write complex code. All you need to know is a single method in the UIView class:

UIView.animateWithDuration(1.0, animations)

There are several variations of the method that provide additional configuration and features. This is the basis of every view animation.

First things first, what's an animation? How is an animation created? Animation is a simulation of motion and shape change by rapidly displaying a series of static images (or frames). It is an illusion that an object is moving or changing in size. For instance, a growing circle animation is actually created by displaying a sequence of frames. It starts with a dot. The circle in each frame is a bit larger than the one before it. This creates an illusion that the dot grows bigger and bigger. Figure 17-1 illustrates the sequence of static images. I keep the example simple so the figure displays 5 frames. To achieve a smooth transition and animation, you'd need to develop several more frames.

Figure 17-1. Sequence of frames for creating an animation
Figure 17-1. Sequence of frames for creating an animation

Now that you have a basic idea of how animation works, how will you create an animation in iOS? Consider our growing circle example. You know the animation starts with a dot (i.e. start state) and ends with a big red circle (i.e. end state). The challenge is to generate the frames between these states. You may need to think of an algorithm and write hundreds of lines of code to generate the series of frames in between. UIView animation helps you compute the frames between the start and end state resulting in a smooth animation. You simply specify the start state and tell UIView the end state by calling the UIView.animateWithDuration method. The rest is handled by iOS. Sounds good, right?

There is no better way to understand the technique than by working on a real example. We will add some basic animations to our FoodPin app. Here is what we're going to do:

  • Add a "Rate it" button in the detail view
  • When a user taps the button, it brings up a review view controller, in which the buttons are animated, for the user to rate the restaurant.

Through building the review view controller, I will show you how to create basic animations using UIView. On top of that, I will show you how to create a blurred background using the built-in API and pass data between view controllers using unwind segues.

Figure 17-2. Adding a rating feature in the detail screen
Figure 17-2. Adding a rating feature in the detail screen

To access the full version of the book, please get the full copy here. You will also be able to access the full source code of the project.

results matching ""

    No results matching ""