最終效果

day20.gif

時間過得挺快的！一下子就寫到了Day20了

在開始之前先了解一個東西：
guard：guard 語句，類似于 if 語句，基于布爾值表達式來執行語句。使用 guard 語句來要求一個條件必須是真才能執行 guard 之后的語句。與 if 語句不同， guard 語句總是有一個 else 分句—— else 分句里的代碼會在條件不為真的時候執行。

代碼說明：
    var name : String? = "小明"
    
    func printName(){
//        if (name != nil) {
//            NSLog(@"%@",name);
//        }else{
//            print("名字都沒有，你搞什么呢")
//        }
        
        // Swift1
//        if name != nil {
//            print(name)
//        }
//        else{
//            print("名字都沒有，你搞什么呢？")
//        }
        
        // Swift2
//        if let xiaoming = name {
//            print(xiaoming)
//        }
//        else{
//            print("名字都沒有，你搞什么呢？")
//        }
        
        // guard - 單個參數，單個條件
        // 結果是輸出小明
//        guard let xiaoming = name else {
//            print("名字都沒有，你搞什么呢？")
//            return
//        }
//        
//        print(xiaoming)
//        
//        // guard - 單個參數，多個條件
//        //結果是輸出 名字都沒有，你搞什么呢？
//        guard let xiaoming1 = name where name == "小2明" else {
//            print("名字都沒有，你搞什么呢？")
//            return
//        }
//        print(xiaoming1)
        
        // guard - 多個參數
        //結果 小紅、小明 這里參數必須都滿足，否則就會執行 else {... return}
        let hong : String? = "小紅"
        guard let xiaohong = hong , xiaoming2 = name else {
            print("調價不滿足")
            return
        }
        
        print(xiaohong)
        print(xiaoming2)
    }
   

<br />
在了解了上面的知識后，就開始完成這個效果吧

1、UI布局

之前很多次都是使用了storyboard，這次使用代碼
<br />
1.1 先創建一個collectionview

var collectionView: UICollectionView! = {
        let flowLayout = UICollectionViewFlowLayout()
        flowLayout.itemSize = CGSize(width: UIScreen.mainScreen().bounds.width, height: 260 )
        let coll = UICollectionView(frame: UIScreen.mainScreen().bounds, collectionViewLayout: flowLayout)
        coll.contentInset = UIEdgeInsets(top: 20, left: 0, bottom: 0, right: 0)
        return coll
    }()

<br />

1.2 使用xib創建Cell

填入名字，創建XIB

<br />
1.3 設置Xib內容

設置如下效果

到這里位置，UI部分已經完成了，接下來就是代碼實現

<br />

2、代碼實現

2.1 創建一個模型，加載圖片 類名：AnimationCellModel

import UIKit

struct AnimationCellModel {
    
    let imagePath :String
    
    init(imagePath : String?){
        self.imagePath = imagePath ?? ""
    }
    
}

<br />
2.2 創建一個數組，加載模型 類名：AnimationImageCollection

import UIKit

struct AnimationImageCollection {
    private let imagePaths = ["1","2","3","4","5"]
    var images : [AnimationCellModel]
    
    init(){
        images = imagePaths.map { AnimationCellModel(imagePath: $0) }
    }
}

<br />
2.3 在剛才創建的cell中把背景圖片，和button，拖入到文件中，實現下面方法，都有注釋

import UIKit

class AnimationCollectionViewCell: UICollectionViewCell {
    
    @IBOutlet weak var backButton: UIButton!
    @IBOutlet weak var textLabel: UILabel!
    @IBOutlet weak var backImage: UIImageView!
    
    
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    
    /// 定義一個閉包
    var backButtonTapped : (() -> ())?
    
    func prepareCell(viewModel : AnimationCellModel){
        // 設置背景圖片
        backImage.image = UIImage(named: viewModel.imagePath)
        // 設置按鈕默認隱藏
        backButton.hidden = true
        // 為按鈕添加點擊事件
        addTapEventHandler()
    }
    
    // 當選中cell的時候調用方法
    func handleCellSelected() -> Void {
        backButton.hidden = false
        self.superview?.bringSubviewToFront(self)
    }
    
