ios - 如何在 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}}

以及以下视觉效果：

放大后

在此处输入图像描述

缩小后

在此处输入图像描述

如果我尝试强制执行此代码，则只需查看 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}}

问题

为什么 zoomin 渲染会给出这么大的图像？它与预期的 87x33 矩形相差甚远。
为什么按钮永远不会达到 2、2 的大小？
为什么边界永远不会改变并保持在 xib 中定义的原始按钮大小？

score 6 · Accepted Answer

请使用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);
}];

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

1 回答 1

Related

Reference