用递归算法实现iOS补位动画

用递归算法实现iOS补位动画

前言

写这个动画，主要是为了运用递归算法。

需求如下:

• 点击任一个方块，在它之后的方块都向前移动进行补位。

效果如下：

demo.gif

实现思路：
1.创建的方块数要比展示的方块多一个。
2.将被点击的方块的Frame赋给它之后的方块
3.如果被点击的方块之后的方块之后，还有方块，那就把它之后的方块的Frame再赋给它之后的方块的之后的方块。🙂（这样描述晕不晕？）
4.知道最后一个之后在没有方块。

示例：

点击0号方块，1、2、3号方块会自动向前移位。
规律在与步骤2、3。

动画代码：

- (void)action:(UIButton *)button {
    button.hidden = YES;
    [UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionTransitionCrossDissolve animations:^{
        [self changeFrame:button];
        button.alpha = 0;
    } completion:^(BOOL finished) {
        button.frame = self.rightFrames.lastObject.CGRectValue;
        button.hidden = NO;
        [self reloadTagAndFrame:button];
        [UIView animateWithDuration:0.5 animations:^{
            button.alpha = 1;
        }];
    }];
}

动画效果使用的UIView的UIViewAnimationOptionTransitionCrossDissolve。

核心在于Frame的改变，代码如下：

- (void)changeFrame:(UIButton *)button {
    [self frameChange:button tag:button.tag];
}
// 递归更改Frame
- (void)frameChange:(UIButton *)button tag:(NSInteger)tag {
    if (tag == 0) {
        tag++;
    }
    self.rightBtns[tag].frame = self.rightFrames[tag - 1].CGRectValue;
    if (tag < 3 && tag >= 1) {
        tag++;
        [self frameChange:self.rightBtns[tag] tag:tag];
    }
}

其他逻辑注意：

• 当点击的是第一个时，无需将它前一个的Frame赋值给它，开始从第二个修改Frame即可，递归直到修改到最后一个跳出递归即可。
• 需要使用两个数组分别保存所创建的方块的Frame值和方块。
• 在动画结束之后，把被点击的那个方块的Frame修改为最后一个方块的Frame，同时，被点击的方块在数组中的顺序也需要被移动到最后。

Demo地址