swift TableViewCell折疊動畫

前段時間學(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é)府树,知識水平有限,如有錯誤之處料按,還望指出.

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末奄侠,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子载矿,更是在濱河造成了極大的恐慌垄潮,老刑警劉巖,帶你破解...
    沈念sama閱讀 223,002評論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件闷盔,死亡現(xiàn)場離奇詭異弯洗,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)逢勾,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評論 3 400
  • 文/潘曉璐 我一進(jìn)店門牡整,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人溺拱,你說我怎么就攤上這事逃贝。” “怎么了迫摔?”我有些...
    開封第一講書人閱讀 169,787評論 0 365
  • 文/不壞的土叔 我叫張陵沐扳,是天一觀的道長。 經(jīng)常有香客問我句占,道長迫皱,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,237評論 1 300
  • 正文 為了忘掉前任辖众,我火速辦了婚禮,結(jié)果婚禮上和敬,老公的妹妹穿的比我還像新娘凹炸。我一直安慰自己,他們只是感情好昼弟,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,237評論 6 398
  • 文/花漫 我一把揭開白布啤它。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪变骡。 梳的紋絲不亂的頭發(fā)上离赫,一...
    開封第一講書人閱讀 52,821評論 1 314
  • 那天,我揣著相機(jī)與錄音塌碌,去河邊找鬼渊胸。 笑死,一個胖子當(dāng)著我的面吹牛台妆,可吹牛的內(nèi)容都是我干的翎猛。 我是一名探鬼主播,決...
    沈念sama閱讀 41,236評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼接剩,長吁一口氣:“原來是場噩夢啊……” “哼切厘!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起懊缺,我...
    開封第一講書人閱讀 40,196評論 0 277
  • 序言:老撾萬榮一對情侶失蹤疫稿,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后鹃两,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體遗座,經(jīng)...
    沈念sama閱讀 46,716評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,794評論 3 343
  • 正文 我和宋清朗相戀三年怔毛,在試婚紗的時候發(fā)現(xiàn)自己被綠了员萍。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,928評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡拣度,死狀恐怖碎绎,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情抗果,我是刑警寧澤筋帖,帶...
    沈念sama閱讀 36,583評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站冤馏,受9級特大地震影響日麸,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜逮光,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,264評論 3 336
  • 文/蒙蒙 一代箭、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧涕刚,春花似錦嗡综、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽察净。三九已至,卻和暖如春盼樟,著一層夾襖步出監(jiān)牢的瞬間氢卡,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評論 1 274
  • 我被黑心中介騙來泰國打工晨缴, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留译秦,地道東北人。 一個月前我還...
    沈念sama閱讀 49,378評論 3 379
  • 正文 我出身青樓喜庞,卻偏偏與公主長得像诀浪,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子延都,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,937評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 1 CALayer IOS SDK詳解之CALayer(一) http://doc.okbase.net/Hell...
    Kevin_Junbaozi閱讀 5,161評論 3 23
  • 在iOS中隨處都可以看到絢麗的動畫效果雷猪,實(shí)現(xiàn)這些動畫的過程并不復(fù)雜,今天將帶大家一窺ios動畫全貌晰房。在這里你可以看...
    每天刷兩次牙閱讀 8,517評論 6 30
  • 在iOS中隨處都可以看到絢麗的動畫效果求摇,實(shí)現(xiàn)這些動畫的過程并不復(fù)雜,今天將帶大家一窺iOS動畫全貌殊者。在這里你可以看...
    F麥子閱讀 5,119評論 5 13
  • 在iOS實(shí)際開發(fā)中常用的動畫無非是以下四種:UIView動畫与境,核心動畫,幀動畫猖吴,自定義轉(zhuǎn)場動畫摔刁。 1.UIView...
    請叫我周小帥閱讀 3,117評論 1 23
  • Core Animation Core Animation,中文翻譯為核心動畫海蔽,它是一組非常強(qiáng)大的動畫處理API共屈,...
    45b645c5912e閱讀 3,034評論 0 21