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

标签 ios uiview uibutton zooming cgaffinetransform

我在缩放一个简单的 UIButton 时遇到了一个大问题。

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

  • 要缩放的UIButton是一个自定义按钮，里面有一些简单的文本和背景图像。

然后使用以下代码:

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

以及以下视觉效果:

放大后

enter image description here

缩小后

enter image description here

如果我尝试强制执行此代码，只需保存 mini 和 maxi 矩形的 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. 为什么放大渲染会给出这么大的图像？它与 87x33 预期的矩形相差甚远。

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

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

最佳答案

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

//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，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17932432/

上一篇：ios - 在 'empty' 数组的特定索引处插入对象

下一篇：ios - 如何以编程方式设置 UINavigationbar 的背景颜色？

相关文章：

ios - 在 UITableView Swift 的所有部分上方添加 UIView

ios - 具有 Spring 效果的旋转动画

ios - 通过短信发送 iOS 应用程序的表单

ios - 在 TableView 单元格中查找 UIView 的 x 位置

ios - 遇到更改框架大小后重新加载 View 的问题

ios - 如果我向下滚动或不向下滚动，我会在 UIScrollView 中获得与 UIButton 相同的位置

ios - 禁用的自定义 UIButton 在不同的地方显示不同的图像

swift - 创建具有动态字体大小的 UIButton，但在 UIStackView 中共享相同的字体大小

iOS HTTP Live Streaming - 当比特率未知时请求的字节范围？

ios - 有没有办法将所有导航栏后退按钮的标题全局更改为 "Back"

©2024 IT工具网  联系我们