"Fill button" animation in iOS - 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 :)

Answer 2

You could animate the layer.borderWidth property for the colour fill.. It draws inside of the layer, something like this.
UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(30, 30, 100, 100)];
[self.view addSubview:button];
button.layer.borderWidth = 10;
button.layer.borderColor = [UIColor greenColor].CGColor;
button.layer.cornerRadius = 50;
CABasicAnimation *border = [CABasicAnimation animationWithKeyPath:#"borderWidth"];
[border setFromValue:[NSNumber numberWithInt:10]];
[border setToValue:[NSNumber numberWithInt:50]];
border.duration = 1.0;
button.layer.borderWidth = 50;
[button.layer addAnimation:border forKey:#"border"];
Here is a really slow gif screen cap of this working with autoReverse set to true.
If you like Swift it looks like this
var button = UIButton(frame: CGRect(x: 30, y: 30, width: 100, height: 100))
self.view.addSubview(button)
button.layer.borderWidth = 10
button.layer.borderColor = UIColor.greenColor().CGColor
button.layer.cornerRadius = 50
let border:CABasicAnimation = CABasicAnimation(keyPath: "borderWidth")
border.fromValue = 10
border.toValue = 50
border.duration = 1.0
button.layer.borderWidth = 50
button.layer.addAnimation(border, forKey: "border")

Answer 3

First, you have an imageView with image like this.
Second, you overlay it with a white UIView, and at the same time, init a UIImageview for the v symbol to turn it into white color.
Next step, run animation to scale the white view from 1 to 0 in 0.2 sec.
When it done, you run other animation to make the white v symbol scale from 1 to 1.2 in 0.2 sec.
That is my idea.