Using right animation / transformation can improve quality of your application. There are most important during game development.

You can use 3 basic transformations – you can marge them or invent your own. These 3 animations are:

• rotation
• scale
• translation

You can apply animation to almost everything – images (UIImageView), buttons (UIButton), toolbars, label, views…

Rotation:

Let’s say you have an image (UIImageView *myImage) and you would like to do something with it. To rotate it:

myImage.transform = CGAffineTransformMakeRotation(M_PI*0.25);

This will rotate image by 45 degrees right. Here are the typical values and their degree equivalents:

• M_PI * 0.00 = 0° (original condition)
• M_PI * 0.25 = 45°
• M_PI * 0.50 = 90°
  
• M_PI * 0.75 = 135°
  
• M_PI * 1.00 = 180°
  
• M_PI * -0.75 = 225°
  
• M_PI * -0.50 = 270°
  
• M_PI * -0.25 = 315°
  

If you would like to use degrees not the range <-1 ; 1> multiplied by M_PI you can define the constant value in header of your class: #define radianConst M_PI/180.0 (right under the #import lines). Now if you want to turn your image by 63 degrees use this:

myImage.transform = CGAffineTransformMakeRotation(63.0*radianConst);

Scale

Scale allows you to zoom in / zoom out your image. It’s more than simple scale, you can set the scale parameter different for image’s width and height. If you would like to have the image 2 times wider and 1.5 times higher try this:

myImage.transform = CGAffineTransformMakeScale(2.0,1.5);

Don’t be surprised that after this operation your image will be pixeled, that’s why in future you should provide images in higher resolution make them smaller on load (for example CGAffineTransformMakeScale(0.5,0.5)) and later when needed show them in original dimensions using CGAffineTransformMakeScale(1.0,1.0).

Scale gives you one more cool effect. If you set scale parameter as a negative value your image will be scaled and flipped horizontally or vertically. Examples:

• CGAffineTransformMakeScale(-1.0,2.0) – image flipped horizontally and twice higher
• CGAffineTransformMakeScale(1.5,-3.0) – image 1.5 times wider, 3 times higher and flipped vertically
• CGAffineTransformMakeScale(-2.0,-2.0) – image 2 times bigger and flipped both horizontally and vertically

Translation

Translation is doing almost the same thing as changing the center value of any object. It moves image along X and Y axises. It’s the poorest so I will give you only 1 example and won’t talk about this any more.

• CGAffineTransformMakeTranslation(50.0,20.0) – image moved 50 pixels to the right and 20 to the botton

Similar effect you will get using center as I mentioned before: myImage.center = CGPointMake(140.0,90.0). Both of them has their own advantages and disadvantages, but let’s now move to something more interesting.

Animations

You know how to rotate an image (or anything else) by given degree, scale, flip, or move. How about creating a smooth animation? Well it’s very simple:

	[UIView beginAnimations:nil context:NULL];
	[UIView setAnimationDuration:1.5];
	// other animations goes here
	myImage.transform = CGAffineTransformMakeRotation(M_PI*0.5);
	// other animations goes here
	[UIView commitAnimations];

This code will smoothly rotate your object by 45 degress during 1.5 seconds. Please note, that while performing any animation the application continue to run next tasks – doesn’t hold for a given amount of seconds. If you would like your app to do an action when the animation is finished you can use either the NSTimer:

[NSTimer scheduledTimerWithTimeInterval:1.5 target:self selector:@selector(nextMethodName) userInfo:nil repeats:NO];

or extend your animation code by it’s delegate and selector:

	[UIView beginAnimations:nil context:NULL];
	[UIView setAnimationDuration:1.5];
	[UIView setAnimationDelegate:self];
	[UIView setAnimationDidStopSelector:@selector(nextMethodName)];
	myImage.transform = CGAffineTransformMakeRotation(M_PI*0.5);
	// other animations goes here
	[UIView commitAnimations];

Remember that second example is much more efficient, but in that case, nextMethodName (whatever you name it) must return a boolean YES – not void which doesn’t return any value at all. Example:

-(BOOL)nextMethodName {
 	// some tasks

	return YES;
}

Animations can be great to have transitions between two views but I will talk about them in other article.

Two transformations at once

Using any of above transformations you are modyfing only one property – transform of a given object. For example the code:

myImage.transform = CGAffineTransformMakeScale(2.0,1.5);
myImage.transform = CGAffineTransformMakeRotation(M_PI*1.0);

will give you the image rotated by 180 degrees, but won’t be scaled – scale was canceled after making rotation.

If you would like to merge two transform use the following code:

animateLabel.transform = CGAffineTransformConcat(CGAffineTransformMakeScale(2.0, 1.5), CGAffineTransformMakeRotation(M_PI*1.0));

I personally really don’t like this. I didn’t enjoy matrices during Mathematics in school. Any transform creates the matrix and CGAffineTransformConcat is multiplying two matrices – the order is necessary. If you wanted to merge three transforms you would have to use CGAffineTransformConcat merging two transforms as an argument of another CGAffineTransformConcat mergin previous merge with next transform. Sound difficult? Yes, for me two.

Original shape

To conclude, if you would like to quickly cancel any transforms use CGAffineTransformIdentity as a transform property of any object.

myImage.transform = CGAffineTransformIdentity;

I guess it’s all you need to know about transforms and animations right now. Below you can download my project where you can rotate, scale, translate any object using sliders and watch the smooth scale animation.

Download the project

• Previous Entry: Saving data
• Next Entry: Timers