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

【问题标题】：How to smoothly zoom in and zoom out an UIButton in iOS如何在 iOS 中平滑放大和缩小 UIButton
【发布时间】：2013-07-29 19:20:03
【问题描述】：

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

  • 要重现该问题，只需制作一个简单的项目，其中包含一个包含 2 UIButtons 的 xib：一个要缩放，另一个要激活缩放方法。

  • 要缩放的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}}

问题

  1. 为什么 zoomin 渲染会给出这么大的图像？它与预期的 87x33 矩形相差甚远。

  2. 为什么按钮永远不会达到 2、2 的大小？

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

【问题讨论】：

  • 你使用老式动画代码而不是 UIView 动画块有什么原因吗？
  • @Jsdodgers：不，没有理由，除了快速编写示例。

标签： ios uiview uibutton zooming cgaffinetransform


【解决方案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);
}];

【讨论】：

    猜你喜欢
    • 1970-01-01
    • 2023-03-15
    • 1970-01-01
    • 2019-02-10
    • 2019-08-08
    • 2012-02-19
    • 2019-01-15
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode