效果一
1、
参考映像笔记的第三方库：https://github.com/imwangxuesen/EvernoteAnimation
自定义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 
获取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大小
