美文网首页暂时没看却需要看的技术重塑iOS开发
一行代码让你的TableView动起来-iOS动画

一行代码让你的TableView动起来-iOS动画

作者: alanwangmodify | 来源:发表于2017-09-07 18:24 被阅读2719次

前言

UITableView 是iOS日常开发中经常使用到的控件。tableView的普通展示效果比较生硬,为了提升APP的活力,提升体验,我们可以对根据tableView的特点,操作Cell实现一些动画效果。
我写了一个简单的动画集 TableViewAnimationKit,只需要一行代码就可以让tableView实现动画
目前有大概10个动画,后续会优化增加。
源码放到Github上: TableViewAnimationKit欢迎大家star、下载,交流沟通。

正文

一、效果展示:

二、使用方法

TableViewAnimationKit调用各个动画的方法都为类方法,只需一行代码就可以调用。
eg:

[TableViewAnimationKit shakeAnimationWithTableView:tableView];

TableViewAnimationKit提供的动画类方法

+ (void)moveAnimationWithTableView:(UITableView *)tableView;
+ (void)alphaAnimationWithTableView:(UITableView *)tableView;
+ (void)fallAnimationWithTableView:(UITableView *)tableView;
+ (void)shakeAnimationWithTableView:(UITableView *)tableView;
+ (void)overTurnAnimationWithTableView:(UITableView *)tableView;
+ (void)toTopAnimationWithTableView:(UITableView *)tableView;
+ (void)springListAnimationWithTableView:(UITableView *)tableView;
+ (void)shrinkToTopAnimationWithTableView:(UITableView *)tableView;
+ (void)layDonwAnimationWithTableView:(UITableView *)tableView;
+ (void)roteAnimationWithTableView:(UITableView *)tableView;

三、源码讲解

先举其中一个动画效果为例子:



动画效果为Cell左右各自插入。
实现代码很简单如下:

+ (void)shakeAnimationWithTableView:(UITableView *)tableView {
    
    NSArray *cells = tableView.visibleCells;
    for (int i = 0; i < cells.count; i++) {
        UITableViewCell *cell = [cells objectAtIndex:i];
        if (i%2 == 0) {
            cell.transform = CGAffineTransformMakeTranslation(-XS_SCREEN_WIDTH,0);
        }else {
            cell.transform = CGAffineTransformMakeTranslation(XS_SCREEN_WIDTH,0);
        }
        [UIView animateWithDuration:0.4 delay:i*0.03 usingSpringWithDamping:0.75 initialSpringVelocity:1/0.75 options:0 animations:^{
            cell.transform = CGAffineTransformIdentity;
        } completion:^(BOOL finished) {
            
        }];
    }
}

主要思路为:
获得tableview的visibleCells数组,进行遍历,对每个执行动画,不同cell的执行时间、方向有所差异,一起构成整个动画。

四、其他一些动画效果





后语

源码放到Github上: TableViewAnimationKit有需要的同学可以下载、star,目前只算Demo级别,后面会继续优化、增加动画。如有什么想法,欢迎进行技术交流。

相关文章

网友评论

  • 走停2015_iOS开发:我只是想做第一次展示cell列表的动画,并且也是在刷新之后添加动画 但是为啥先出现cell 然后cell才做动画
    走停2015_iOS开发:我明白了 但是还有一个问题 貌似你的枚举和类里面的方法没有对应
  • Barbie526:上拉加载新数据后, 怎么能让新的cell执行动画. 之前的不执行呢?
  • 浮桥小麦:楼主,有个很疑惑的地方,您这种动画是试用于那种只是第一次展示cell列表的动画,我觉得是很好的。 但是我不用楼主的框架,只是简单的在willDisplayCell中添加了动画代码,出现是没问题,但是一旦上下滑动,就是灾难,我不知道楼主是在哪里做了处理的???:sob:
    浮桥小麦:@alanwangmodify 可以了,谢谢,:clap:
    浮桥小麦:@alanwangmodify 感谢,我明天试试
    alanwangmodify:@浮桥小麦 你在每个Cell的model里加个flag,flag==1的时候做动画,flag==0的时候不做动画,做完动画flag赋值为0, 保证每个cell只执行一次动画
  • 71dbb76c4f96:同等collectionview的版本:grin:
  • 雨影:很不错,赞一个
  • SR2k:哈哈已 Star!
    坐等 NSCollectionView 版(逃
  • 84279416e1ea:很棒,加油
  • 5ec1da87f063:很不错,请问是不是在willDisplayCell里面加入动画效果来实现的.
    felix6:willDisplayCell 里面加的话会有问题, 每次滑动出现新的visibleCell时都会出现动效
    felix6:@薇薇卿 并不是 看代码是在reloadData之后添加动画
    Mr卿:应该是的 不然会在那儿
  • 十一岁的加重:不错,挺实用的,收藏备用
    alanwangmodify:@十一岁的加重 :smile::smile:

本文标题:一行代码让你的TableView动起来-iOS动画

本文链接:https://www.haomeiwen.com/subject/erwejxtx.html