Show Menu

Looking to hire an app developer?

Submit your 30 day Job Listing for FREE

xcode bomb image

iOS 7 provides us with some new and exciting functions in the UIKit Dynamics classes set. This tutorial will show you how to create a falling object in your iOS Application using the iOS 7 UIGravityBehavior.

Here are a few resources that you might also find useful:

If you would rather follow along the video tutorial please do so by watching it below. At the bottom of the tutorial you can also download the source files for this project.

If you cannot see the video in your browser, please visit Youtube to view it.

Let’s get started

The first thing you need to do is create a new Xcode Single View Application:

Xcode Single View Application

Then click the next button at the bottom right of this popup, you will then be presented with another screen asking you to chose options for your application. I am going to aptly name this project: UIGravityBehavior. For the purpose of this project the organisation name can be anything you want and I have used com.ios-blog as the company identifier, but again this can be anything that you want.

We now need to edit you iOS Application header file which is the viewController.h and add two properties. The first one is our UIImageView which will be the image that we want to fall down, we will aptly call this: image and the Dynamic Animator which will be the item containing our animation which we will call animator. So, in your header file add:


@property (nonatomic, weak) IBOutlet UIImageView *image;
@property (nonatomic) UIDynamicAnimator *animator;

We then need to also code the IBAction to our header file that will run the animation when we click the start button. Code in:


-(IBAction)Start;

That its for our header file. Next we need to go into the project implementation file (viewController.m) and synthesize the animator object we just coded in the header file:


@synthesize animator = _animator;

We now also need to add the animation code in the IBAction, so when we click the button it will run the animation:


-(IBAction)Start {
    _animator = [[UIDynamicAnimator alloc] initWithReferenceView:self.view];
    UIGravityBehavior *gravityBehavior = [[UIGravityBehavior alloc] initWithItems:@[self.image]];
    [_animator addBehavior:gravityBehavior];
}

That’s it for the coding part of the project. However we are still not done. We now need to add two elements to the Xcode Main.storyboard. These objects are the Start button that we will use to run the animation and the image that we want to fall down.

Drag and Drop in the image that you have chosen to use in the project navigator. I have used a free no back-link required image from icon finder. You will then have a dialogue window pop up. Make sure that you have the copy items to destination’s group folder option selected:

xcode copy to destination

This is the image that I used:

bomb

Image found: iconfinder search

Please Make sure that you double check and then check again that the image provided is still royalty free. You do not want to get sued when making your app.

Once you have the image file in your project, click the Main.storyboard in your project navigator. Now, in the bottom right of Xcode you should see the Media Library which has the image that you have just added to your Xcode project:

xcode show media library

The next object we need to add to the storyboard is the button that we are going to use to initiate the falling object. In your object library, also located bottom right of Xcode, drag in a button:

xcode object library

Once you have those, double click the button and rename it to Start. Your Main.Storyboard should now look like:

xcode main storyboard

We now need to connect the UIImageView *image that we created earlier with the view that we placed on the view controller.

Xcode connect UIImageView

One you have dragged the blue line over the image, release the mouse pad and the buttons and another dialogue window will pop up. In this new window, click image:

xcode link image files owner

You have now connected the image to the UIImageView *image that we defined earlier.

We now need to also connect the Start button. Exactly the same way as we just did for the image. Click the Start button and hold down Ctrl and connect the blue line. Once you have released the mouse pad you will be presented with the dialogue box. Select Start, under Sent Events:

xcode start files owner uibutton

That’s it, You’re all done. If you run your application it will open up in the iPhone Simulator. Click the Start button and watch the UIGravityBehavior animation take effect. The chosen image (bomb.png) should fall down the application.

The source files

Download

having issues?

We have a Questions and Answer section where you can ask your iOS Development questions to thousands of iOS Developers.

Ask Question

FREE Download!

Get your FREE Swift 2 Cheat Sheet and quick reference guide PDF download when you sign up to SwiftMonthly


Sharing is caring

If you enjoyed this tutorial, please help us and others by sharing using one of the social media buttons below.


iOS-Blog Admin Team

Written by:

We're here to help.

Comments

comments