效果一

1.gif

1、

参考映像笔记的第三方库：https://github.com/imwangxuesen/EvernoteAnimation

image

自定义UICollectionView的collectionViewLayout

layoutAttributesForElementsInRect 这个方法决定了UICollectionView的外观

可查看 EvernoteFlowLayout.m 文件实现
每次滑动时会触发这个方法:

• (nullable NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {

CGFloat offsetY = self.collectionView.contentOffset.y;//获取Y轴偏移

NSArray * attrArray = [super layoutAttributesForElementsInRect:rect];

//遍历所以元素的布局属性

for (UICollectionViewLayoutAttributes * attr in attrArray) {

//设置一个阻尼系数 ，根据UICollectionView的偏移，修改 元素的attr.frame.origin.y
...
}

return attrArray;//返回所有的元素的布局属性

}
这里实现了一半，滑动时候的阻尼效果，但是缺少一种延迟的弹簧效果
优化的点：

1 、设置的阻尼系数=10 （比较生硬），缺少了一个弹簧的衰减效果，通过偏移量，引入一个滑动速度，给速度一定的权重 来改变位置（应该需要多次尝试才能有合适的效果）。
2、 考虑用ios9以后系统的（CASpringAnimation）或者pop第三方的弹簧效果实现
pop支持4种动画，其中有弹簧POPSpringAnimation 和衰减效果POPDecayAnimation ![1KCG`QMOFT_GJ}S2QOGT)O.png

刚好衰减动画很符合，它最重要的参数就是velocity(速率)，通过拖拽uicollection来生成速率，然后影响动画速度，配合合适的衰减系数达到回弹效果

效果二

2.gif

获取tableView的可见cell 并赋予左移动画。
https://github.com/isandboy/SYAnimationCellDemo

[图片上传失败...(image-a3a23f-1530119335390)]

实现：TableViewController.m

import "TableViewController.h"

import "PlateTableViewCell.h"

@interface TableViewController () <UITableViewDataSource, UITableViewDelegate>

@property (weak, nonatomic) IBOutlet UITableView *tableView;
@property (nonatomic) BOOL hasLoaded;
@property (nonatomic) CGFloat duration;

@end

@implementation TableViewController

static NSString * const plateCellIdentifier = @"PlateTableViewCell";

• (void)viewDidLoad {
  [super viewDidLoad];
  self.title = @"Add to plate";
  self.duration = 0.8;
  self.tableView.rowHeight = 50;
  self.tableView.dataSource = self;
  [self.tableView registerNib:[UINib nibWithNibName:plateCellIdentifier bundle:[NSBundle bundleForClass:self.classForCoder]] forCellReuseIdentifier:plateCellIdentifier];

  dispatch_time_t delayTime = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.25/延迟执行时间/ * NSEC_PER_SEC));

  dispatch_after(delayTime, dispatch_get_main_queue(), ^{
  self.hasLoaded = YES;
  [self.tableView reloadData];
  [self animationTableView];
  });
  }

• (void)animationTableView {
  NSArray *visiableCells = self.tableView.visibleCells;
  for (PlateTableViewCell *cell in visiableCells) {
  NSInteger index = [visiableCells indexOfObject:cell];
  NSTimeInterval delay = (self.duration / visiableCells.count) * index;
  CGAffineTransform transform = CGAffineTransformMakeTranslation(cell.bounds.size.width, 0);
  cell.layer.affineTransform = transform;
  [UIView animateWithDuration:self.duration delay:delay options:UIViewAnimationOptionCurveEaseIn animations:^{
  cell.layer.affineTransform = CGAffineTransformIdentity;
  } completion:^(BOOL finished) {

    }]; 
  

}
}

• (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
  return self.hasLoaded ? 30 : 0;
  }

• (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
  PlateTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:plateCellIdentifier forIndexPath:indexPath];
  return cell;
  }

如果后面添加的cell也需要这种效果，那就在

• (void)tableView:(UITableView)tableView willDisplayCell:(UITableViewCell)cell
  forRowAtIndexPath:(NSIndexPath*)indexPath
  {
  }
  对cell进行同样的处理

---

拓展
1、效果图一 顶部view变化
自定义frontView ，监听scrollView 的滑动偏移量offset ,
在代理方法

• (void)scrollViewDidScroll:(UIScrollView *)scrollView{
  设置临界值 和偏移量比较
  }
  2、效果图二 cell的出场动画与离场动画
  CATransform3D 折纸效果
  CATransform3DRotate渐变
  CATransform3DTranslate移动
  CATransform3DScale大小