前段時間學(xué)習(xí)了一下swift的基礎(chǔ)動畫示括，于是找了個TableViewcell的動畫項(xiàng)目來學(xué)習(xí)學(xué)習(xí)Folding cell

FoldingCell-sample.gif

學(xué)習(xí)的過程中遇到了一些坑蒸眠，在這里分享一下，給大家借鑒借鑒

UITableViewController

首先我剛看到這個動畫的時候峰伙，我先給這個動畫進(jìn)行了分解卵佛，在這個動畫開始前涉馅，應(yīng)該是先修改了cell 的高度缰猴，于是我先著手修改cell的高度

//定義了cell打開時和關(guān)閉時的高度
let openCellHeight: CGFloat = 505
let closeCellHeight: CGFloat = 180

//設(shè)置所有cell 的初始高度
var cellHeights: [CGFloat] = []
override func viewDidLoad() {
        super.viewDidLoad()
        cellHeights = Array(repeating: closeCellHeight, count: rowCount)

    }
override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return cellHeights[indexPath.row]
    }

//并在創(chuàng)建的 UITableViewController內(nèi)重寫didSelectorRowAt 方法
override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
       let cell = tableView.cellForRow(at: indexPath) as! TestTableViewCell
        
        let cellIsCollapsed = cellHeights[indexPath.row] == closeCellHeight
        if cellIsCollapsed {
            cellHeights[indexPath.row] = openCellHeight
        } else {
            cellHeights[indexPath.row] = closeCellHeight
        }
        tableView.reloadData()
    }

這時點(diǎn)擊cell會有高度的變化吗购，但是你會發(fā)現(xiàn)cell的高度變化是一瞬間的肄方，并不是慢慢變大,于是我查找了一下資料冰垄，發(fā)現(xiàn)使用tabelView.beginUpdates()和tabelView.endUpdates()來代替tableView.reloadData()實(shí)現(xiàn)cell高度漸變的效果，并且使用UIView.animate(withDuration: TimeInterval, animations: () -> Void)來設(shè)置了tabelViewcell高度變化的時間差

UIView.animate(withDuration: druation, delay: 0, options: .curveEaseIn, animations: { () -> Void in
            tableView.beginUpdates()
            tableView.endUpdates()
        }, completion: nil)

這時我們就能通過設(shè)置druation來控制cell高度變化的時間权她，但是虹茶，這時你會發(fā)現(xiàn)點(diǎn)擊cell 后整個cell會變成灰色逝薪，經(jīng)過查找后發(fā)現(xiàn)這是由cell的selectionStyle引起的，我們需要把cell.selectionStyle設(shè)置為UITableViewCellSelectionStyle.none或者在storybord的界面選擇cell后修改Selection為None蝴罪。

UITableTableCell

第一步董济，我們要實(shí)現(xiàn)點(diǎn)擊前和點(diǎn)擊后cell的view顯現(xiàn)兩個不同的View，我們需要在cell 內(nèi)的ContentView中創(chuàng)建兩個高度不同的View(這里我們把forgroundView設(shè)為cell關(guān)閉時的View要门，constrainView為cell 打開后的View)當(dāng)cell是對應(yīng)的高度時就設(shè)置該view的alphe為1虏肾，另一個著為0。在我們設(shè)置動畫之前欢搜，我們需要設(shè)置的forgroundView和constrainView的位置封豪，我的做法是在storyboard為兩個view 都設(shè)置了上左右和Height的約束，并把forgroundView和constrainView的Top約束連接到UITableTableCell里并設(shè)置它們的constant大小相同

    @IBOutlet weak var foreguoundTop: NSLayoutConstraint!
    @IBOutlet weak var constrainTop: NSLayoutConstraint!

constrainTop.constant = foreguoundTop.constant

第二步狂巢，我們先實(shí)現(xiàn)一個view能折疊翻轉(zhuǎn)撑毛，這時我就想起之前學(xué)習(xí)的CABasicAnimation的transform.rotation，于是我先試著在forgroundView延底部翻轉(zhuǎn)

animation1 = CABasicAnimation(keyPath: "transform.rotation.x")
        animation1.fromValue = 0
        animation1.toValue = -CGFloat.pi / 2.0
        animation1.duration = 0.13

forgroundView.layer.add(animation1, forKey: "forgroundView")

這時你能發(fā)現(xiàn)forgroundView是延中線翻轉(zhuǎn)的我們需要延底部的唧领，這時我們需要設(shè)置forgroudView的layer.anchorPoint藻雌，默認(rèn)的View的layer.anchorPoint都為CGPoint(x: 0.5, y: 0.5),這個是View的中心點(diǎn)，要讓forgroundView延底部轉(zhuǎn)斩个，我們需要設(shè)置layer.anchorPoint為CGPoint(x: 0.5, y: 1)胯杭，這時你發(fā)現(xiàn)forgroundView的確能延底部翻轉(zhuǎn)，但是你會發(fā)現(xiàn)修改layer.anchorPoint后forgroundView的位置發(fā)生了偏移受啥，往上偏移了半個forgroundView的高度做个，查閱資料后發(fā)現(xiàn)兩條公式：

