前段時間學習了一下swift的基礎動畫，于是找了個TableViewcell的動畫項目來學習學習Folding cell
學習的過程中遇到了一些坑，在這里分享一下，給大家借鑒借鑒
UITableViewController
首先我剛看到這個動畫的時候，我先給這個動畫進行了分解，在這個動畫開始前，應該是先修改了cell 的高度，于是我先著手修改cell的高度
//定義了cell打開時和關閉時的高度
let openCellHeight: CGFloat = 505
let closeCellHeight: CGFloat = 180
//設置所有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內重寫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()
}
這時點擊cell會有高度的變化，但是你會發(fā)現(xiàn)cell的高度變化是一瞬間的，并不是慢慢變大,于是我查找了一下資料，發(fā)現(xiàn)使用tabelView.beginUpdates()和tabelView.endUpdates()來代替tableView.reloadData()實現(xiàn)cell高度漸變的效果，并且使用UIView.animate(withDuration: TimeInterval, animations: () -> Void)來設置了tabelViewcell高度變化的時間差
UIView.animate(withDuration: druation, delay: 0, options: .curveEaseIn, animations: { () -> Void in
tableView.beginUpdates()
tableView.endUpdates()
}, completion: nil)
這時我們就能通過設置druation來控制cell高度變化的時間，但是，這時你會發(fā)現(xiàn)點擊cell 后整個cell會變成灰色，經過查找后發(fā)現(xiàn)這是由cell的selectionStyle引起的，我們需要把cell.selectionStyle設置為UITableViewCellSelectionStyle.none或者在storybord的界面選擇cell后修改Selection為None。
UITableTableCell
第一步，我們要實現(xiàn)點擊前和點擊后cell的view顯現(xiàn)兩個不同的View，我們需要在cell 內的ContentView中創(chuàng)建兩個高度不同的View(這里我們把forgroundView設為cell關閉時的View，constrainView為cell 打開后的View)當cell是對應的高度時就設置該view的alphe為1，另一個著為0。在我們設置動畫之前，我們需要設置的forgroundView和constrainView的位置，我的做法是在storyboard為兩個view 都設置了上左右和Height的約束，并把forgroundView和constrainView的Top約束連接到UITableTableCell里并設置它們的constant大小相同
@IBOutlet weak var foreguoundTop: NSLayoutConstraint!
@IBOutlet weak var constrainTop: NSLayoutConstraint!
constrainTop.constant = foreguoundTop.constant
第二步，我們先實現(xiàn)一個view能折疊翻轉，這時我就想起之前學習的CABasicAnimation的transform.rotation，于是我先試著在forgroundView延底部翻轉
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是延中線翻轉的我們需要延底部的，這時我們需要設置forgroudView的layer.anchorPoint，默認的View的layer.anchorPoint都為CGPoint(x: 0.5, y: 0.5),這個是View的中心點，要讓forgroundView延底部轉，我們需要設置layer.anchorPoint為CGPoint(x: 0.5, y: 1)，這時你發(fā)現(xiàn)forgroundView的確能延底部翻轉，但是你會發(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影響，所以當我們修改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
在這里我要分享一個我遇到的坑，當初我設置animation和修改anchorPoint都是在cell的awakeFormNib()方法里，這里無論我怎么修改forgroundView的frame，forgroun都不會有任何變化，后來查閱資料才發(fā)現(xiàn)，原來awakeFormNib的調用是在ViewController創(chuàng)建之前就調用了，這時獲取的View的frame都是不對的，所以無法重新賦值，所以我建議修改frame放在viewDidLayoutSubviews或之后的方法里
第三步
我們現(xiàn)在已經可以在不移動forgroundView情況下翻轉forgroundView了，但是我們發(fā)現(xiàn)中間翻轉的時候是有白色的View的，這是需要創(chuàng)建的，這里我就把顯現(xiàn)的ImageViews和需要翻轉的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
}
}
這里我擴展了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里它是通過設置動畫的beginTime使動畫連續(xù)起來，而我選擇使用animationDidStop()來使動畫連接起來，這個方法的調用需要cell繼承CAAnimationDelegate
并且需要設置animatiom需要設置delegate和設置isRemoveOnCompletion為false
animation1.isRemovedOnCompletion = false
animation1.delegate = self
//上一個animation結束時就執(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")
}
}
當我們我們都設置好之后，運行起來之后我們會發(fā)現(xiàn)，我們的翻轉并沒有那種3D的立體感,這個我們需要設置layer.transform
var animationTransform = CATransform3DIdentity
animationTransform.m34 = -2.5 / 2000
firstImageView.layer.transform = animationTransform
CALayer中有一個transform屬性便是專門用來控制3D形變的,transform屬性默認值為CATransform3DIdentity, 在CATransform3DIdentity結構體中有一個m34允許我們將正交投影修改為有近大遠小立體效果的透視投影,其中m34 = -1.0/z,這個z為觀察者與控件之間的距離, m34必須在賦值transform之前設置才會生效.
到此我們的動畫基本久已經完成了，在此我想補充一點，可能我們做到這之后運行起來可能會感覺View有時會有一種閃現(xiàn)的感覺，查找資料后，發(fā)現(xiàn)animation有個fillMode的屬性我們設置未kCAFillModeForwards后能解決該問題
animation1.fillMode = kCAFillModeForwards
到此動畫就算基本完成了附上代碼
