如何在iOS中平滑地放大和缩小UIButton

Question

我有一个很大的问题,缩放简单UIButton.

• 要重现问题,只需创建一个简单的项目,其中xib包含2 UIButtons:一个要缩放,另一个用于激活缩放方法.

• 将UIButton被缩小为一个自定义的button,里面一些简单的文字和背景图像.

然后使用以下代码:

.H

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController {
    UIButton* buttonToZoom;
}

@property (nonatomic, retain) IBOutlet UIButton* buttonToZoom;

-(IBAction)zoomIt:(id)sender;
CGPoint CGRectFindCenter(CGRect rect);
- (void) zoom:(BOOL)zoomIt animated:(BOOL)animated;

@end

.M

#import "ViewController.h"

@implementation ViewController

@synthesize buttonToZoom;

#pragma mark - View lifecycle

- (void)viewDidLoad
{
    [super viewDidLoad];

    CGRect theRect = self.buttonToZoom.bounds;

    CGRect deleteBtnMaxiRect = CGRectMake(self.view.bounds.size.width - theRect.size.width - 10,
                                          10,
                                          theRect.size.width, 
                                          theRect.size.height);

    CGRect deleteBtnMiniRect = CGRectMake(CGRectFindCenter(deleteBtnMaxiRect).x - 1,
                                          CGRectFindCenter(deleteBtnMaxiRect).y - 1,
                                          2, 
                                          2);

    self.buttonToZoom.frame = deleteBtnMaxiRect;    // Ensures its correct size at default position
    [self zoom:NO animated:NO]; // makes it disapear
}

-(IBAction)zoomIt:(id)sender {
    static BOOL zoomInOut = YES;

    [self zoom:zoomInOut animated:YES];
    zoomInOut = !zoomInOut;
}

CGPoint CGRectFindCenter(CGRect rect)
{
    return CGPointMake(rect.origin.x + rect.size.width/2.0, rect.origin.y + rect.size.height/2.0);
}

- (CGAffineTransform)translatedAndScaledTransformFromRect:(CGRect)fromRect toRect:(CGRect)toRect  {

    CGSize scales = CGSizeMake(toRect.size.width/fromRect.size.width, toRect.size.height/fromRect.size.height);
    CGPoint offset = CGPointMake(CGRectGetMidX(toRect) - CGRectGetMidX(fromRect), CGRectGetMidY(toRect) - CGRectGetMidY(fromRect));

    NSLog(@"scales %@", [NSValue valueWithCGSize:scales]);

    CGAffineTransform scaleTransform =  CGAffineTransformMakeScale(scales.width, scales.height);
    CGAffineTransform offsetTransform =  CGAffineTransformMakeTranslation(offset.x, offset.y);
    return scaleTransform;// CGAffineTransformConcat(scaleTransform, offsetTransform);

    //    return CGAffineTransformMake(scales.width, 0, 0, scales.height, offset.x, offset.y);

}

