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

[Download the full Xcode project from GitHub.]

Today, I’m going to push you to understand how how I created the following iPhone animation using Swift 3.0:

I’ll give you everything you need to figure out what I did — but I won’t explain it for you. Explanation will come later (in the next post, I tie all posts in this series, 1, 2, 3, and 4 together). I want you to learn about my design and code, not just copy and paste it. There is a method to my seeming madness. Hang in there with me through this series of posts.

After providing you with diagrams, source code, references, definitions, inline commentary, etc., I want you to be able to answer some questions about building iOS animations, even if it requires you to do some research, before I put all the pieces together in the final chapter (post) in this series. Remember that I started this blog with the intention of helping new/aspiring iOS app developers get started in an exciting, creative, and potentially financially rewarding profession. I don’t want to just provide code for you to copy and paste into your own app projects, I want you to become the best of the best iOS designers and developers. So let me:


  1. Provide you with some context to remind you where we’re at in this series,
  2. Remind you of several key concepts required for animations (and almost all general UIView programming),
  3. Show you some diagrams defining geometric concepts you must learn in order to write your own animations, and which are applicable to many other aspects of app development,
  4. Give you the source code with inline commentary which produces the animation shown above,
  5. Show you the console output resulting from running my source code,
  6. Ask you some questions about the iOS block animation protocol, and
  7. Leave you with some final thoughts on how we’ll wrap this series up.
    1.  

      1. Where are we in this series?
      In this series of posts, “Basic animation, Auto Layout, and view geometry – Part X,” we’re learning about basic animation in multiple 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 Tuesday’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. On Wednesday (“Basic animation, Auto Layout, and view geometry – Part 3”), we wrote the code to perform a simple block animation. I started writing code Wednesday in Swift 3.0.

      2. Required concepts for UIView development, including animations
      You absolutely must know about these iOS concepts to become a great iOS developer:

      • UIView bounds,
      • UIView frames,
      • UIView geometry,
      • the Core Graphics framework (and Quartz to some extent),
      • a storyboard,
      • a storyboard scene,
      • a UIViewController in code,
      • subclassing a UIViewController in code,
      • a UIViewController in a storyboard scene,
      • the backing UIViewController subclass for a a UIViewController in a storyboard scene,
      • points versus pixels,
      • a CGRect,
      • Auto Layout — especially understanding basic constraints,
      • blocks/closures, and,
      • threading/concurrency.

         

      3. View geometry
      Let me show you some diagrams defining geometric concepts you must learn in order to write your own animations, and which are applicable to many other aspects of app development. Watch the animation above and look at these two diagrams.

      Figure 1. View geometry required to set up the animation.
      Figure 2. View geometry after the animation.

      4. Source code for creating, configuring, and manipulating UIView’s programmatically
      Here’s my source code which produces the animation shown above. Read the inline commentary. Read the code. Use reference materials to look up anything you don’t understand.

      5. The output to console resulting from running my code

      6. Questions about the iOS block animation protocol

      Can you answer these questions?

      • What’s the difference between a UIView’s bounds and frame?
      • How do you subclass a UIViewController in code?
      • What is subclassing?
      • What is inheritance, polymorphism, and encapsulation?
      • How is a UIViewController in a storyboard scene tied to its backing UIViewController subclass in code?
      • What is the difference between points and pixels?
      • What is a CGRect and how is it related to a UIView?
      • What is an Auto Layout constraint and how do you set enough of them to position one UIView?
      • What is a “block” or “closure?”
      • What is threading/concurrency?
      • On which thread do you update the user interface?

      7. Final thoughts
      Oy… that was a lot of information. Are you up to the task? Will you think about my questions? Can you answer them? Do you need to do some research to answer these questions? In the next post, we’ll tie it all together. Thanks! (And remember to leave comments if you have questions and/or comments.)

         

      [Download the full Xcode project from GitHub.]

      Author: Andrew Jaffee

      Avid and well-published author, software engineer, designer, and developer, now specializing in iOS mobile app development in Objective-C and Swift, but with a strong background in C#, C++, .NET, JavaScript, HTML, CSS, jQuery, SQL Server, MySQL, Oracle, Agile, Test Driven Development, Git, Continuous Integration, Responsive Web Design, blah, blah, blah ... Did I miss any fad-based catch phrases? My brain avatar was kindly provided by https://icons8.com under a Creative Commons Attribution-NoDerivs 3.0 Unported license.