UIButton案例之添加动画

需求

基于上一节代码进行精简，降低了冗余性。添加动画，使得坐标变化自然，同时使用了bounds属性和center属性，使得UIView变化以中心点为基准。
此外，使用两种方式添加动画：1.原始方式。 2.block方式。

代码实现

@interface UIButtonTest1 : UIView

@property(strong, nonatomic) UIButton *btn;
@property(strong, nonatomic) UIButton *btn1;
@property(strong, nonatomic) UIButton *btn2;
@property(strong, nonatomic) UIButton *btn3;
@property(strong, nonatomic) UIButton *btn4;
@property(strong, nonatomic) UIButton *btn5;
@property(strong, nonatomic) UIButton *btn6;

@end

#import "UIButtonTest1.h"

@implementation UIButtonTest1

-(instancetype) initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    // 视图中有个按钮，按钮点击了没反应？GPT4实现一下
    if(self){
        _btn = [[UIButton alloc] initWithFrame:CGRectMake(50, 100, 200, 200)];
        [_btn setTitle:@"点击前" forState:UIControlStateNormal];
        // 文字设置
        [_btn setTitleColor:[UIColor blackColor]  forState:UIControlStateNormal];
        // bgImage
        [_btn setBackgroundImage:[UIImage imageNamed:@"1.jpg"] forState:UIControlStateNormal];
        // 动画：绑定函数，点击事件，在btn上调用，加到self上
        [_btn addTarget:self action:@selector(btnClicked) forControlEvents:UIControlEventTouchUpInside];
        
        /// btn1~6 初始化和设置大小
        _btn1 = [[UIButton alloc] initWithFrame:CGRectMake(80, 350, 50, 50)];
        _btn2 = [[UIButton alloc] initWithFrame:CGRectMake(80, 400, 50, 50)];
        _btn3 = [[UIButton alloc] initWithFrame:CGRectMake(30, 400, 50, 50)];
        _btn4 = [[UIButton alloc] initWithFrame:CGRectMake(130, 400, 50, 50)];
        _btn5 = [[UIButton alloc] initWithFrame:CGRectMake(200, 349, 49, 49)];
        _btn6 = [[UIButton alloc] initWithFrame:CGRectMake(200, 402, 49, 49)];
        
        /// 设置背景图片
        [_btn1 setBackgroundImage:[UIImage imageNamed:@"shang.jpg"] forState:UIControlStateNormal];
        [_btn2 setBackgroundImage:[UIImage imageNamed:@"xia.jpg"] forState:UIControlStateNormal];
        [_btn3 setBackgroundImage:[UIImage imageNamed:@"zuo.jpg"] forState:UIControlStateNormal];
        [_btn4 setBackgroundImage:[UIImage imageNamed:@"you.jpg"] forState:UIControlStateNormal];
        [_btn5 setBackgroundImage:[UIImage imageNamed:@"jia.jpg"] forState:UIControlStateNormal];
        [_btn6 setBackgroundImage:[UIImage imageNamed:@"jian.jpg"] forState:UIControlStateNormal];
        
        // 设置不同tag以区分不同按钮
        _btn1.tag = 1;
        _btn2.tag = 2;
        _btn3.tag = 3;
        _btn4.tag = 4;
        _btn5.tag = 5;
        _btn6.tag = 6;
        
        /// 绑定函数：按钮的反应函数都绑定到同一个函数上
        /// 有参数这里要加：吗
//        [_btn1 addTarget:self action:@selector(btn1Clicked:) forControlEvents:UIControlEventTouchUpInside];
//        [_btn2 addTarget:self action:@selector(btn1Clicked:) forControlEvents:UIControlEventTouchUpInside];
//        [_btn3 addTarget:self action:@selector(btn1Clicked:) forControlEvents:UIControlEventTouchUpInside];
//        [_btn4 addTarget:self action:@selector(btn1Clicked:) forControlEvents:UIControlEventTouchUpInside];
//        [_btn5 addTarget:self action:@selector(btn1Clicked:) forControlEvents:UIControlEventTouchUpInside];
//        [_btn6 addTarget:self action:@selector(btn1Clicked:) forControlEvents:UIControlEventTouchUpInside];
//        
        
        // 绑定第二种
        [_btn1 addTarget:self action:@selector(btn2Clicked:) forControlEvents:UIControlEventTouchUpInside];
        [_btn2 addTarget:self action:@selector(btn2Clicked:) forControlEvents:UIControlEventTouchUpInside];
        [_btn3 addTarget:self action:@selector(btn2Clicked:) forControlEvents:UIControlEventTouchUpInside];
        [_btn4 addTarget:self action:@selector(btn2Clicked:) forControlEvents:UIControlEventTouchUpInside];
        [_btn5 addTarget:self action:@selector(btn2Clicked:) forControlEvents:UIControlEventTouchUpInside];
        [_btn6 addTarget:self action:@selector(btn2Clicked:) forControlEvents:UIControlEventTouchUpInside];
        
        // 初始化btn2、btn3、btn4、btn5
        // 本身是view，需要添加组件进去
        [self addSubview:_btn];
        [self addSubview:_btn1];
        [self addSubview:_btn2];
        [self addSubview:_btn3];
        [self addSubview:_btn4];
        [self addSubview:_btn5];
        [self addSubview:_btn6];
    }
    return self;
}

