How to make a button looks like the on in the nike+ running

Like the Nike running iOS app new outlook. See the button in the circle, when you hold it for a while (a couple of seconds), the run will start or stop along with a animation. Pretty sure you know that when you use it.

See below image.

That is pretty easy.

Below is the sample code which will do the magic.

- (void) onClickingButton
{
    // Load images
    NSArray *imageNames = @[@"win_1.png", @"win_2.png", @"win_3.png", @"win_4.png",
                        @"win_5.png", @"win_6.png", @"win_7.png", @"win_8.png",
                        @"win_9.png", @"win_10.png", @"win_11.png", @"win_12.png",
                        @"win_13.png", @"win_14.png", @"win_15.png", @"win_16.png"];

    NSMutableArray *images = [[NSMutableArray alloc] init];
    for (int i = 0; i < imageNames.count; i++) {
        [images addObject:[UIImage imageNamed:[imageNames objectAtIndex:i]]];
    }

    // Normal Animation
    UIImageView *animationImageView = [[UIImageView alloc] initWithFrame:CGRectMake(60, 95, 86, 193)];
    animationImageView.animationImages = images;
    animationImageView.animationDuration = 0.5;

    [self.view addSubview:animationImageView];
    [animationImageView startAnimating];
}

What you will do is as below.

1. Button will be custom button with no image. It will be transparent.

2. Behind button you will have imageview.

3. When button is clicked, you will call above code.

4. When button is released, stop that animation and you will check last image shown and you will show that image to the imageview. That's it...

check this link for image animations