[个性化你的App]iOS:实现类似于google+的tableviewcell卡片式插入效果

经常可以看到一些主流的应用都使用了很漂亮的动画效果,这必然可以给用户更好的体验.如果我们的应用只使用cocoa框架自带的那些效果, 如何能在appstore众多的应用里脱颖而出呢? 上一次我写了如何实现人人的动态调整的导航栏和雅虎天气的全透明导航栏, 这次就来说说google+.

Google+是我非常喜欢的一款应用, 其UI设计和各种增加用户体验的动画效果(比如卡片式的cell插入, 以及动态滚动的用户评论) 都让我忍不住连点32个赞,下面就来说说怎样实现卡片式的cell插入效果

思路: tableview有一个代理方法:

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath

顾名思义这个代理方法会在cell出现之前调用. 所有,我们可以在这个方法里调整cell.contentView的frame. 你可以使用各种仿射变化调整contentView的位置. 然后再使用

[UIViewanimateWithDuration:0.7animations:^()]  在这个animation块里面把contentView的位置复原.

下面就以我做的一个应用为例, 先来看一下cell的布局:

实现动画的代理方法

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath{    if (![self.indexSet containsObject:indexPath]) {        [self.indexSet addObject:indexPath];        UIView *mainView = cell.contentView;        mainView.transform = CGAffineTransformMakeRotation(-M_PI_2 / 3);        mainView.transform = CGAffineTransformTranslate(mainView.transform, -500, 200);        mainView.alpha = 0.5;        [UIView animateWithDuration:0.7 animations:^{            mainView.transform = CGAffineTransformIdentity;            mainView.alpha = 1;        }];    }}

这里我先检查当前的这个cell是不是已经出现过的cell, 使用一个NSSet记录已经出现过的cell

@property (strong, nonatomic) NSMutableSet *indexSet;

如果还没出现过, 就开始执行动画,并把这个index插入上述集合中. 上面的两个transform确定了cell的初始位置, 先逆时针旋转15度, 再向左移500个点,向下移200个点. 当然你也可以做任何你能想象出来的动画只需要改变这里的transform即可. 然后我再把初始的透明度改为0.5, 以便产生一种透明度渐变的效果.  

在animation块里, 使用CGAffineTransformIdentity(单位矩阵)把cell的位置复原, 并把透明度改为1.

运行效果如下图所示: