让你的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 有些相似。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值