Add a Wiggle

September 23, 2008    Programming UITouch 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.



comments powered by Disqus