How can I use this animation code?

Question

I'm a newbie and I need some help.

I want to display a popup image over a given UIView, but I would like it to behave like the UIAlertView or like the Facebook Connect for iPhone modal popup window, in that it has a bouncy, rubbber-band-like animation to it.

I found some code on the net from someone who was trying to do something similar. He/she put this together, but there was no demo or instructions.

Being that I am so new, I don't have any idea as to how to incorporate this into my code.

This is the routine where I need the bouncy image to appear:

- (void) showProductDetail
{
. . .
    ////////////////////////////////////////////////////////////////////////
    // THIS IS A STRAIGHT SCALE ANIMATION RIGHT NOW. I WANT TO REPLACE THIS 
    // WITH A BOUNCY RUBBER-BAND ANIMATION
        _productDetail.transform = CGAffineTransformMakeScale(0.1,0.1);
        [UIView beginAnimations:nil context:NULL];
        [UIView setAnimationDuration:0.5];
        _productDetail.transform = CGAffineTransformMakeScale(1,1);
        [UIView commitAnimations];      
    }
. . .
}

This is the code I found:

float pulsesteps[3] = { 0.2, 1/15., 1/7.5 };
- (void) pulse {
    self.transform = CGAffineTransformMakeScale(0.6, 0.6);
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:pulsesteps[0]];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationDidStopSelector:@selector(pulseGrowAnimationDidStop:finished:context:)];
    self.transform = CGAffineTransformMakeScale(1.1, 1.1);
    [UIView commitAnimations];
}

- (void)pulseGrowAnimationDidStop:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context {   
    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDuration:pulsesteps[1]];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationDidStopSelector:@selector(pulseShrinkAnimationDidStop:finished:context:)];
    self.transform = CGAffineTransformMakeScale(0.9, 0.9);
    [UIView commitAnimations];
}

- (void)pulseShrinkAnimationDidStop:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context {
    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDuration:pulsesteps[2]];
    self.transform = CGAffineTransformIdentity;
    [UIView commitAnimations];
}

Thanks in advance for any help that you can give me.

Answer 1

It's pretty simple. In your showProductDetail method, you start an animation block, then set the _productDetail.transform property, and then commit the block. This is what makes the animation happen.

The code that you found is designed to do a chain of such animations, but the property being modified is on self instead of on _productDetail. If _productDetail is an instance of a class that you created yourself, you can put the animation code inside that class.

Otherwise, just move the code inside the pulse method to the showProductDetail method, and put the two other methods below that method. Replace self.transformwith _productDetail.transformin all three methods.

Answer 2

Thanks a lot Felixyz. It worked great.

Due to my newbieness (if that's a word) I had to dissect your answer and was able to comprehend the process. I really appreciate it. I doubt that I would've been able to figure that one out on my own, even thought it ended up being so simple.

On a side note, (and this is more curiosity than anything else, because everything is working perfectly) if you notice the values of "pulsesteps", the fist one being 0.2, the second 1/15. and the third 1/7.5, do you know what's the deal with the period after 1/15 on the second value?

At first I thought that it was a typo and it was supposed to read 1/1.5, but that makes the animation very slow, so I just removed it because (in my mind) for all intents and purposes that is just 1 over 15 and the period after the 15 wouldn't matter.

The thing is if I remove that period after the 15 and leave the second value as just 1/15 the animation gets very very jerky.

Like I said before, my problem is solved and everything is working perfectly as is. I was just curious as to why that period after the 1/15 would matter.

Thanks again for your help!!!