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:

Continue reading “Basic animation, Auto Layout, and view geometry – Part 4”

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:

Continue reading “Basic animation, Auto Layout, and view geometry – Part 3”

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

[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 yesterday’s post, “Basic animation, Auto Layout, and view geometry – Part 1” we covered setting up a storyboard scene using Auto Layout. Today, we’ll be using some basic UIView geometry to play with shapes and sizes. Tomorrow, we’ll be writing the code to explore iOS animation capabilities. I’ll be writing code in Swift 3.0, then later providing Objective-C versions. I’ll make all the source code available to y’all on GitHub as we move forward.

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.

So what’s this stuff I call “basic UIView geometry?” All user interface components, like UIView’s and UIButton’s, must be positioned on an Apple device’s screen. They’re also objects that occupy space, so they have width and height. In order to position user interface components properly on screen, you use Auto Layout, which boils down to a series of geometric equations called “constraints.” According to Apple, “The layout of your view hierarchy is defined as a series of linear equations. Each constraint represents a single equation. Your goal is to declare a series of equations that has one and only one possible solution.” Let’s make this all more concrete and define two terms you’ll always need to know.

Continue reading “Basic animation, Auto Layout, and view geometry – Part 2”