Work with basic animation on the iPhone

One of the attractive features of the Cocoa Touch interface is the simplified animation work. In this tutorial, I’ll show a couple of simple examples of creating animations for the iPhone. Our animation will perform two tasks: to move an object on the screen and resize it depending on the point of touch by the user.

Those who have not had to do programming on the iPhone, it will be useful to get acquainted with the basics here , here and here . As an example, I will also give a lesson from the Stanford iPhone Development series (English), where the basics of motion animation were considered.

Below is a short video of the application that we have to create. As mentioned above, you can do two things with it. One click will move the internal view to the touch point. When you double-tap the view will move with resizing. Focusing on the touch points, the application create a rectangle with a frame for presentation.
')


Well, let's get started ... First of all, we need a project. After creating a simple Window-Based Application , let's add a view to it. To do this, open the " MainWindow.xib " file in the Interface Builder editor by double-clicking on it. In the running editor, open the Library window (with the command Tools -> Library ). One of its elements is the View component. Drag it into the main Window window, focusing on the image below.



Now you need to tell the main view that the multi-touch method of operation will be resolved. This can be done in the inspector window, invoked by the " Tools -> Attributes Inspector " command. Make sure that the " Multiple Touch " option at the bottom of the window is checked.



Inside the first view, drag the second, the one that will move and resize. For the second view, you will need to adjust a number of parameters: size, color, initial position. You can adjust the size and position in the Size inspector ( Tools > Size Inspector ). I set the position to 0, 0, size - 30, 30. In the Attribute Inspector window, uncheck the box " User Interaction Enabled ".



The next step is to create a custom subclass " UIView ", which will include all the code for this lesson. I gave my own name " TouchView ".






In the " TouchView.h " file for a small internal view (moving and resizing), add the variable single instance . Give it the label " IBOutlet " to associate with the presentation in the IB editor. As a result, the header file will look like this:

#import <UIKit/UIKit.h>

@ interface TouchView : UIView {
IBOutlet UIView *strechView;
}

@end

* This source code was highlighted with Source Code Highlighter .

To associate an IB view with a custom class ( custom class ), specify the class name for the view. To do this, select the main view in the IB editor and open the " Identity Inspector " inspector window for it. In the " Class " field at the top of the window, enter " TouchView ".

Let's go back to the editor and associate the small view with the instance variable. To do this, hold down the <Control> key, click on the main view and drag it to a small one. In the window that opens, options for communication will appear. We need a " strechView " method.


The rest of the code refers to " TouchView.m ". First, delete all the current code, since we will not need any of the methods implemented in it. However, you can add the following fragment, the processing time of touching the screen.

- ( void )touchesBegan:(NSSet *)touches withEvent:(UIEvent *) event
{
}

* This source code was highlighted with Source Code Highlighter .

First you need to run the animation. The " beginAnimations: context: " method of the " UIView " class will be responsible for this. We give it the name of the animation and " nil " as the context. In my case, the name will be @ "MoveAndStrech" . To start and stop the animation, refer to the method of the " commitAnimations " class. Events between the two requests and represent the actual animation. Two methods will help you quickly configure animation behavior: " setAnimationDuration: " and " setAnimationBeginsFromCurrentState ". The function of the first, in principle, is clear from the title, and the second tells the animation that it will begin with the current state of the view. Here is what the updated " touchesBegan " method will look like:

- ( void )touchesBegan:(NSSet *)touches withEvent:(UIEvent *) event
{
[UIView beginAnimations: @"MoveAndStrech" context:nil];
[UIView setAnimationDuration:1];
[UIView setAnimationBeginsFromCurrentState:YES];

[UIView commitAnimations];
}

* This source code was highlighted with Source Code Highlighter .

The rest of the code is responsible for updating the view. First consider the situation with one touch. In this case, we get the object " UITouch " from the set of " touches ". Then set the center “strechVie ” to the touch point relative to the main view (self). As a result, in two simple lines we have a moving view, following a touch.

- ( void )touchesBegan:(NSSet *)touches withEvent:(UIEvent *) event
{
[UIView beginAnimations: @"MoveAndStrech" context:nil];
[UIView setAnimationDuration:1];
[UIView setAnimationBeginsFromCurrentState:YES];
if ([touches count] == 1) {
UITouch *touch = [touches anyObject];
strechView.center = [touch locationInView:self];
}
[UIView commitAnimations];
}

* This source code was highlighted with Source Code Highlighter .

It remains only to implement the resizing of the presentation. Below we take a closer look at the following fragment:

- ( void )touchesBegan:(NSSet *)touches withEvent:(UIEvent *) event
{
[UIView beginAnimations: @"MoveAndStrech" context:nil];
[UIView setAnimationDuration:1];
[UIView setAnimationBeginsFromCurrentState:YES];
if ([touches count] == 1) {
UITouch *touch = [touches anyObject];
strechView.center = [touch locationInView:self];
} else if ([touches count] == 2) {
NSArray *touchArray = [touches allObjects];
UITouch *touchOne = [touchArray objectAtIndex:0];
UITouch *touchTwo = [touchArray objectAtIndex:1];
CGPoint pt1 = [touchOne locationInView:self];
CGPoint pt2 = [touchTwo locationInView:self];
CGFloat x, y, width, height;
if (pt1.x < pt2.x) {
x = pt1.x;
width = pt2.x - pt1.x;
} else {
x = pt2.x;
width = pt1.x - pt2.x;
}
if (pt1.y < pt2.y) {
y = pt1.y;
height = pt2.y - pt1.y;
} else {
y = pt2.y;
height = pt1.y - pt2.y;
}
strechView.frame = CGRectMake(x, y, width, height);
}
[UIView commitAnimations];
}

* This source code was highlighted with Source Code Highlighter .

To move the view with resizing, you need to fix two touches. This will easily execute an instance method of the allObjects class on a set of touches . We get both addresses and determine the top x and y coordinates. Width and height are calculated from the difference of coordinates. The final step is to set the frame for the view using the CGRectMake . The resulting file " TouchView.m " is shown below:

#import "TouchView.h"

@implementation TouchView

- ( void )touchesBegan:(NSSet *)touches withEvent:(UIEvent *) event
{
[UIView beginAnimations: @"MoveAndStrech" context:nil];
[UIView setAnimationDuration:1];
[UIView setAnimationBeginsFromCurrentState:YES];
if ([touches count] == 1) {
UITouch *touch = [touches anyObject];
strechView.center = [touch locationInView:self];
} else if ([touches count] == 2) {
NSArray *touchArray = [touches allObjects];
UITouch *touchOne = [touchArray objectAtIndex:0];
UITouch *touchTwo = [touchArray objectAtIndex:1];
CGPoint pt1 = [touchOne locationInView:self];
CGPoint pt2 = [touchTwo locationInView:self];
CGFloat x, y, width, height;
if (pt1.x < pt2.x) {
x = pt1.x;
width = pt2.x - pt1.x;
} else {
x = pt2.x;
width = pt1.x - pt2.x;
}
if (pt1.y < pt2.y) {
y = pt1.y;
height = pt2.y - pt1.y;
} else {
y = pt2.y;
height = pt1.y - pt2.y;
}
strechView.frame = CGRectMake(x, y, width, height);
}
[UIView commitAnimations];
}

@end

* This source code was highlighted with Source Code Highlighter .

That's all. Talk, learn :)

The source code for the lesson can be downloaded here .