UITableView 显示动画与仿 Boss 点击动画

1 今天研究了 tableView 加载动画.其实仔细研究下, 也挺简单的在加载的时候我们需要在 tableView 的代理实现以下这个方法便可

//给tableView家动画
-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath{
    
    cell.layer.transform = CATransform3DMakeScale(0.1, 0.1, 1);
    //x和y的最终值为1
    [UIView animateWithDuration:0.5 animations:^{
        cell.layer.transform = CATransform3DMakeScale(1, 1, 1);
    }];
}

如此

QQ20180110-145145-HD.gif

2 下面试仿写 boss 直聘动画先看看效果.

QQ20180110-145614-HD.gif

具体实现代码如下
1 首先需要定义两个成员变量

@property (nonatomic, strong) UIView *bgView;// 阴影视图
@property (nonatomic, strong) UIView *tempView;//点击的时候的白色View

2 实例化 bgView

// 阴影视图
- (UIView *)bgView {
    if (nil == _bgView) {
        _bgView                                       = [[UIView alloc] initWithFrame:CGRectMake(0, 0, ScreenWidth, ScreenHeight)];
        _bgView.backgroundColor                       = [UIColor colorWithWhite:0 alpha:0.5];
    }
    return _bgView;
}

3 在didSelectRowAtIndexPath 下面实现以下代码

[tableView deselectRowAtIndexPath:indexPath animated:YES];
    ViewController *VC                              = [[ViewController alloc]init];
    //插入动画
    CGRect rectInTableView                          = [tableView rectForRowAtIndexPath:indexPath];
    CGRect sourceRect                               = [tableView convertRect:rectInTableView toView:[tableView superview]];
    UITableViewCell * selectedCell                  = (UITableViewCell *)[self tableView:tableView cellForRowAtIndexPath:indexPath];
    selectedCell.frame                              = sourceRect;
    selectedCell.backgroundColor                    = [UIColor whiteColor];
    [self.view addSubview:selectedCell];
    [self.view addSubview:self.bgView];
    [self.view bringSubviewToFront:selectedCell];
    self.tempView                                   = [[UIView alloc] initWithFrame:selectedCell.frame];
    self.tempView.backgroundColor                   = [UIColor whiteColor];
    self.tempView.alpha                             = 0;
    [self.view addSubview:self.tempView];
    // 进行动画
    [UIView animateWithDuration:0.3 animations:^{
        selectedCell.transform                      = CGAffineTransformMakeScale(1.0, 1.1);
        self.tempView.alpha                         = 1;
    }];
    
    double delayInSeconds                           = 0.3;
    __block YKShopListViewController* bself         = self;
    dispatch_time_t popTime                         = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(delayInSeconds * NSEC_PER_SEC));
    dispatch_after(popTime, dispatch_get_main_queue(), ^(void){
        [selectedCell removeFromSuperview];
        // 进行动画
        [UIView animateWithDuration:0.3 animations:^{
            bself.tempView.transform                = CGAffineTransformMakeScale(1.0, ScreenHeight / bself.tempView.frame.size.height * 2);
        }];
    });
    
    double delayInSeconds2 = 0.5;
    dispatch_time_t popTime2 = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(delayInSeconds2 * NSEC_PER_SEC));
    dispatch_after(popTime2, dispatch_get_main_queue(), ^(void){
        // 进行动画
        [UIView animateWithDuration:0.3 animations:^{
            [self.navigationController pushViewController:VC animated:NO];
        } completion:^(BOOL finished) {
            [bself.tempView removeFromSuperview];
            [bself.bgView removeFromSuperview];
        }];
    });

这样便可以了, 另外这个例子的 GitHub 地址 https://github.com/wyxlh/YukiFramework,里面包含了这个 demo 还包含了我写的一个框架网络请求,基类的封装等等....

UITableView 显示动画与仿 Boss 点击动画

推荐阅读更多精彩内容