多个按钮弹出动画

前言

说到APP用户体验，就离不开动画。在这篇文章里，简单实现了点击一个按钮弹出多个按钮的动画，在此抛砖引玉，供大家参考。

思路

首先创建需要被弹出的多个按钮，然后创建点击弹出的POP按钮，将其覆盖在多个按钮之上，最后在POP按钮点击事件里边利用UIView动画和CABasicAnimation动画，就可以实现简单的弹出效果。

主要代码

创建UI,这里使用数组来装多个按钮，方便后面取用。

@interface ViewController ()
/**弹出按钮 */
@property (nonatomic,strong) UIButton  *popButton;
/**按钮数组*/
@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
{
    //循环创建按钮
    for (NSInteger i = 0; i<5; i++)
    {
        UIButton *button = [[UIButton alloc]initWithFrame:CGRectMake(self.view.centerX - 30,self.view.centerY - 30 + 180, 60, 60)];
        //标记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按钮点击事件中，根据按钮的选中状态来判断是弹出还是收回多个按钮。这里使用的适配，是自己写的一个UIView的分类，参考代码适配常用分类

/**
 按钮点击响应
 */
- (void)popAction:(UIButton *)button
{
    if (button.selected == NO)
    {
        //弹出
        [self show];
        button.selected = YES;
    }
    else
    {  
        //消失
        [self dismiss];
        button.selected = NO;
    }
}
复制代码

弹出多个按钮。这里需要注意的是，弹出按钮，只是一个动画效果，按钮本身的位置还是没有改变，需要我们在动画结束后，重新设置按钮的位置。

/**
 弹出
 */
- (void)show
{
    //旋转弹出按钮
    [UIView animateWithDuration:popTime animations:^{
       self.popButton.transform = CGAffineTransformMakeRotation(M_PI_2/2);
    }];
    
    //取出按钮，添加动画
    [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(_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];
        //缩放动画
        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];
        //等动画结束后，改变按钮真正位置
        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);
        });
    }];
}
复制代码

隐藏弹出的多个按钮

/**
 隐藏
 */
- (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);
        });
 
    }];
}
复制代码

效果图

Demo地址

ButtonPopAnimationDemo