动画一

IMG_2445.GIF

写在前面的话

我个人感觉动画其实并不算难，但是也不算简单。因为有它的一些技巧。相比于面向对象的开发（百度搜，替换内容）这种可能是有一些难，因为它是过程式的，要完整写一份动画，需要费一分心思。

• 难度分析

我对这篇文章的定位来说，是给一个可能刚做界面的新人看，所以可能在结构拆分上有些多（繁琐），毕竟刚懂乘法口诀的人不可能很快的反应出16 * 16 = 256。但是同时，毕竟是在做动画，会淡化对语法，和一些基本类的使用说明。

• 动画拆分

这个应该算是基本功，也就是大象进冰箱的事。很多动画乍一看很酷炫，其实是有很多基本的动画组合而成的，即便是国外一些很优秀的app上的动画，也很少涉及复杂算法，基本高中的数学知识就足够了。
那我们具体说上面的这个动画，怎么拆。
从整体上来看，它有一个滚动的效果，可以用scrollView做，也可以考虑用collectionView,但是对于每一个item，我们观察到还有后续的动画，包括这种在切换的时候，主item,和侧边item的大小变化这种。
如果是单纯的轮播器那种，scrollView应该得心应手，但是这种不是说不可以，如果这样用scrollView的话，你需要自定义大量的东西，刚好collectionView是可以省很多的事（毕竟collectionView抽象出layout这种东西)，基于这样的考虑我们决定用collectionView实现这样滚动的效果。

• 实践

上面分析的需求确实是很简单，但是我们也要做的有模有样（考虑到后续的扩展）
我推荐刚开始是按照老三样来规规矩矩的先写。
譬如对于模型，我们可能只是单纯的放在Assets里面，但是也先独立出来。

+ (NSArray <CardModel *> *)cardModel {
 
    NSMutableArray *arrM = [NSMutableArray array];
    
    for (NSInteger i = 1; i <= 6; i++) {
        
        CardModel *model = [[CardModel alloc] init];
        model.cardPicName = [NSString stringWithFormat:@"%ld",(long)i];
        [arrM addObject:model];
    }
    
    return arrM.copy;
}

然后开始处理collectionView的东西。这里面需要考虑基于后续的复杂度，我们把collectionView放在UIView上进行处理（好像把UIView做控制器的意思，当然，它不是）

///collectionView视图
@property (nonatomic, strong) UICollectionView *collectionView;

///背景毛玻璃图片
@property (nonatomic, strong) UIImageView *bgView;

///模型数组
@property (nonatomic, strong) NSArray <CardModel *> *imageArray;

我们在初始化方法里面需要做的就是获取模型，初始UI

//初始化背景图并附加毛玻璃效果
    self.BgView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:self.imageArray[0].cardPicName]];
    UIBlurEffect *effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
    UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:effect];
    effectView.frame = self.BgView.bounds;
    [self.BgView addSubview:effectView];
    
    //初始化collectionView
    CardFlowLayout *layout = [[CardFlowLayout alloc] init];
    self.collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, ScreenWidth, ScreenHeight) collectionViewLayout:layout];
    self.collectionView.backgroundView = self.BgView;
    self.collectionView.dataSource = self;
    [self.collectionView registerClass:[CardCollectionViewCell class] forCellWithReuseIdentifier:CellId];
    [self addSubview:self.collectionView];

这上面有个需要说明的地方就是layout,如果你仅仅是简单的使用collectionView完成横/纵向排列这些简单的事情，完全可以把layout直接写在collectionView里面，而不需要单独的去继承，举凡是继承layout,我们通常是要实现

- (nullable NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect; // return an array layout attributes instances for all the views in the given rect
- (nullable UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath;
- (nullable UICollectionViewLayoutAttributes *)layoutAttributesForSupplementaryViewOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath;

类似这些UICollectionViewFlowLayout父类的方法或代理（他们有很强大的功能），所以我们决定单独的继承layout，当然，现在它里面只是堆本身属性的一些赋值

self.itemSize = CGSizeMake(ScreenWidth, ScreenHeight);
self.scrollDirection = UICollectionViewScrollDirectionHorizontal;   //水平方向
self.minimumLineSpacing = 0;

我在实验室的时候观察到很多人是很少用collectionView的，其实和tableView很相似的，我们也需要自定义一个cell。你可能看着那个卡片上划下划，还能点进去的酷炫的样子，我们先不考虑。为什么呢，因为动画是协同的，我们尽可能的希望它能在一个水平线上，进行同步进行，譬如我们的layout里面对于Item大小，就是上面谈到的主，侧item变化这种更前面的事还没有考虑，就不要着急去考虑这个cell内部的事情。所以可以事先的在里面放一个图片就好。

- (void)setupUI
{
    self.coverImageView = [[UIImageView alloc] init];
    //稍稍的精致一下（其实我是为了看collectionView后面那个蒙板）
    self.coverImageView.layer.cornerRadius = 8; //切个小圆角
    self.coverImageView.layer.masksToBounds = YES;
    self.coverImageView.frame = CGRectMake(0, 0, ScreenWidth, ScreenHeight);
    [self.contentView addSubview:self.coverImageView];
}

- (void)loadData:(NSString *)imageName
{
    self.coverImageView.image = [UIImage imageNamed:imageName];
}

这样在collection的dataSource里面对接一下就好

CardCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:CellId forIndexPath:indexPath];
[cell loadData:self.imageArray[indexPath.row].cardPicName];

我把这样定义为第一部分，很easy,手巧一点的新手也可以盲敲出来。(这是一个好习惯，都说程序员不看过程的，但是你自己做尽量还是对简单的事情可以做到手到擒来，这样后续的压力会小点），

Snip20180128_12.png

在下一篇要做的首先是优化代码结构，其次是完成卡片式的切换。