让你的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 一个小小的弹性动画CASpringAnimation

现在在很多项目中为了使视觉上有更好的体验效果,通常会加入一些动画,比如在半糖App中的晒照片和晒文字的功能显示,就应用了一个简单的弹性动画,运行的效果是这样的: 也不多说了,直接上代码:let sp...

iOS usingSpringWithDamping动画

Spring Animation 是一种特殊的动画曲线,自从 iOS 7 开始被广泛应用在系统动画中。 上图中演示的系统自带的动画效果,都使用了 Spring Animation 事实上,从 iO...

非常简单的几行代码实现炫酷的tableview cell动画

在任何有cell先出现在屏幕上的时候都会有这么一个效果,非常的流畅,也非常有意思(忍不住不停地把玩。。)。实现起来也非常简单,iOS原生支持,几行代码就可以搞定,在众多的tableview代理方法中,...

一个简单带动画效果tableview弹窗菜单

正好做到这么一个需要弹窗选择的tableview菜单,分享下代码如下: MRTablePopView类 .h #import //用于返回所选项 typedef void(^Activ...

ios中开发在cell上实现内容的动画滑动效果

1、使用到UitAbleView中的内容的显示,所以我们应该熟悉内容的显示方式和代理的方法来实现选择的关系。 2、自动以cell的方法的写法,可以使用storyBoard以及xib来进行实现自定义的方...

ios tableView滑动动画

今天就分享给大家一个比较实用的

什么??同事悄悄学了SpringAnimation,实现了弹性动画!!!

Android开发利用SpringAnimation实现弹性动画    在最近更新的25.3.0的支持库中,新更新了一个叫做DynamicAnimation(动力学动画??)的类,其中他有一个子类叫做...

iOS9 CASpringAnimation 弹簧动画详解

CASpringAnimation iOS9才引入的动画类,它继承于CABaseAnimation,用于制作弹簧动画

给TableView或者CollectionView的cell添加简单动画

只要在willDisplayCell方法中对将要显示的cell做动画即可: - (void)tableView:(UITableView *)tableView willDispla...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:让你的tableView动起来 —— iOS8 SpringAnimation应用
举报原因:
原因补充:

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