iOS開(kāi)發(fā)-模仿AppStore中的各種動(dòng)畫


AppStore這個(gè)軟件是我們蘋果用戶經(jīng)常用到的康二,我在demo中對(duì)它進(jìn)行了模仿楣导,項(xiàng)目的地址是這里蝌衔。

本文是想講解一下項(xiàng)目中我覺(jué)得不錯(cuò)的效果闰歪,主要包括下面三部分:

一.Today中的應(yīng)用卡片嚎研,打開(kāi)和關(guān)閉的效果。
Overview1.gif
二.游戲App的詳情中库倘,上下滑動(dòng)中漸變的導(dǎo)航欄和頂部視圖,橫滑展示的列表
Overview2.gif
三.更新列表中临扮,點(diǎn)擊某一項(xiàng)的更多论矾,cell刷新
Overview3.gif

具體實(shí)現(xiàn):


一、卡片打開(kāi)和收起:
  • 打開(kāi):從Today的列表中點(diǎn)擊某一個(gè)cell杆勇,然后present出詳情頁(yè)面贪壳。

  • 關(guān)閉:從詳情頁(yè)面點(diǎn)擊關(guān)閉按鈕,或者按住屏幕下滑蚜退,關(guān)閉詳情頁(yè)面闰靴。

整個(gè)動(dòng)畫過(guò)程是在TodayViewControllerCardDetailViewController中完成的。

這里的打開(kāi)和關(guān)閉都屬于自定義轉(zhuǎn)場(chǎng)動(dòng)畫钻注,因此首頁(yè)的一點(diǎn)是詳情頁(yè)面要遵循代理UIViewControllerTransitioningDelegate

picture1.png

這里TodayAnimationTransition是定義轉(zhuǎn)場(chǎng)動(dòng)畫的效果具體是如何實(shí)現(xiàn)的传黄,CardPresentationController是轉(zhuǎn)場(chǎng)發(fā)生時(shí)的背景,也就是在詳情頁(yè)面下拉時(shí)队寇,看到的高斯模糊效果膘掰。

下面來(lái)看看其中的具體是如何present的。這一部分實(shí)現(xiàn)是在TodayAnimationTransition.swift中佳遣。

picture2.png

這里分為3個(gè)部分:

  • 先通過(guò)transitionContext獲得轉(zhuǎn)場(chǎng)動(dòng)畫的中需要的元素

  • 設(shè)置動(dòng)畫開(kāi)始時(shí)识埋,控制器的size,也就是列表中卡片的大小

  • 動(dòng)畫結(jié)束時(shí),控制器的size撐滿屏幕零渐,卡片的size也隨之變大

dismiss的部分原理類似窒舟,不過(guò)多了一個(gè)下拉關(guān)閉的手勢(shì)。

這個(gè)動(dòng)畫里還包含了很多細(xì)節(jié)诵盼,包括:

  • 狀態(tài)欄和底部導(dǎo)航欄的隱藏和顯示惠豺。

  • 按住卡片時(shí),卡片縮小风宁,松開(kāi)時(shí)洁墙,跳轉(zhuǎn)到詳情頁(yè)面

具體細(xì)節(jié)可以到代碼中查看。


二戒财、游戲詳情中的動(dòng)畫

1.上下滑動(dòng)漸變的導(dǎo)航欄和頂部視圖,對(duì)應(yīng)的控制器是DetailViewController热监。

  • 首先自定義navigationBar。對(duì)應(yīng)的類是DetailNavigationView

  • 然后基于全屏的滑動(dòng)效果饮寞,我們將所有內(nèi)容都放到一個(gè)tableView里孝扛。

  • 設(shè)置頂部圖片為tableView的tableHeaderView。

  • 最后在tableView滑動(dòng)時(shí)幽崩,按比例改變navigationBar的透明度苦始,返回按鈕的顏色,以及tableHeaderView的大小慌申。

因?yàn)橥瑫r(shí)涉及到大小陌选,透明度,顏色的變化,這里的運(yùn)算會(huì)稍微復(fù)雜點(diǎn):

picture4.png

如上柠贤,3個(gè)注釋對(duì)應(yīng)著

  • 頂部圖片的大小變化

  • navigationBar的透明度變化

  • 返回按鈕的顏色變化

具體實(shí)現(xiàn)請(qǐng)到代碼中看香浩。


三、更新列表中臼勉,點(diǎn)擊更多邻吭,cell的刷新。

對(duì)應(yīng)的實(shí)現(xiàn)在UpdateTableViewControllerUpdateTableViewCell

這里其實(shí)主要想說(shuō)的是使用UITableViewCell的自適應(yīng)高度宴霸,有些時(shí)候非常管用囱晴。

例如在更新列表中,本來(lái)每一個(gè)cell的等高的瓢谢,但點(diǎn)擊更多按鈕后畸写,cell的高度會(huì)變化。使用自適應(yīng)高度后氓扛,我們并不關(guān)心實(shí)際每一個(gè)cell的高度枯芬,一切都交給系統(tǒng)自己去適配。

