Adding an Animation to your iOS App using Swift

Animations are a simple way to make any image look better on an iOS App. I’m going to show you a simple way to take an image and animate it onto the screen. This is a very basic tutorial but it will get you familiar with animations. We will be using Xcode 6.1 with iOS 8.1.

First thing we are going to do is to create a new Project in Xcode. Since this is a basic app, we will use the Single View Application. We can call it “Animations”. The language we will be using is Swift and the device is an iPhone. Select the folder you would like to store the project in and hit Create.

Since we won’t be submitting this app to the App Store, we won’t get into any of the project details. Now lets get to it!

Select the file, “Main.storyboard” in the Navigation Panel (left side of Xcode).

Now lets search for an Image View in the Utilities Section (right side of Xcode). Drag the Image View onto the Storyboard. Be sure to resize the Image so it doesn’t take up the whole view.

We are going to drag in an Image to use for our Animation. Since I’m a Karl Pilkington fan, we will use him. Drag the image onto the Navigation Panel under the Animations Folder. On the popup select “Copy items if needed” then click Finish.

Lets go back to the Storyboard and click our Image View. In the Utilities Section you will see a dropdown called “Image”. Select your image in the dropdown. Resize the image so that it fits. You can adjust the positioning of the image using auto layout but for the purpose of saving time, I just moved Karl to the left of the screen. Great now we have our image!

We will need to create an outlet for our image. Click the “Show Assistant Editor” in the top right of Xcode. Now that we have our ViewController.swift up, we can create an outlet for our Image. Hold “Control” and click the image. Drag the blue line to the ViewController.swift right under the class ViewController line. You will get a popup asking about the Connection, Name, etc. Lets leave the Connection as “Outlet” and create a name. I used flyingKarl but you can use any name you’d like. Click Connect.

Time for some coding! Now lets go back to the Standard Editor and click the ViewController.swift file. Copy all the code below and we will go through each section.

So what we’re doing here is having Karl sitting off the screen before the first view is loaded. Once the view loads, we have him flying in. Lets go through the code line by line.

Under the “class ViewController” line you can see the outlet for our image, @IBOulet var flyingKarl: UIImageView!. This allows us to call our image in order to animate him onto the screen.

Before we get into the function “viewDidLoad” section, you will notice a function called “viewWillAppear”. We use this function to set Karl’s position before the intial view is loaded. We do this by setting the image’s frame with x and y coordinates. So before the initial view is loaded, Karl is 800 points down and 800 points to the right, which would have him at the bottom right of the screen. The 0,0 values are the width and height of the image. Since Karl is not visible at this point his size doesn’t really matter.

Onto the viewDidLoad function. Before this function is called, Karl is sitting off to the bottom right of the screen. Lets create the animation that allows Karl to fly in. We use the function animateWithDuration on the UIView to set the duration and the parameters. The duration is the first set of values in the parameters. I have it set at 1.1 seconds but you can adjust this to whatever you’d like. The next set is the actual animation. All we’re going to do is set Karl’s frame to a new position. Since Karl is off to the bottom right, we will need to use negative points in order to bring him up and to the left. I also set his width and height to 200, 200. You can set this to whatever values you‘d like as well.

Lets Run the app and see what Karl does.

Great it works! To recap this tutorial, we added an image, set the position of the image prior to the view loading, and animated the image back onto the screen when the is view loaded. There are plenty of ways to add to this animation such as adding a button to initiate Karl flying in or having him fly off of the screen instead. I hope this basic tutorial helps and inspires you to create great animations in your app!