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

原创 2015年07月08日 14:01:34

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

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

iOS实现TableView中Cell出现时弹出动画

非常简单的几行代码实现炫酷的tableview cell动画
  • Cloudox_
  • Cloudox_
  • 2016年04月25日 19:36
  • 7627

[iOS]在tableview中用动画效果改变cell的高度

使用动画改编UITableView中某个cell的高度
  • sinat_21181563
  • sinat_21181563
  • 2015年02月13日 18:39
  • 3846

iOS点击TableView的cell显示弹出动画

类似豌豆荚一览的点击列表cell进入详情界面的帅气动画
  • Cloudox_
  • Cloudox_
  • 2016年04月27日 17:24
  • 6730

Netjava Lesson8 多线程——让小球动起来

上课内容:多线程   在讲线程之前,我们先来谈谈进程。在我接触电脑的一段时间后,开始发现当打开任务管理器后,会有一个进程的显示,下面的映像名称里有很多的可执行文件。这些可执行文件有的是系统...
  • yztezhl
  • yztezhl
  • 2013年08月01日 13:32
  • 719

【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记37 TableView Delegate

上一话介绍了tableView的datasource,本话来介绍另一个重要的部分delegate。 当我们点击一个cell的时候,如何跳转到另外一个mvc中呢? 像增加其他segue一样,点击ce...
  • cg1991130
  • cg1991130
  • 2015年07月19日 22:21
  • 1182

iOS 8 Tableview根据AutoLayout自动调整高度

原创Blog,转载请注明出处 blog.csdn.net/hello_hwc前言:在iOS 8之前,如果要让Tableview根据内容自动调整大小的话,需要动态的去计算每个cell的高度。太尼玛操蛋...
  • Hello_Hwc
  • Hello_Hwc
  • 2015年05月08日 12:09
  • 4381

[置顶] IOS8,使用storyBoard对tableView的自适应

很多人都知道,在以前对tableview的cell进行自适应时,都要先根据字符串的length然后计算tableView-RowHeight的高度,那么现在iOS8推出了一个新方法就可以解决。具体可看...
  • mingenlong
  • mingenlong
  • 2016年07月05日 08:57
  • 1193

关于iOS8适配时产生的tableView分割线问题

在app之前版本适配i
  • sinat_21181563
  • sinat_21181563
  • 2014年09月23日 14:45
  • 1050

ios8 tableView设置滑动删除时显示多个按钮

tableView:editActionsForRowAtIndexPath: // 设置滑动删除时显示多个按钮 UITableViewRowAction ...
  • u013375945
  • u013375945
  • 2015年02月02日 14:21
  • 91

iOS8之后tableView cell自动计算高度

在APP中tableView是我们最常用的控件之一,难免会遇到动态计算cell高度,之前我们都是手动计算cell高度然后付值,如: 这个就不多说。今天我们就说一下cell的新特性: ...
  • LG_sun
  • LG_sun
  • 2015年12月15日 16:25
  • 435
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:让你的tableView动起来 —— iOS8 SpringAnimation应用
举报原因:
原因补充:

(最多只允许输入30个字)