两种效果

效果一


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大小

推荐阅读更多精彩内容