UIButton案例之添加动画

本文主要是介绍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{// 获取原始frameCGRect 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
这是一种函数调用的简写方式

这篇关于UIButton案例之添加动画的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---