CODEWITHSUNDEEP
objective-ciphoneuibuttoncore-animation
User1075
User1075

Reputation: 885

How to shrink a rectangular round cornered UIButton to a circular UIButton?

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];

Upvotes: 1

Views: 345

Answers (2)

Duncan C
Duncan C

Reputation: 131491

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:

enter image description here

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
  }
}

Upvotes: 3

Ankit Kumar
Ankit Kumar

Reputation: 280

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??

Upvotes: 0

Related Questions