這里cell的布局我是用xib實(shí)現(xiàn)的采郎,關(guān)鍵點(diǎn)在于xib由顯示文字的控件和其他控件撐滿千所,當(dāng)文字越多時(shí),顯示文字的label越大蒜埋,系統(tǒng)計(jì)算出cell的高度也會(huì)越大淫痰。

picture5.png

如圖,ContentLabel是顯示主要文字的Label,它的上下左右的約束整份,使得cell高度會(huì)隨它的高度變化而變化待错。

UpdateTableViewController中的代碼也非常少,

picture6.png

只需要設(shè)置cell的預(yù)估高度烈评,并將實(shí)際高度設(shè)為自適應(yīng)火俄,最后注冊(cè)這個(gè)cell就行了


其他部分

項(xiàng)目中還包括了我的詳情頁(yè)面,搜索頁(yè)面等础倍,有興趣的朋友也可以看看烛占。


結(jié)尾:

  • 出于想練練英文的目的,項(xiàng)目顯示的內(nèi)容以及代碼中的注釋沟启,都是用的英文。
  • 本項(xiàng)目只做了一部分犹菇,還有很多內(nèi)容可以繼續(xù)做德迹,有興趣的朋友,也可以提交你們想補(bǔ)充的地方揭芍,讓我們一起把這個(gè)項(xiàng)目完善吧胳搞。

最后,項(xiàng)目地址是這里,覺(jué)得還不錯(cuò)的朋友請(qǐng)點(diǎn)個(gè)Star吧~

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市肌毅,隨后出現(xiàn)的幾起案子筷转,更是在濱河造成了極大的恐慌,老刑警劉巖悬而,帶你破解...
    沈念sama閱讀 218,858評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件呜舒,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡笨奠,警方通過(guò)查閱死者的電腦和手機(jī)袭蝗,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)般婆,“玉大人到腥,你說(shuō)我怎么就攤上這事∥蹬郏” “怎么了乡范?”我有些...
    開(kāi)封第一講書人閱讀 165,282評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)啤咽。 經(jīng)常有香客問(wèn)我篓足,道長(zhǎng),這世上最難降的妖魔是什么闰蚕? 我笑而不...
    開(kāi)封第一講書人閱讀 58,842評(píng)論 1 295
  • 正文 為了忘掉前任栈拖,我火速辦了婚禮,結(jié)果婚禮上没陡,老公的妹妹穿的比我還像新娘涩哟。我一直安慰自己,他們只是感情好盼玄,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,857評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布贴彼。 她就那樣靜靜地躺著,像睡著了一般埃儿。 火紅的嫁衣襯著肌膚如雪器仗。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書人閱讀 51,679評(píng)論 1 305
  • 那天童番,我揣著相機(jī)與錄音精钮,去河邊找鬼。 笑死剃斧,一個(gè)胖子當(dāng)著我的面吹牛轨香,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播幼东,決...
    沈念sama閱讀 40,406評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼臂容,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼科雳!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起脓杉,我...
    開(kāi)封第一講書人閱讀 39,311評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤糟秘,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后球散,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體尿赚,經(jīng)...
    沈念sama閱讀 45,767評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,945評(píng)論 3 336
  • 正文 我和宋清朗相戀三年沛婴,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了吼畏。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,090評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡嘁灯,死狀恐怖泻蚊,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情丑婿,我是刑警寧澤性雄,帶...
    沈念sama閱讀 35,785評(píng)論 5 346
  • 正文 年R本政府宣布,位于F島的核電站羹奉,受9級(jí)特大地震影響秒旋,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜诀拭,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,420評(píng)論 3 331
  • 文/蒙蒙 一迁筛、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧耕挨,春花似錦细卧、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 31,988評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至翰苫,卻和暖如春止邮,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背奏窑。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 33,101評(píng)論 1 271
  • 我被黑心中介騙來(lái)泰國(guó)打工导披, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人良哲。 一個(gè)月前我還...
    沈念sama閱讀 48,298評(píng)論 3 372
  • 正文 我出身青樓盛卡,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親筑凫。 傳聞我的和親對(duì)象是個(gè)殘疾皇子滑沧,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,033評(píng)論 2 355

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

  • 關(guān)鍵字 Dockerfile中以#開(kāi)頭的行全為注釋行 FROM :<tag>指定基礎(chǔ)鏡像 MAINTAINER ...
    Crazy_Coder閱讀 1,015評(píng)論 0 0
  • 早餐:一碗無(wú)糖的五谷豆?jié){,兩個(gè)素餡的小包子巍实,一根黃瓜滓技。兩片牛肉 午餐:出去玩了,就吃了六個(gè)薺菜餡的混沌 晚餐:少量...
    4e56d878daff閱讀 123評(píng)論 0 0