Fill button animation in iOS

Ok lets you split this animation into multiple segments to understand it.

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

Step one

Add green UIView

to your interface file. This will be the background. We don't need to animate this point of view. Then bind the green view to IBOutlet

like this:

IBOutlet UIView *greenView;

      

        
        
        
      

    

Step two

Add a white UIView inside the green one UIView

and make it the same size as the green one UIView

. Then bind white UIView

to IBOutlet

in your header file like this:

IBOutlet UIView *whiteView;

      

        
        
        
      

    

Step three

Make or upload a "tick" image and add it to your project Xcode

. Then add a check mark ABOVE the green / white views we just created. Place a check mark above views and NOT on views. Then bind the label image to IBOutlet

- this will help us detect when the image was clicked. Do it like this:

IBOutlet UIImageView *tickImage;

      

        
        
        
      

    

Step four

We need to change the green and white UIView

to circles. We can do this with code. Import the structure #import <QuartzCore/QuartzCore.h>

into a header file.

Then, in your method, viewDidLoad

add the following code which will change the green / white views to 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

To start the animation, we need to connect the image view to a method that will start the animation. You can do this using UITapGestureRecognizer

. In your method viewDidLoad

add the following:

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

      

        
        
        
      

    

Then add an animation way to your implementation (.m) file:

-(void)tickAnimation {
    }

      

        
        
        
      

    

Step six

Create a value BOOL

in your header file - we'll use this to determine if the button is in the "ON" or "OFF" state.

BOOL animationMode;

      

        
        
        
      

    

Then, in your method, viewDidLoad

set the animationMode bool to "OFF" - this is because the default button will be "OFF" or white.

animationMode = NO;

      

        
        
        
      

    

Now we can move on to animation. From what I can see, this breaks down into two animations. The first one makes the white look smaller, and the second one makes a subtle pop-up animation on the tick image. Update the method tickAnimation

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 an animation like this. Hope this helps :)