iOS Animation: A Crash Course in iPhone Application Development

ios animationOwning an iPhone is more than just playing around with its already available features – you can create applications with it as well.  We are going to show you how to create your own iPhone application.  Buckle up and get ready to read on for a quick overview of what a course on iPhone Application Development has to offer!

StoryBoard Files

The first feature we are going to work with is the storyboard file.  Open up your storyboard and, first off, we are going to add one more view controller.  Here is how:image 1.png

1.       Drag the additional view controller onto your screen.

2.       Zoom back into 100% to add a new button to the menu.  We are going to call this one UI.UI.png

3.       Right-click drag from the UI view button down to our new view and make a new push segue.

4.       Now, we need a new code behind file for this view.  Right-click on the main project folder and go to new file.

5.       We are going to make a new file.  Do this by selecting the objective C class again.  We need to change that back to UIViewController.  We are going to call this one “UISamplesBC”.  Once you have that one, let it save it where it wants to.object C.png

6.       Now we need to go back to our storyboard, and again – just like we did with the web VC and the map VC – we need to set the custom class of this view to UISamplesVC.uvsamples.png

One important thing is that when you are replacing the class of these views, it is crucial to make sure that the file you are replacing says UIViewController.  If it says something else, like UIView or UIWebView, that means you are replacing the custom class of a different object.  However, if it is a UIViewController, you have selected the right thing.  You should see UISamplesBC, which means that you are looking at your custom code and the UISamplesBC.H and .endfiles.

A Quick Storyboard Example

Just by way of a quick example, we are going to zoom into 100% first and add a button somewhere on the screen.  Call this one “animate.”  Next, add an imageview to this screen.  To do this, follow these steps:

1.       Type in “image”, and you should find image view.  We will put that image view somewhere kind of close to the button. imageview.png

2.       Look for your assets folder.  In that assets folder, there are a bunch of images.  If we select our image view and go to the attributes inspector – we can pick the image that we want to show up in there.  You can use one of the stock images at the bottom of this list.  Go through the stock photo list and choose whichever image you want.  Remember that an image view is not an image; an image view is a container for that image to go in.  An image is just a property of the image view.

There are two things we need to do here: we need to make connections back to our code so we can interact with this button, and with the image view.

1.      Open up your assistant and make sure the assistant selected the right file.  We are going to make him select UISamples.h.  We should see an empty .h file here with just interface and end.  Somewhere between interface and end, we are going to right-click drag from our image view and we are going to make a new outlet.  Call that outlet “MyImageView”.

2.       Additionally, we are also going to make an action for this button.  Do this by  right-clicking and dragging this outlet down below the property.  Make sure to select action instead of outlet.  Call this “ButtonPressed” and select action on there.  Now, your .h file should have one property and one action.  If you have two properties, then you need to go back and recreate that action and select action.

Once you have completed that, you have done everything you need to do on the storyboard side.

Mastering the Making of Animations

Now, let’s go ahead and go to UISamples.m.  At the bottom of our UISamples.m file, we should have this empty function called ButtonPressed.  That is what is going to happen when we press our button.  What we need to do now is design a function that will happen when we press that button.  In other words, we want to animate the position of that image.  Although you may not have thought so: animations are actually a lot simpler than you would think.  Of course, at first you are going to need a more detailed and descriptive demonstration that you can find in this iPhone app crash course.  In the meantime, here we go for a quick overview!

1.       Let’s just start typing with an open square bracket.  We are going to do UIView, and then a space, and then animate.  When you start typing in “animate”, you will see these options.  Use the third one down, “animate with duration”, and then make sure it starts saying “completion” at the end.

2.       For NSTimeInterval, they are just asking for an integer.  This should be given in whole seconds.  Go with three, just to be safe, and if it is too fast, then feel free to change that to 3,000.

3.       Just to make this easier, when you click on the little carrot, it will void animations.  In that case, just press the return key, and that will fill out some code for you.  Then, do the same thing with the other one.  The carrot will finish completion.  Press return on that one too and that just fills out code for you.  What you are telling the code to do is: that you do whatever is in this code block, you to take three seconds, or maybe three milliseconds, to do everything that is within the open curly bracket and closed curly bracket.

4.       Then, once you are done, do whatever is in this code block.  Let’s go ahead and make sure we do not forget to put a semicolon in at the end of that line.  This is the additional code that is going to run within this command.

Moving Images

The easy way to move our image is to set the frame of the image.  This is what we will do:

1.       Grab the frame of the image, so that is CGRect.  CGRect is just another primitive object type, so we do not need an asterisk.  Call this “frame.”  We are going to set that equal to self.myimageview.frame.  That is the starting location and size of our image view.  A frame is like an x-value, a y-value, a width, and a height.

2.       What we want to do is just to move that frame in a simple way.  We will do with frame.origin.y.  Origin is it’s position and size and will contain it’s width and height.  So frame.origin.y plus equals 50.  The plus equals is the same thing as doing this: it is the same thing as doing equals frame.origin.y plus 50.  Basically, it is like saying, equals 50 more than whatever it is currently.

3.      Leave completition blank for now and run that to see if that works.

Resetting an Image Frame

What we expect is that the y location of our image will increase by 50 when we press this button.  We updated the value of the frames.origin.y but we need to set that frame back to the image view.  We need to do self.myimageview.frame equals frame.  It is like we grabbed the frame from the image view, we update the frame, and then we reassigned that frame back to the image view.  Now, change your frame to three whole seconds and not three milliseconds.  Run that again and, although that is still pretty slow it is more reasonable.  Now you will notice that if we press this button more than once, it is going to keep moving.  Eventually, it is going to be gone.

The simple solution to that is to just reset its frame to its original position when it is finished.  That is what this completion block does for us.  Here are a few steps to keep in mind:

1.      Take these three lines and copy them back down.  Instead of plus equals 50, let’s just make it minus equals 50.

2.       Now, add 50 to the y-value and then subtract 50 from the y-value.  It should be able to end up in the same position that it started in.  Run that and you will be able to see how it jumped back to its starting position when it was finished.

3.       All done!

Start Creating your Application!

Now that you have a quick overview on the steps it takes to create your own IOs Animation, consider taking this online crash course to equip you with the skills you need for basic iPhone Application Development!