让你的tableView动起来 —— iOS8 SpringAnimation应用

你是否对一成不变的手机界面感到疲倦，整天拖拉控件面对死板的界面失去兴趣。让你的界面动起来或许是不错的选择。

Spring Animation 是一种特殊的动画曲线，自从 iOS 7 开始被广泛应用在系统动画中。
但是iOS8 才公布API让开发者使用，重要的是他不同于以前Ease-Out Animation 和 Linear Animation这些单调的运动曲线，让物体更加富有弹性。产生令人惊奇的效果。

来介绍下我们tableView使用的动画API：

+ (void)animateWithDuration:(NSTimeInterval)duration
                      delay:(NSTimeInterval)delay
     usingSpringWithDamping:(CGFloat)dampingRatio
      initialSpringVelocity:(CGFloat)velocity
                    options:(UIViewAnimationOptions)options
                 animations:(void (^)(void))animations
                 completion:(void (^)(BOOL finished))completion

关于这个方法的详情，请看这里，上面介绍的很详细了。

让我们先看下效果：

相比于原始的tablview是不是耳目一新？！

接下来我们就开始分析下如何实现：
1. 首先我们要获取到所有的cell 对象，
2. 然后将它们的位置放在屏幕的最下面，
3. 然后我们定义一个动画的延迟时间，
4. 最后利用循环依次给cell加上动画，每个cell 的动画延迟为 delay * i

开始撸代码：

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    return 99;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    static NSString *ID = @"cell";
    UITableViewCell *cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID];
    if (cell == nil) {
        cell = [tableView dequeueReusableCellWithIdentifier:ID];
    }
    cell.textLabel.text = [NSString stringWithFormat:@"this is %d",indexPath.row];
    return cell;
}

tableview代理，没什么好说的。继续撸。。
在viewDidLoad方法里面，重写加载tableview数据

- (void)viewDidLoad{
    [self.tableView reloadData];
    self.cellArray = self.tableView.visibleCells;

    //  延迟
    CGFloat delay =0.05;
    for (UITableViewCell *cell in self.cellArray) {
        cell.transform = CGAffineTransformMakeTranslation(0, self.view.bounds.size.height);
    }

    for (int i = 0; i<self.cellArray.count; i++) {
        UITableViewCell *cell = self.cellArray[i];
        CGFloat cellDelay = delay *i;

        [UIView animateWithDuration:1.0 delay:cellDelay usingSpringWithDamping:0.5 initialSpringVelocity:10 options:UIViewAnimationOptionCurveEaseIn animations:^{
            cell.transform = CGAffineTransformMakeTranslation(0, 0);
        } completion:^(BOOL finished) {

        }];
    }
}

总结：
同样你希望cell从左边右边或者上边过来都是OK的，取决于你的爱好。
代码事例：

    for (UITableViewCell *cell in self.cellArray) {
    cell.transform =  CGAffineTransformMakeTranslation(self.view.bounds.size.width, 0);
}

效果：

代码下载：https://github.com/DMDavid/tabelViewCellAnimation

这个隐式动画方法相比于以前Ease-Out Animation 和 Linear Animation运动曲线的动画更加柔和，用户体验更加流畅。和伟大的FaceBook POP 动画中的SpringAnimation 有些相似。