frame.origin.x = position.x - anchorPoint.x * bounds.size.width 
frame.origin.y = position.y - anchorPoint.y * bounds.size.height

且position不受anchorPoint影響，所以當(dāng)我們修改View的anchorPoint時變化的就是frame.origin滚局，如果我們要不影響forgroundView的位置
我們需要先記錄forgroundView的frame居暖，修改完anchorPoint后再賦值forgroundView的frame

var imageFrame = forgroundView.frame
        forgroundView.layer.anchorPoint = CGPoint(x: 0.5, y: 1)
        forgroundView.frame = imageFrame

在這里我要分享一個我遇到的坑，當(dāng)初我設(shè)置animation和修改anchorPoint都是在cell的awakeFormNib()方法里藤肢，這里無論我怎么修改forgroundView的frame太闺，forgroun都不會有任何變化，后來查閱資料才發(fā)現(xiàn)嘁圈，原來awakeFormNib的調(diào)用是在ViewController創(chuàng)建之前就調(diào)用了省骂，這時獲取的View的frame都是不對的，所以無法重新賦值最住，所以我建議修改frame放在viewDidLayoutSubviews或之后的方法里
第三步
我們現(xiàn)在已經(jīng)可以在不移動forgroundView情況下翻轉(zhuǎn)forgroundView了钞澳，但是我們發(fā)現(xiàn)中間翻轉(zhuǎn)的時候是有白色的View的，這是需要創(chuàng)建的涨缚，這里我就把顯現(xiàn)的ImageViews和需要翻轉(zhuǎn)的animationViews分別創(chuàng)建轧粟，這時我們就需要獲取forgroundView和constainsView的視圖賦值給顯現(xiàn)的View

public extension UIView {
    func setSampleView(frame: CGRect) -> UIImage? {
        UIGraphicsBeginImageContextWithOptions(frame.size, false, 0)
        guard let context = UIGraphicsGetCurrentContext() else {
            print("fail")
            return nil
        }
        context.translateBy(x: frame.origin.x * -1   , y: frame.origin.y * -1 )
        layer.render(in: context)
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image
    }
}

這里我擴(kuò)展了UIView來獲取forgroundView和constainsView的視圖

let firstImage = constrainView.setSampleView(frame: CGRect(x: constrainView.bounds.minX, y: constrainView.bounds.minY, width: forgroundView.frame.width, height: forgroundView.frame.height))
        firstViewBg = UIImageView(image: firstImage)
        firstViewBg.frame = CGRect(x: constrainView.bounds.minX, y: constrainView.bounds.minY, width: forgroundView.frame.width, height: forgroundView.frame.height)

這樣我們就可以獲取以forgroundView和constrainView為圖片的ImageViews和animationViews
第四步
這時我們需要把動畫連接起來，我看了FoldingCell里它是通過設(shè)置動畫的beginTime使動畫連續(xù)起來，而我選擇使用animationDidStop()來使動畫連接起來逃延，這個方法的調(diào)用需要cell繼承CAAnimationDelegate
并且需要設(shè)置animatiom需要設(shè)置delegate和設(shè)置isRemoveOnCompletion為false

animation1.isRemovedOnCompletion = false
animation1.delegate = self

//上一個animation結(jié)束時就執(zhí)行下一個動畫
func animationDidStop(_ anim: CAAnimation, finished flag: Bool) {
        if anim == firstImageView.layer.animation(forKey: "firstImageView") {
            firstImageView.alpha = 0
            secondImageView.alpha = 1
            secondImagebgView.alpha = 1
            firstViewBg.layer.masksToBounds = false
            secondImageView.layer.add(animation2, forKey: "secondImageView")
        }
}

當(dāng)我們我們都設(shè)置好之后览妖，運(yùn)行起來之后我們會發(fā)現(xiàn)，我們的翻轉(zhuǎn)并沒有那種3D的立體感,這個我們需要設(shè)置layer.transform

var animationTransform = CATransform3DIdentity

animationTransform.m34 = -2.5 / 2000

firstImageView.layer.transform = animationTransform

CALayer中有一個transform屬性便是專門用來控制3D形變的,transform屬性默認(rèn)值為CATransform3DIdentity, 在CATransform3DIdentity結(jié)構(gòu)體中有一個m34允許我們將正交投影修改為有近大遠(yuǎn)小立體效果的透視投影,其中m34 = -1.0/z,這個z為觀察者與控件之間的距離, m34必須在賦值transform之前設(shè)置才會生效.
到此我們的動畫基本久已經(jīng)完成了揽祥，在此我想補(bǔ)充一點(diǎn)讽膏，可能我們做到這之后運(yùn)行起來可能會感覺View有時會有一種閃現(xiàn)的感覺，查找資料后拄丰，發(fā)現(xiàn)animation有個fillMode的屬性我們設(shè)置未kCAFillModeForwards后能解決該問題

animation1.fillMode = kCAFillModeForwards

到此動畫就算基本完成了附上代碼

總結(jié)

新手剛學(xué)府树，知識水平有限，如有錯誤之處料按，還望指出.