效果一

1.gif

1、

參考映像筆記的第三方庫(kù)：https://github.com/imwangxuesen/EvernoteAnimation

image

自定義UICollectionView的collectionViewLayout

layoutAttributesForElementsInRect 這個(gè)方法決定了UICollectionView的外觀

可查看 EvernoteFlowLayout.m 文件實(shí)現(xiàn)
每次滑動(dòng)時(shí)會(huì)觸發(fā)這個(gè)方法:

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

CGFloat offsetY = self.collectionView.contentOffset.y;//獲取Y軸偏移

NSArray * attrArray = [super layoutAttributesForElementsInRect:rect];

//遍歷所以元素的布局屬性

for (UICollectionViewLayoutAttributes * attr in attrArray) {

//設(shè)置一個(gè)阻尼系數(shù) ，根據(jù)UICollectionView的偏移，修改 元素的attr.frame.origin.y
...
}

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

}
這里實(shí)現(xiàn)了一半，滑動(dòng)時(shí)候的阻尼效果，但是缺少一種延遲的彈簧效果
優(yōu)化的點(diǎn)：

1 、設(shè)置的阻尼系數(shù)=10 （比較生硬），缺少了一個(gè)彈簧的衰減效果，通過(guò)偏移量，引入一個(gè)滑動(dòng)速度，給速度一定的權(quán)重 來(lái)改變位置（應(yīng)該需要多次嘗試才能有合適的效果）。
2、 考慮用ios9以后系統(tǒng)的（CASpringAnimation）或者pop第三方的彈簧效果實(shí)現(xiàn)
pop支持4種動(dòng)畫，其中有彈簧POPSpringAnimation 和衰減效果POPDecayAnimation ![1KCG`QMOFT_GJ}S2QOGT)O.png

剛好衰減動(dòng)畫很符合，它最重要的參數(shù)就是velocity(速率)，通過(guò)拖拽uicollection來(lái)生成速率，然后影響動(dòng)畫速度，配合合適的衰減系數(shù)達(dá)到回彈效果

效果二

2.gif

獲取tableView的可見cell 并賦予左移動(dòng)畫。
https://github.com/isandboy/SYAnimationCellDemo

[圖片上傳失敗...(image-a3a23f-1530119335390)]

實(shí)現(xiàn)：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/延遲執(zhí)行時(shí)間/ * 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
  {
  }
  對(duì)cell進(jìn)行同樣的處理

拓展
1、效果圖一 頂部view變化
自定義frontView ，監(jiān)聽scrollView 的滑動(dòng)偏移量offset ,
在代理方法

• (void)scrollViewDidScroll:(UIScrollView *)scrollView{
  設(shè)置臨界值 和偏移量比較
  }
  2、效果圖二 cell的出場(chǎng)動(dòng)畫與離場(chǎng)動(dòng)畫
  CATransform3D 折紙效果
  CATransform3DRotate漸變
  CATransform3DTranslate移動(dòng)
  CATransform3DScale大小