前段時間學(xué)習(xí)了一下swift的基礎(chǔ)動畫示括,于是找了個TableViewcell的動畫項(xiàng)目來學(xué)習(xí)學(xué)習(xí)Folding cell
學(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
到此動畫就算基本完成了附上代碼