Add a Wiggle

This will be a continuation of Multiple Objects and UITouch

If you do a long touch in the main section of the iPhone on a icon you will notice the icons will wiggle. This shows the user they can be deleted or moved around. So lets try to mimic that as best we can and when we stop a drag of our image it will wiggle for two seconds.

The first thing we need to do is import a framework to our project. So right click on the Frameworks tab. Then click on Add Framework. Then click QuartzCore FramwWork.

So first open up touchViewController.h and we need to add in two function

-(void)doWiggle:(UIView *)touchView;
-(void)endWiggle:(NSTimer*)timer;

Now open up touchViewController.m and we need to add in two functions

-(void)doWiggle:(UIView *)touchView {

	// grabbing the layer of the tocuhed view.
	CALayer *touchedLayer = [touchView layer];

	// here is an example wiggle
	CABasicAnimation *wiggle = [CABasicAnimation animationWithKeyPath:@"transform"];
	wiggle.duration = 0.1;
	wiggle.repeatCount = 1e100f;
	wiggle.autoreverses = YES;
	wiggle.toValue = [NSValue valueWithCATransform3D:CATransform3DRotate(touchedLayer.transform,0.1, 0.0 ,1.0 ,2.0)];

	// doing the wiggle
	[touchedLayer addAnimation:wiggle forKey:@"wiggle"];

	// setting a timer to remove the layer
	NSTimer *wiggleTimer = [NSTimer scheduledTimerWithTimeInterval:(2) target:self selector:@selector(endWiggle:) userInfo:touchedLayer repeats:NO];

}

-(void)endWiggle:(NSTimer*)timer {
	// stopping the wiggle now
	[((CALayer*)timer.userInfo) removeAllAnimations];
}

Now that we have two functions. We need add the touchesEnded method that gets called when you lift your finger off the screen. 

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

	UITouch *touch = [[event allTouches] anyObject];

	if ([touch view] == image) {
		[self doWiggle:[touch view]];

	}
	else if ([touch view] == image2) {
		[self doWiggle:[touch view]];
	}
}

Now your image will wiggle when you end your drag.

You can grab the source code here.

September 23, 2008 · Filed Under Programming, UITouch

Comments

3 Responses to “Add a Wiggle”

  1. Eddie Wilson on September 25th, 2008 8:39 pm

    Just wanted to say hey, and let you know that we all appreciate the work that your doing in posting these tutorials. I noticed that you don’t get alot of comments, so just wanted to give you a little moral boost and keep up the good work!

  2. nubeGirl on October 3rd, 2008 8:08 pm

    is it possible to see how (after you touch the square the first time and it wiggled) you would code a second touch on the square and have it fade away? Basically how do you code two different touch events on a single object? (and also keeping the click and hold drag action)

  3. mikezupan on October 4th, 2008 10:03 am

    @nubeGirl,

    Yes it is possible. You just set a variable or such to tell the application you already did the first touch.. its just a bit of logic

Leave a Reply