CODEWITHSUNDEEP
iosuibuttonuiviewanimation
User1075
User1075

Reputation: 885

How to reduce the width of UIButton from both left and right with animation?

I have tried to reduce the width of UIButton from both left and right on clicking by using following code. But instead it just only shrinks the size of UIButton. The code is 

    -(void)loginclickAction:(id)sender
{
        self.centerZoom = [CAKeyframeAnimation animationWithKeyPath:@"transform"];
        self.centerZoom.duration = 1.5f;
        self.centerZoom.values = @[[NSValue valueWithCATransform3D:CATransform3DMakeScale(1, 1, 1)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(.9, .9, .9)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(.8,.8, .8)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(.7, .7, .7)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(.6, .6, .6)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(.5, .5,.5)]];
        self.centerZoom.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
        self.loginButton.transform = CGAffineTransformMakeScale(.5,.5);
         self.loginButton.alpha = 1;
        [self.loginButton.layer addAnimation:self.centerZoom forKey:@"buttonScale"];
        [self.loginButton setUserInteractionEnabled:NO];

}

But the output is shrinking of the UIButton which i don't want. Please help me to find the way in reducing the width of the button animated.

Upvotes: 0

Views: 127

Answers (2)

Wain
Wain

Reputation: 119031

Your transforms are all affecting multiple dimensions:

CGAffineTransformMakeScale(.5, .5);

this is scaling the width (x) and height (y), to scale only the width:

CGAffineTransformMakeScale(.5, 1);

and the same applies to

CATransform3DMakeScale(.9, .9, .9)

which is changing x, y and z dimensions and should be

CATransform3DMakeScale(.9, 1, 1)

Upvotes: 1

Sanjay Mohnani
Sanjay Mohnani

Reputation: 5967

You need a way by which you can scale the button only across the width. Use below method which scales button horizontally from full width to half with animation-

-(void) reduceButtonWidthFromLeftAndRightWithAniamation:(UIButton *)button
{
    [UIView beginAnimations:@"ScaleButton" context:NULL];
    [UIView setAnimationDuration: 1.5f];
    button.transform = CGAffineTransformMakeScale(0.5, 1.0);
    [UIView commitAnimations];
}

Upvotes: 1

Related Questions