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

前言

UITableView 是iOS日常开发中经常使用到的控件。tableView的普通展示效果比较生硬,为了提升APP的活力,提升体验,我们可以对根据tableView的特点,操作Cell实现一些动画效果。

我写了一个简单的动画集 TableViewAnimationKit,只需要一行代码就可以让tableView实现动画

目前有大概10个动画,后续会优化增加。

源码放到Github上: TableViewAnimationKit欢迎大家star下载,交流沟通。

正文

一、效果展示:

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

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

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

二、使用方法

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;

三、源码讲解

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

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

动画效果为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的执行时间、方向有所差异,一起构成整个动画。

四、其他一些动画效果

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

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

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

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

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

后语

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

  • 作者:alanwangmodify

  • 链接:http://www.jianshu.com/p/2dc3c9e0ca3e

  • 來源:简书

  • 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

本站部分文章源于互联网,本着传播知识、有益学习和研究的目的进行的转载,为网友免费提供。如有著作权人或出版方提出异议,本站将立即删除。如果您对文章转载有任何疑问请告之我们,以便我们及时纠正。

PS:推荐一个微信公众号: askHarries 或者qq群:474807195,里面会分享一些资深架构师录制的视频录像:有Spring,MyBatis,Netty源码分析,高并发、高性能、分布式、微服务架构的原理,JVM性能优化这些成为架构师必备的知识体系。还能领取免费的学习资源,目前受益良多

转载请注明原文出处:Harries Blog™ » 一行代码让你的TableView动起来-iOS动画

赞 (0)
分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址