iOS学习-按钮布局移动动画

在某些特定场景中触发某个事件，页面上的button或者label的布局会发生变化，比如三个按钮变成两个按钮，如果不加入动画，页面转换会变得十分生硬。动画效果如下所示

1. 首先声明宏

#define kWidth [UIScreen mainScreen].bounds.size.width
#define kHeight [UIScreen mainScreen].bounds.size.height

2. 添加下方三个圆形按钮

- (void)addCircleView {
    int count = 3;
    for (int i = 0; i < count; i++) {
        int space = (kWidth - count * 50) / (count + 1);
        int leftSpace = space * (i + 1) + 50 * i;
        UIButton *circleBtn = [[UIButton alloc] init];
        circleBtn.tag = i;
        circleBtn.frame = CGRectMake(leftSpace, kHeight - 150, 50, 50);
        circleBtn.backgroundColor = [UIColor orangeColor];
        circleBtn.layer.cornerRadius = 25;
        circleBtn.layer.masksToBounds = YES;
        [circleBtn setTitle:[NSString stringWithFormat:@"%d", i + 1] forState:UIControlStateNormal];
        [self.view addSubview:circleBtn];
        [circleBtn addTarget:self action:@selector(clickBtn) forControlEvents:UIControlEventTouchUpInside];
        _isBecomeTwoBtn = NO;
    }
}

3. 点击中间按钮，reload页面

- (void)reloadBtn {
//    [_btn.layer addAnimation:[self shakeAnimation] forKey:nil];
    
    int count = 0;
    //设置按钮的数量，是否变成了2个按钮
    if (!_isBecomeTwoBtn) {
        count = 2;
    } else {
        count = 3;
    }
    //获取按钮
    for (UIView *view in self.view.subviews) {
        if ([view isKindOfClass:[UIButton class]] && view.tag != -1) {
            int space = (kWidth - count * 50) / (count + 1);
            int leftSpace = space * ((int)view.tag + 1) + 50 * (int)view.tag;
            //增加按钮的动画,修改按钮的frame
            [UIView animateWithDuration:0.5 animations:^{
                view.frame = CGRectMake(leftSpace, kHeight - 150, 50, 50);
                //隐藏第三个按钮
                if (count == 2 && view.tag == 2) {
                    view.alpha = 0;
                } else {
                    view.alpha = 1;
                }
            }];
        }
    }
    _isBecomeTwoBtn = !_isBecomeTwoBtn;
}

4. 调用方法

    //创建中间按钮
    _btn = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 50, 50)];
    _btn.center = self.view.center;
    _btn.backgroundColor = [UIColor redColor];
    _btn.layer.cornerRadius = 25;
    _btn.layer.masksToBounds = YES;
    _btn.tag = -1;
    [self.view addSubview:_btn];
    //按钮点击，reload页面
    [_btn addTarget:self action:@selector(reloadBtn) forControlEvents:UIControlEventTouchUpInside];
    //添加下方圆形按钮
    [self addCircleView];

项目地址在这里