Basic animation, Auto Layout, and view geometry – Part 3

[Download the full Xcode project from GitHub.]

In this series of posts, “Basic animation, Auto Layout, and view geometry – Part X,” we’re learning about basic animation in several steps. In the first post on Monday, “Basic animation, Auto Layout, and view geometry – Part 1,” we covered setting up a storyboard scene using Auto Layout. In yesterday’s post, “Basic animation, Auto Layout, and view geometry – Part 2,” we used some basic UIView geometry to play with shapes and sizes and we drew on the iPhone screen. Today, we’ll be writing the code to explore iOS animation capabilities. I started writing code yesterday in Swift 3.0, but will later be providing Objective-C versions. I’ll make all the source code available to y’all on GitHub as we move forward. Tomorrow, we’ll start tying parts 1, 2, and 3 together and explaining all the details.

NOTE: The iOS skill level required herein is “beginner” to “intermediate.” One of the purposes of this blog is to help aspiring new iOS developers get started on the right foot. For all you seasoned (or “advanced”) developers out there, I encourage you to stick with this blog as we’ll be covering very complex iOS scenarios too. Everyone can benefit from these articles, including myself, by getting your feedback.

Let’s start with some iOS “block animation,” the simplest and easiest (yet very powerful) means of animating UIView objects. The UIKit framework provides a clean infrastructure for animations. According to Apple:

… The UIKit framework (UIKit.framework) provides the crucial infrastructure needed to construct and manage iOS and tvOS apps. This framework provides the window and view architecture needed to manage an app’s user interface, the event handling infrastructure needed to respond to user input, and the app model needed to drive the main run loop and interact with the system. …

In addition to the core app behaviors, UIKit provides support for the following features: …

• Animating user-interface content …

… and they state …

Animations provide fluid visual transitions between different states of your user interface. In iOS, animations are used extensively to reposition views, change their size, remove them from view hierarchies, and hide them. You might use animations to convey feedback to the user or to implement interesting visual effects.

In iOS, creating sophisticated animations does not require you to write any drawing code. All of the animation techniques described in this chapter use the built-in support provided by Core Animation. All you have to do is trigger the animation and let Core Animation handle the rendering of individual frames. This makes creating sophisticated animations very easy with only a few lines of code. …

More specifically, Apple says:

… In order to animate changes to a property of the UIView class, you must wrap those changes inside an animation block. The term animation block is used in the generic sense to refer to any code that designates animatable changes. In iOS 4 and later, you create an animation block using block objects. In earlier versions of iOS, you mark the beginning and end of an animation block using special class methods of the UIView class. Both techniques support the same configuration options and offer the same amount of control over the animation execution. However, the block-based methods are preferred whenever possible. …

Here’s the animation I created with Swift (code shown below video):

I’d like you to review my code and try to figure out what I’m doing with UIView geometry and block animation. I will discuss this code in detail in the next post in this series, but please try to think this through.

   

[Download the full Xcode project from GitHub.]