    // 按鈕的點擊事件
    private func addTapEventHandler(){
        backButton.addTarget(self, action: #selector(AnimationCollectionViewCell.backButtonClick), forControlEvents: .TouchUpInside)
    }
    
    @objc private func backButtonClick(){
        
        guard let back = backButtonTapped else {
            print("閉包是空的")
            return
        }
        
        back()
        
        // if 的寫法
        /*
         if let back = backButtonTapped{
         back()
         }
         else{
         print("閉包是空的")
         }
         */
    }
}

<br />
<br />
2.4 通過上面的方法，我們已經設置了好數據源，并且設置好了cell，接下來把collectionview加載到ViewController中，然后在設置代理，實現代理，監聽點擊，然后開始動畫

//
//  ViewController.swift
//  CollectionViewAnimation
//
//  Created by ios on 16/9/27.
//  Copyright ? 2016年 ios. All rights reserved.
//

import UIKit

// MARK: - category方法
extension Array {
    //判斷是否在下標區間內，在就返回值 否則返回空
    func safeIndex(i: Int) -> Element? {
        return i < self.count && i >= 0 ? self[i] : nil
    }
}

//Xib
private struct Storyboard{
    static let CellIdentifier = String(AnimationCollectionViewCell)
    static let NibName = String(AnimationCollectionViewCell)
}

//動畫
private struct Constans {
    static let Duration : Double = 0.5
    static let Delay : Double = 0.0
    static let SpringDamping : CGFloat = 1.0
    static let SpringVelocity : CGFloat = 1.0
}

class ViewController: UIViewController ,UICollectionViewDelegate,UICollectionViewDataSource{
    //數據源
    private var imageCollection = AnimationImageCollection()
    
    //懶加載collectionview
    private lazy var collectionView: UICollectionView! = {
        let flowLayout = UICollectionViewFlowLayout()
        flowLayout.itemSize = CGSize(width: UIScreen.mainScreen().bounds.width, height: 260 )
        let coll = UICollectionView(frame: UIScreen.mainScreen().bounds, collectionViewLayout: flowLayout)
        coll.contentInset = UIEdgeInsets(top: 20, left: 0, bottom: 0, right: 0)
        return coll
    }()
    
    // 加載CollectionView
    override func viewDidLoad() {
        super.viewDidLoad()
        //register 提前注冊
        collectionView.registerNib(UINib(nibName: Storyboard.NibName, bundle: nil), forCellWithReuseIdentifier: Storyboard.CellIdentifier)
        
        //設置代理
        collectionView.delegate = self
        collectionView.dataSource = self
        
        //加載View
        view.addSubview(collectionView)
    }
    
    // 設置系統狀態欄樣式
    override func preferredStatusBarStyle() -> UIStatusBarStyle {
        return .LightContent
    }

}

// MARK: - 這里是Collectionview的代理 Datasource delegate
extension ViewController{

    // 返回有多少個cell
    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return imageCollection.images.count ?? 0
    }
    
    // 設置每個cell的樣式
    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        //這里要滿足兩個條件
        guard let cell = collectionView.dequeueReusableCellWithReuseIdentifier(Storyboard.CellIdentifier, forIndexPath: indexPath) as? AnimationCollectionViewCell, viewModel = imageCollection.images.safeIndex(indexPath.row) else {
            return UICollectionViewCell()
        }
        
        cell.prepareCell(viewModel)
        
        return cell
    }
    
    // cell 被點擊是調用
    func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
        
        guard let cell = collectionView.cellForItemAtIndexPath(indexPath) as? AnimationCollectionViewCell else{
            print("拿不到Cell")
            return
        }
        
        //調用動畫方法
        cellAnimationWith(cell, collectionView: collectionView)
    }
    
    private func cellAnimationWith(cell : AnimationCollectionViewCell,collectionView : UICollectionView){
        // 設置為選中狀態
        cell.handleCellSelected()
        
        //保存閉包代碼
        cell.backButtonTapped = {
            guard let indexPaths = self.collectionView.indexPathsForSelectedItems() else{
                return
            }
            collectionView.scrollEnabled  = true
            collectionView.reloadItemsAtIndexPaths(indexPaths)
        }
        // 設置動畫
        let animation : () -> () = {
            //設置大小
            cell.frame = collectionView.bounds
        }
        
        //動畫結束又可以滑動了
        let completion : (fnished : Bool) -> () = { _ in
            collectionView.scrollEnabled = false
        }
        //開始動畫
        UIView.animateWithDuration(Constans.Duration, delay: Constans.Delay, usingSpringWithDamping: Constans.SpringDamping, initialSpringVelocity: Constans.SpringVelocity, options: [], animations: animation, completion: completion)
    }
    
}

本文Demo - CollectionViewAnimation