关闭

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

标签: springanimationiOS动画UIViewUITableVie
1502人阅读 评论(0) 收藏 举报
分类:

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

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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:34644次
    • 积分:633
    • 等级:
    • 排名:千里之外
    • 原创:28篇
    • 转载:8篇
    • 译文:0篇
    • 评论:2条
    关于博客
    学术浅薄,如有错误,请指出必改正。跪求好学术指点资源分享。如有好工作欢迎推荐!感激不尽!交流QQ:894566327

    如需转载,请注明出处。

    我的GitHub:https://github.com/DMDavid

    最新评论