"Fill button" animation in iOS

Question

Do you have any suggestion to implement the following button animation in an iOS app?

Answer 1

Ok lets split this animation into a few segments to figure it out.

1) We need a white and green circle. 2) We need a tick image. 3) We need to animate the white circle and the tick.

Step One

Add a green UIView to your interface file. This will be the background view. We do not need to animate this view. Then link the green view to a IBOutlet like so:

IBOutlet UIView *greenView;

Step Two

Add a white UIView inside of the green UIView and make it the exact same size as the green UIView. Then link the white UIView to an IBOutlet in you header file like so:

IBOutlet UIView *whiteView;

Step Three

Make or download a 'tick' image and add it to your Xcode project. Then add the tick image ABOVE the green/white views that we just created. Please place the tick above the views and NOT in the views. Then link the tick image to an IBOutlet - this will help us detect when the view has been pressed. Do it like so:

IBOutlet UIImageView *tickImage;

Step Four

We need to change the green and white UIView to circles. We can do this with code. Import the #import <QuartzCore/QuartzCore.h> framework into you header file.

Then in your viewDidLoad method, add the following code which will change the green/white views into circles:

    CGPoint greenCenter = greenView.center;
    CGPoint whiteCenter = whiteView.center;

    CGRect newFrameGreen = CGRectMake(greenView.frame.origin.x, greenView.frame.origin.y, 20, 20);

    CGRect newFrameWhite = CGRectMake(whiteView.frame.origin.x, greenView.frame.origin.y, 20, 20);

    greenView.frame = newFrameGreen;
    greenView.layer.cornerRadius = newSize / 2.0;
    greenView.center = greenCenter;

    whiteView.frame = newFrameWhite;
    whiteView.layer.cornerRadius = newSize / 2.0;
    whiteView.center = whiteCenter;

Step Five

In order to run the animation, we need to connect the image view to a method which will run the animation. You can do it by using a UITapGestureRecognizer. In your viewDidLoad method, add the following:

UITapGestureRecognizer *newTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tickAnimation)];
[tickImage setUserInteractionEnabled:YES];
[tickImage addGestureRecognizer:newTap];

Then add the animation method to you implementation (.m) file as well:

-(void)tickAnimation {
    }

Step Six

Create a BOOL value in your header file - we will use this to detect if the button is in the "ON" or "OFF" states.

BOOL animationMode;

Then in your viewDidLoad method, set the animationMode bool value to "OFF" - this is because the button will be "OFF" or in the white state by default.

animationMode = NO;

Now we can go on to the animation. From what I can see, this is split up into two animations. The first one is making the white view smaller and the second one is doing a subtle popup animation on the tick image. Update the tickAnimation method in order to perform the animation:

-(void)tickAnimation {

    if (animationMode == NO) {

        // Button is OFF or set to white, lets set it to ON.

        [UIView animateWithDuration:1.0f animations:^{
             whiteView.transform = CGAffineTransformMakeScale(0,0);
        } completion:nil];

         [UIView animateWithDuration:1.0f animations:^{
              tickImage.transform = CGAffineTransformMakeScale(2,2);
         } completion:nil];

         [UIView animateWithDuration:1.0f animations:^{
              tickImage.transform = CGAffineTransformMakeScale(0,0);
         } completion:nil];

         animationMode = YES;
    }

    else if (animationMode == YES) {

        // Button is ON or set to green, lets set it to OFF.

        [UIView animateWithDuration:1.0f animations:^{
             whiteView.transform = CGAffineTransformMakeScale(1,1);
        } completion:nil];

        animationMode = NO;
    }
}

This is my attempt at making this kind of animation. I hope this helps :)