- (void) zoom:(BOOL)zoomIt animated:(BOOL)animated
{
    static CGRect theRect;
    if (CGRectIsEmpty(theRect)) theRect = CGRectMake(0, 0, 87, 33);

    CGRect deleteBtnMaxiRect = CGRectMake(self.view.bounds.size.width - theRect.size.width - 10,
                                          10,
                                          theRect.size.width, 
                                          theRect.size.height);

    CGRect deleteBtnMiniRect = CGRectMake(CGRectFindCenter(deleteBtnMaxiRect).x - 1,
                                          CGRectFindCenter(deleteBtnMaxiRect).y - 1,
                                          2, 
                                          2);

    NSLog(@"------------------------------------------------ mini %@", [NSValue valueWithCGRect:deleteBtnMiniRect]);
    NSLog(@"------------------------------------------------ maxi %@", [NSValue valueWithCGRect:deleteBtnMaxiRect]);

    if (animated == YES) {
        [UIView beginAnimations:@"editingModeAnimation" context:nil];
        [UIView setAnimationDuration:1.3];
        [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
        [UIView setAnimationTransition:UIViewAnimationTransitionNone forView:self.view cache:NO];
        [UIView setAnimationDelegate:self];
    }

    if (zoomIt == YES) {
        if (CGRectEqualToRect(self.buttonToZoom.frame, deleteBtnMaxiRect)) return;
        NSLog(@"Zoom");

        NSLog(@"################################################ before bounds %@", [NSValue valueWithCGRect:self.buttonToZoom.bounds]);
        NSLog(@"################################################ before frame %@", [NSValue valueWithCGRect:self.buttonToZoom.frame]);
        self.buttonToZoom.alpha = 1.0;
        self.buttonToZoom.transform = [self translatedAndScaledTransformFromRect:deleteBtnMiniRect toRect:deleteBtnMaxiRect];
        [UIView setAnimationDidStopSelector:@selector(animate_EndEditing)];
    }
    else {
        if (CGRectEqualToRect(self.buttonToZoom.frame, deleteBtnMiniRect)) return;
        NSLog(@"Reduce");

        NSLog(@"################################################ before bounds %@", [NSValue valueWithCGRect:self.buttonToZoom.bounds]);
        NSLog(@"################################################ before frame %@", [NSValue valueWithCGRect:self.buttonToZoom.frame]);
        self.buttonToZoom.alpha = 1.0; // for test
        self.buttonToZoom.transform = [self translatedAndScaledTransformFromRect:deleteBtnMaxiRect toRect:deleteBtnMiniRect];
        [UIView setAnimationDidStopSelector:@selector(animate_EndEditing)];
    }

    if (animated == YES) [UIView commitAnimations];
    else {
          NSLog(@"################################################ after bounds %@", [NSValue valueWithCGRect:self.buttonToZoom.bounds]);
          NSLog(@"################################################ after frame %@", [NSValue valueWithCGRect:self.buttonToZoom.frame]);
    }
}

- (void) animate_EndEditing
{
    NSLog(@"################################################ after bounds %@", [NSValue valueWithCGRect:self.buttonToZoom.bounds]);
    NSLog(@"################################################ after frame %@", [NSValue valueWithCGRect:self.buttonToZoom.frame]);
}

@end

这给出了以下日志:

点击放大:

Launch

2013-07-30 00:42:31.008 test[651:207] ------------------------------------------------ mini NSRect: {{265.5, 25.5}, {2, 2}}
2013-07-30 00:42:31.009 test[651:207] ------------------------------------------------ maxi NSRect: {{223, 10}, {87, 33}}
2013-07-30 00:42:31.010 test[651:207] Reduce
2013-07-30 00:42:31.010 test[651:207] ################################################ before bounds NSRect: {{0, 0}, {141, 37}}
2013-07-30 00:42:31.011 test[651:207] ################################################ before frame NSRect: {{169, 10}, {141, 37}}
2013-07-30 00:42:31.011 test[651:207] scales NSSize: {0.022988506, 0.060606062}
2013-07-30 00:42:31.011 test[651:207] ################################################ after bounds NSRect: {{0, 0}, {141, 37}}
2013-07-30 00:42:31.012 test[651:207] ################################################ after frame NSRect: {{237.8793, 27.378788}, {3.2413793, 2.2424242}}



Zoom in

2013-07-30 00:43:09.497 test[651:207] ------------------------------------------------ mini NSRect: {{265.5, 25.5}, {2, 2}}
2013-07-30 00:43:09.498 test[651:207] ------------------------------------------------ maxi NSRect: {{223, 10}, {87, 33}}
2013-07-30 00:43:09.498 test[651:207] Zoom
2013-07-30 00:43:09.499 test[651:207] ################################################ before bounds NSRect: {{0, 0}, {141, 37}}
2013-07-30 00:43:09.500 test[651:207] ################################################ before frame NSRect: {{237.8793, 27.378788}, {3.2413793, 2.2424242}}
2013-07-30 00:43:09.500 test[651:207] scales NSSize: {43.5, 16.5}
2013-07-30 00:43:10.801 test[651:207] ################################################ after bounds NSRect: {{0, 0}, {141, 37}}
2013-07-30 00:43:10.802 test[651:207] ################################################ after frame NSRect: {{-2827.25, -276.75}, {6133.5, 610.5}}



Zoom Out

2013-07-30 00:43:29.889 test[651:207] ------------------------------------------------ mini NSRect: {{265.5, 25.5}, {2, 2}}
2013-07-30 00:43:29.890 test[651:207] ------------------------------------------------ maxi NSRect: {{223, 10}, {87, 33}}
2013-07-30 00:43:29.890 test[651:207] Reduce
2013-07-30 00:43:29.891 test[651:207] ################################################ before bounds NSRect: {{0, 0}, {141, 37}}
2013-07-30 00:43:29.892 test[651:207] ################################################ before frame NSRect: {{-2827.25, -276.75}, {6133.5, 610.5}}
2013-07-30 00:43:29.892 test[651:207] scales NSSize: {0.022988506, 0.060606062}
2013-07-30 00:43:31.193 test[651:207] ################################################ after bounds NSRect: {{0, 0}, {141, 37}}
2013-07-30 00:43:31.194 test[651:207] ################################################ after frame NSRect: {{237.8793, 27.378788}, {3.2413793, 2.2424242}}

以下视觉效果:

放大后

缩小后

如果我试图强制这个代码只是avec mini和maxi rects的NSLog:

if (zoomIt) {
    self.buttonToZoom.bounds = CGRectMake(0, 0, deleteBtnMiniRect.size.width, deleteBtnMiniRect.size.height);
    self.buttonToZoom.center = CGRectFindCenter(deleteBtnMiniRect);
}
else {
    self.buttonToZoom.bounds = CGRectMake(0, 0, deleteBtnMaxiRect.size.width, deleteBtnMaxiRect.size.height);
    self.buttonToZoom.center = CGRectFindCenter(deleteBtnMaxiRect);
}

放大是可以的,但缩小(减少标签)确实很奇怪:

2013-07-30 01:11:19.988 test[1210:207] #########################################################################################
2013-07-30 01:11:19.990 test[1210:207] ------------------------------------------------ mini NSRect: {{265.5, 25.5}, {2, 2}}
2013-07-30 01:11:19.990 test[1210:207] ------------------------------------------------ maxi NSRect: {{223, 10}, {87, 33}}
2013-07-30 01:11:19.991 test[1210:207] Reduce
2013-07-30 01:11:19.991 test[1210:207] ################################################ before bounds NSRect: {{0, 0}, {87, 33}}
2013-07-30 01:11:19.992 test[1210:207] ################################################ before frame NSRect: {{223, 10}, {87, 33}}
2013-07-30 01:11:19.992 test[1210:207] scales NSSize: {0.022988506, 0.060606062}
2013-07-30 01:11:19.993 test[1210:207] ################################################ after bounds NSRect: {{0, 0}, {87, 33}}
2013-07-30 01:11:19.993 test[1210:207] ################################################ after frame NSRect: {{265.5, 25.5}, {2, 2}}
2013-07-30 01:11:21.730 test[1210:207] #########################################################################################
2013-07-30 01:11:21.730 test[1210:207] ------------------------------------------------ mini NSRect: {{265.5, 25.5}, {2, 2}}
2013-07-30 01:11:21.731 test[1210:207] ------------------------------------------------ maxi NSRect: {{223, 10}, {87, 33}}
2013-07-30 01:11:21.731 test[1210:207] Zoom
2013-07-30 01:11:21.732 test[1210:207] ################################################ before bounds NSRect: {{0, 0}, {2, 2}}
2013-07-30 01:11:21.733 test[1210:207] ################################################ before frame NSRect: {{266.47702, 26.439394}, {0.045977011, 0.12121212}}
2013-07-30 01:11:21.733 test[1210:207] scales NSSize: {43.5, 16.5}
2013-07-30 01:11:23.034 test[1210:207] ################################################ after bounds NSRect: {{0, 0}, {2, 2}}
2013-07-30 01:11:23.035 test[1210:207] ################################################ after frame NSRect: {{223, 10}, {87, 33}}
2013-07-30 01:11:24.858 test[1210:207] #########################################################################################
2013-07-30 01:11:24.858 test[1210:207] ------------------------------------------------ mini NSRect: {{265.5, 25.5}, {2, 2}}
2013-07-30 01:11:24.859 test[1210:207] ------------------------------------------------ maxi NSRect: {{223, 10}, {87, 33}}
2013-07-30 01:11:24.860 test[1210:207] Reduce
2013-07-30 01:11:24.860 test[1210:207] ################################################ before bounds NSRect: {{0, 0}, {87, 33}}
2013-07-30 01:11:24.860 test[1210:207] ################################################ before frame NSRect: {{-1625.75, -245.75}, {3784.5, 544.5}}
2013-07-30 01:11:24.861 test[1210:207] scales NSSize: {0.022988506, 0.060606062}
2013-07-30 01:11:26.162 test[1210:207] ################################################ after bounds NSRect: {{0, 0}, {87, 33}}
2013-07-30 01:11:26.163 test[1210:207] ################################################ after frame NSRect: {{265.5, 25.5}, {2, 2}}

问题

1. 为什么zoomin渲染会产生如此大的图像？它与87x33的预期矩形相差甚远.

2. 为什么按钮永远不会达到2,2尺寸？

3. 为什么边界永远不会改变并保持在xib中定义的原始按钮大小？

Answer 1

请使用UIView基于块的动画方法来执行此操作..

//for zoom in
[UIView animateWithDuration:0.5f animations:^{
    self.btn.transform = CGAffineTransformMakeScale(1.5, 1.5);
}];

// for zoom out
[UIView animateWithDuration:0.5f animations:^{
  self.btn.transform = CGAffineTransformMakeScale(1, 1);
}];