// 带图片的按钮点击后的变化
// 点击后重新设置title、bgImage
- (void)btnClicked{
    // 点击前后
    static BOOL isClicked = NO;
    if(isClicked){
        [_btn setTitle:@"点击前" forState:UIControlStateNormal];
        [_btn setBackgroundImage:[UIImage imageNamed:@"1.jpg"] forState:UIControlStateNormal];
    }
    else{
        // 状态常识不同样式：hightlight，可设置
        [_btn setTitle:@"点击后" forState:UIControlStateNormal];
        [_btn setBackgroundImage:[UIImage imageNamed:@"2.jpg"] forState:UIControlStateNormal];
    }
    isClicked = !isClicked;
}

// 增加动画：以原始坐标变化
- (void)btn1Clicked:(UIButton *)sender{
    // 获取原始frame
    CGRect originalFrame = self.btn.frame;
    switch (sender.tag) {
        case 1:
            originalFrame.origin.y -= 100;
            break;
        case 2:
            originalFrame.origin.y += 100;
            break;
        case 3:
            originalFrame.origin.x -= 100;
            break;
        case 4:
            originalFrame.origin.x += 100;
            break;
        case 5:
            originalFrame.size.width += 100;
            originalFrame.size.height += 100;
            break;
        case 6:
            originalFrame.size.width -= 100;
            originalFrame.size.height -= 100;
            break;
        }
    // ==== 改：动画 ====
    // 开启
    [UIView beginAnimations:nil context:nil];
    // 设置动画时间
    [UIView setAnimationDuration:2];
    // 要执行的动画
    self.btn.frame = originalFrame;
    [UIView commitAnimations];
    // 发现就是在frame变化的前后增加动画开启、设置动画时长和关闭设置
}

// 增加动画：以中心点变化
// center：更改放大缩小，移动看不出的
- (void)btn2Clicked:(UIButton *)sender{
    // 获取原始frame:中心变化center用这个
    CGPoint centerPoint = self.btn.center;
    CGRect originBounds = self.btn.bounds;
    switch (sender.tag) {
        case 1:
            centerPoint.y -= 100;
            break;
        case 2:
            centerPoint.y += 100;
            break;
        case 3:
            centerPoint.x -= 100;
            break;
        case 4:
            centerPoint.x += 100;
            break;
        case 5:
            originBounds.size.width += 100;
            originBounds.size.height += 100;
            break;
        case 6:
            originBounds.size.width -= 100;
            originBounds.size.height -= 100;
            break;
    }
    // ==== 改：动画 ====
    // 开启
    [UIView beginAnimations:nil context:nil];
    // 设置动画时间
    [UIView setAnimationDuration:2];
    // 要执行的动画
    self.btn.center = centerPoint;
    self.btn.bounds = originBounds;
    [UIView commitAnimations];
    // 发现就是在frame变化的前后增加动画开启、设置动画时长和关闭设置
}

@end

其实点击后的按钮变化可以通过设置普通状态和高亮状态来做切换，以上代码是按监听后状态变化来实现的

1. 将各事件响应函数封装到了一起，需要利用tag属性。
2. @selector()绑定函数时，如果有参数，需要加冒号，如果没有参数，直接加名字即可。
3. center和bounds的初始化类和frame不同，要注意

以上为头尾式实现添加动画，下面使用block方式添加动画。

使用block方式实现动画

// 使用block方式
[UIView animateWithDuration:1.0 animations:^{
        self.btn.frame = originalFrame;
}]

复习OC的block
这是一种函数调用的简写方式