Swift and UIKit Basics for Animations in iOS

What you need to know about Swift and some beginner concepts about views, frames and other UIKit concepts on a need to know basis.

You don’t have to know everything about Swift and UIKit to be able to learn Animations in iOS. In fact, you don’t need to know much. In this article I will get you ready to learn many of the concepts in Animations.

In the next few series, I will teach you about from beginner to intermediate to advanced animations. So gobble them up.

Beginner Swift

Constants

Constants are containers that store an information of certain type. However these of course don’t change the value.

let myConstant: Int = 0
let myConstant = 0

Variables

There are many types of variables. These are like the constants but of course they have the ability to change.

var myVariable: String = "Hi"
var myVariable = "Hello"

Fundamental Data Types

There are fundamental data types like Ints, Doubles, Strings. Then there are collection types like Arrays, Dictionaries, Sets.

In the context of animations, you might delay an animation for 5 (Int) seconds, then you might want to move an item 5.5 (Double) points to the left.

• Int is short for Integer and can be anything from … -2, -1, 0, 1, 2…
• Double is for any real number that can have decimals such as π, e, -1.5, 0.33333…
• String is for containing textual data like “”, “HelloWorld!”, “Hey you“

Collection Types

Often you wanna deal with a bunch of values in the same way or store them in something together. So then you use these.

In the context of animations, you might want to use some system functions that set some system value using dictionaries.

• Arrays contain multiple of the same type like so

var myArray: [Int] = [1, 4, 8]

• Dictionaries contain values that have keys, but the keys and values should be of the same type

var myDictionary: [String: Int] = [ ("hi", 3), ("ya", 1) ]

• Sets contain multiple values of the same type, sets are unordered and arrays are ordered

var mySet: Set = ["Rock", "Paper", "Scissor"]

Functions

Functions are like mathematical functions, for a certain set of parameters, they output a single value.

func calculateTheSum(array: [Int])-> Int {
    var runningSum = 0
for item in array {
        runningSum = runningSum + item
    }
return runningSum
}

But functions don’t really have to take parameters or return a value.

func doSomethingRidiculous() {
   let myConst = 1
   print("Hi \(myVar)")
}

Closures

Closures are just functions that have no names, lol. Wrap your head around that. A lot of the concepts here are just basic introductions to these, but they will get you started for most animation related stuff.

Here we make something called a completion closure used a lot in animations.

func animateBox(parameter: Int, onCompletion: (()->Swift.Void) ) {
   //Do stuff
   onCompletion()
}

What this does is basically when everything is done inside the function the onCompletion closure gets called. When we use the above function it looks like this.

animateBox(parameter: 42, onCompletion: {
   print("Completed successfully")
}

That’s about it. And of course if there are other things you should be aware of, I’ll give a quick intro to them right then and there.

UIKit

Now the second part of the article…

What is it? UIKit is Apple’s iOS framework that contains common and most fundamental User Interface parts.

So the first thing to introduce here is UIViewController. This is basically the thing that is the page in an app. The most important part of the view controller to be aware of is the view. This is a simplified description.

Now what are views? Views are rectangular boxes that contain other stuff. The entire page itself is a view. And of course it can contain buttons and things like that. The button itself is a view by the way.

Now the view itself is called UIView as an object in UIKit. The UIView, itself is made of many parts. There the main thing to know is the frame.

Frame represents the size and position of the view. The frame though is the name of the object. The object’s type is called a CGRect.

let myFrame = CGRect(x: Double, y: Double, height: Double, weight: Double)

Some basic math-y thing to be aware of here is. The app uses something like a coordinate plane to position and size the view. For example the view has an origin at the top left corner. Origin is the point where x and y are 0.

Then there is the height and width. Pretty self explanatory. Now this rectangle in memory, can have an opacity. Which is controlled by an alpha value. An alpha of 1.0 is opaque and 0.0 is transparent.

The view can also have a colour. Colours are represented by a UIColor.

let myRed = UIColor(red: 1.0, green: 0.0, blue: 0.0, alpha: 1.0)

Another thing that comes in handy is corner radius. Lot of the pretty apps out there round their buttons and pictures. To do this. You have to manipulate layers. Like so:

mySquare.roundItUp() //This view will be round now
myRectangle.roundItUp() //This view will have a pill shape
mySquare.roundItUp(to: 15.0) //This view will only have a slight rounding of the edges

There are many animatable properties in a view, such as the frame, the colour, opacity, border… Here is an exhaustive list.

Animatable Properties

That’s it for now. Stay tuned for some beginner animations in the next article with gifs and gists. 👌

Swift animations for iOS

Lattice Studios is an app development & design studio based out of Calgary, Alberta. Check us out at latticestudios.com and on our social media @latticestudios.