How to shrink a rectangular round cornered UIButton to a circular UIButton? - objective-c

Question

With the help of this i was able to shrink the UIButton but atlast i want the UIButton to get rounded.Please help me to get the desired animation in sign up button. The code snippet is :
Follow the link : https://www.dropbox.com/s/rh4tdub3zabxp2j/shot.gif?dl=0
self.buttonShrink = [CAKeyframeAnimation animationWithKeyPath:#"transform"];
self.buttonShrink.duration = .2f;
self.buttonShrink.values = #[[NSValue valueWithCATransform3D:CATransform3DMakeScale(1, 1, 1)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(.9,1,1)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(.8,1,1)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(.7,1,1)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(.6,1,1)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(.5,1,1)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(.4,1,1)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(.3,1,1)]];
self.buttonShrink.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
self.sampleButton.transform = CGAffineTransformMakeScale(0,0);
self.sampleButton.alpha = 1;
[self.sampleButton.layer addAnimation:self.buttonShrink forKey:#"buttonScale"];
[self.sampleButton setUserInteractionEnabled:NO];

Answer 1

I did some tinkering and got pretty decent results.
EDIT:
I just uploaded a demo project to GitHub called MorphingButton (link) that generates the animation below:
Here's what I did:
I created a normal iOS 8 button in IB (no outline at all) and connected an outlet and an action to it.
I added height and width constraints.
I added code to set the borderColor, borderWidth, and cornerRadius of the button's layer to give it a rounded corner look. This would take some adjustment to make it look like a real rounded rectangle button.
In the IBAction for the button, switch back and forth between making it round and making it rectangular.
To make the button round:
Use a UIView animateWithDuration method call to set the button's
height constraint to it's width constraint (making it square) and invoke layoutWithNeeded()
Use aCABasicAnimation to animate the button's layer's corner radius to 1/2
the button width.
To make the button rectangular:
Use a UIView animateWithDuration method call to set the button's
height constraint to it's starting height constraint
Use aCABasicAnimation to animate the button's layer's corner radius to 10 (which looks pretty good for a rounded rectangle button.)
The IBAction and viewDidLoad code would look like this in Objective-C:
- (void)viewDidLoad
{
oldHeight = buttonHeightConstraint.constant;
buttonIsRound = FALSE;
[super viewDidLoad];
animationDuration = 0.5;
}
- (IBAction)handleButton:(id)sender
{
CGFloat newHeight;
CGFloat newCornerRadius;
NSLog(#"Entering %s", __PRETTY_FUNCTION__);
if (buttonIsRound)
{
//If the button is currently round,
//go back to the old height/corner radius
newHeight = oldHeight;
newCornerRadius = 10;
}
else
{
//It isn't round now,
//so make it's height and width the same
//and set the corner radius to 1/2 the width
newHeight = buttonWidthConstraint.constant;
newCornerRadius = buttonWidthConstraint.constant/2;
}
[UIView animateWithDuration: animationDuration
animations:^
{
buttonHeightConstraint.constant = newHeight;
[button layoutIfNeeded];
}];
CABasicAnimation *cornerAnimation = [[CABasicAnimation alloc] init];
cornerAnimation.keyPath = #"cornerRadius";
cornerAnimation.fromValue = #(button.layer.cornerRadius);
cornerAnimation.toValue = #(newCornerRadius);
cornerAnimation.duration = animationDuration;
[button.layer addAnimation: cornerAnimation forKey: #"woof"];
button.layer.cornerRadius = newCornerRadius;
buttonIsRound = !buttonIsRound;
}
The Swift IBAction code for the button looks like this:
#IBAction func handleButton(sender: AnyObject)
{
if !buttonIsRound
{
UIView.animateWithDuration(animationDuration)
{
self.buttonHeightConstraint.constant = self.buttonWidthConstraint.constant
self.button.layoutIfNeeded()
self.buttonIsRound = true
}
let cornerAnimation = CABasicAnimation(keyPath: "cornerRadius")
cornerAnimation.fromValue = button.layer.cornerRadius
cornerAnimation.toValue = self.buttonWidthConstraint.constant / 2.0
cornerAnimation.duration = animationDuration
button.layer.addAnimation(cornerAnimation, forKey: "woof")
button.layer.cornerRadius = self.buttonWidthConstraint.constant / 2.0
}
else
{
UIView.animateWithDuration(animationDuration)
{
self.buttonHeightConstraint.constant = self.oldHeight
self.button.layoutIfNeeded()
self.buttonIsRound = false
}
let cornerAnimation = CABasicAnimation(keyPath: "cornerRadius")
cornerAnimation.fromValue = self.buttonWidthConstraint.constant / 2.0
cornerAnimation.toValue = 10
cornerAnimation.duration = animationDuration
button.layer.addAnimation(cornerAnimation, forKey: "woof")
button.layer.cornerRadius = 10
}
}

Answer 2

I never used this for shrinking but as you are using button layer so why can not you use it cornerRadius. I'm not sure suggestion is ok or not??