前言
說到APP用戶體驗(yàn)，就離不開動(dòng)畫纤垂。在這篇文章里矾策，簡(jiǎn)單實(shí)現(xiàn)了點(diǎn)擊一個(gè)按鈕彈出多個(gè)按鈕的動(dòng)畫，在此拋磚引玉峭沦，供大家參考贾虽。
思路
首先創(chuàng)建需要被彈出的多個(gè)按鈕，然后創(chuàng)建點(diǎn)擊彈出的POP按鈕吼鱼，將其覆蓋在多個(gè)按鈕之上蓬豁，最后在POP按鈕點(diǎn)擊事件里邊利用UIView動(dòng)畫和CABasicAnimation動(dòng)畫，就可以實(shí)現(xiàn)簡(jiǎn)單的彈出效果菇肃。
按鈕層次結(jié)構(gòu)圖.png
主要代碼
創(chuàng)建UI,這里使用數(shù)組來裝多個(gè)按鈕地粪，方便后面取用。
@interface ViewController ()
/**彈出按鈕 */
@property (nonatomic,strong) UIButton *popButton;
/**按鈕數(shù)組*/
@property (nonatomic,strong) NSMutableArray *buttonArray;
@end
@implementation ViewController
- (UIButton *) popButton
{
if (_popButton == nil)
{
_popButton = [[UIButton alloc]initWithFrame:CGRectMake(self.view.centerX - 30, self.view.centerY - 30 + 180, 60, 60)];
[self.view addSubview:_popButton];
[_popButton addTarget:self action:@selector(popAction:) forControlEvents:UIControlEventTouchUpInside];
}
return _popButton;
}
- (NSMutableArray *) buttonArray
{
if (_buttonArray==nil)
{
_buttonArray=[[NSMutableArray alloc]init];
}
return _buttonArray;
}
- (void)viewDidLoad {
[super viewDidLoad];
//注意順序
[self initUI];
self.popButton.backgroundColor = [UIColor grayColor];
}
- (void)initUI
{
//循環(huán)創(chuàng)建按鈕
for (NSInteger i = 0; i<5; i++)
{
UIButton *button = [[UIButton alloc]initWithFrame:CGRectMake(self.view.centerX - 30,self.view.centerY - 30 + 180, 60, 60)];
//標(biāo)記tag
button.tag = 100+i;
button.backgroundColor = [UIColor orangeColor];
NSString *string = [NSString stringWithFormat:@"%ld",i];
[button setTitle:string forState:UIControlStateNormal];
button.layer.cornerRadius = 30;
[button addTarget:self action:@selector(action:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:button];
[self.buttonArray addObject:button];
}
}
在POP按鈕點(diǎn)擊事件中巷送，根據(jù)按鈕的選中狀態(tài)來判斷是彈出還是收回多個(gè)按鈕驶忌。這里使用的適配，是自己寫的一個(gè)UIView的分類，參考代碼適配常用分類
/**
按鈕點(diǎn)擊響應(yīng)
*/
- (void)popAction:(UIButton *)button
{
if (button.selected == NO)
{
//彈出
[self show];
button.selected = YES;
}
else
{
//消失
[self dismiss];
button.selected = NO;
}
}
彈出多個(gè)按鈕付魔。這里需要注意的是聊品，彈出按鈕，只是一個(gè)動(dòng)畫效果几苍，按鈕本身的位置還是沒有改變翻屈，需要我們?cè)趧?dòng)畫結(jié)束后，重新設(shè)置按鈕的位置妻坝。
/**
彈出
*/
- (void)show
{
//旋轉(zhuǎn)彈出按鈕
[UIView animateWithDuration:popTime animations:^{
self.popButton.transform = CGAffineTransformMakeRotation(M_PI_2/2);
}];
//取出按鈕伸眶，添加動(dòng)畫
[self.buttonArray enumerateObjectsUsingBlock:^(id _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
//位移動(dòng)畫
UIButton *button = self.buttonArray[idx];
CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@"position"];
anima.fromValue = [NSValue valueWithCGPoint:CGPointMake(_popButton.centerX, _popButton.centerY)];
anima.toValue = [NSValue valueWithCGPoint:CGPointMake(self.view.centerX, self.view.centerY + 80 * idx - 250)];
anima.duration = popTime;
anima.fillMode = kCAFillModeForwards;
anima.removedOnCompletion = NO;
anima.beginTime = CACurrentMediaTime() + 0.02 * idx;
[button.layer addAnimation:anima forKey:nil];
//縮放動(dòng)畫
CABasicAnimation *scaleAnima = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
scaleAnima.duration = popTime;
scaleAnima.fromValue = @0;
scaleAnima.toValue = @1;
scaleAnima.fillMode = kCAFillModeForwards ;
scaleAnima.removedOnCompletion = NO ;
scaleAnima.beginTime = CACurrentMediaTime() + 0.02 * idx;
[button.layer addAnimation:scaleAnima forKey:nil];
//等動(dòng)畫結(jié)束后，改變按鈕真正位置
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(popTime * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
button.center = CGPointMake(self.view.centerX, self.view.centerY + 80 * idx - 250);
});
}];
}
隱藏彈出的多個(gè)按鈕
/**
隱藏
*/
- (void)dismiss
{
[UIView animateWithDuration:popTime animations:^{
self.popButton.transform = CGAffineTransformMakeRotation(0);
}];
[self.buttonArray enumerateObjectsUsingBlock:^(id _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
UIButton *button = self.buttonArray[idx];
CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@"position"];
anima.fromValue = [NSValue valueWithCGPoint:CGPointMake(self.view.centerX, self.view.centerY + 80 * idx - 250)];
anima.toValue = [NSValue valueWithCGPoint:CGPointMake(_popButton.centerX, _popButton.centerY)];
anima.duration = popTime;
anima.fillMode = kCAFillModeForwards;
anima.removedOnCompletion = NO;
anima.beginTime = CACurrentMediaTime() + 0.02 * (4 - idx);
[button.layer addAnimation:anima forKey:nil];
CABasicAnimation *scaleAnima = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
scaleAnima.duration = popTime;
scaleAnima.fromValue = @1;
scaleAnima.toValue = @0;
scaleAnima.fillMode = kCAFillModeForwards ;
scaleAnima.removedOnCompletion = NO ;
scaleAnima.beginTime = CACurrentMediaTime() + 0.02 * (4 - idx);
[button.layer addAnimation:scaleAnima forKey:nil];
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(popTime * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
button.center = CGPointMake(_popButton.centerX, _popButton.centerY);
});
}];
}
效果圖
效果圖.gif
