iOS開發-模仿AppStore中的各類動畫

AppStore這個軟件是咱們蘋果用戶常常用到的，我在demo中對它進行了模仿，項目的地址是這裏。git

本文是想講解一下項目中我以爲不錯的效果，主要包括下面三部分：github

一.Today中的應用卡片，打開和關閉的效果。

二.遊戲App的詳情中，上下滑動中漸變的導航欄和頂部視圖,橫滑展現的列表

三.更新列表中，點擊某一項的更多，cell刷新

具體實現：

1、卡片打開和收起：

打開：從Today的列表中點擊某一個cell，而後present出詳情頁面。swift
關閉：從詳情頁面點擊關閉按鈕，或者按住屏幕下滑，關閉詳情頁面。markdown

整個動畫過程是在TodayViewController到CardDetailViewController中完成的。app

這裏的打開和關閉都屬於自定義轉場動畫，所以首要的一點是詳情頁面要遵循代理UIViewControllerTransitioningDelegateoop

這裏TodayAnimationTransition是定義轉場動畫的效果具體是如何實現的，CardPresentationController是轉場發生時的背景，也就是在詳情頁面下拉時，看到的高斯模糊效果。佈局

下面來看看其中的具體是如何present的。這一部分實現是在TodayAnimationTransition.swift中。動畫

這裏分爲3個部分：spa

先經過transitionContext得到轉場動畫的中須要的元素3d
設置動畫開始時，控制器的size,也就是列表中卡片的大小
動畫結束時，控制器的size撐滿屏幕，卡片的size也隨之變大

dismiss的部分原理相似，不過多了一個下拉關閉的手勢。

這個動畫裏還包含了不少細節，包括：

狀態欄和底部導航欄的隱藏和顯示。
按住卡片時，卡片縮小，鬆開時，跳轉到詳情頁面

具體細節能夠到代碼中查看。

2、遊戲詳情中的動畫

1.上下滑動漸變的導航欄和頂部視圖,對應的控制器是DetailViewController。

首先自定義navigationBar。對應的類是DetailNavigationView
而後基於全屏的滑動效果，咱們將全部內容都放到一個tableView裏。
設置頂部圖片爲tableView的tableHeaderView。
最後在tableView滑動時，按比例改變navigationBar的透明度，返回按鈕的顏色，以及tableHeaderView的大小。

由於同時涉及到大小，透明度，顏色的變化，這裏的運算會稍微複雜點：

如上，3個註釋對應着

頂部圖片的大小變化
navigationBar的透明度變化
返回按鈕的顏色變化

具體實現請到代碼中看。

3、更新列表中，點擊更多，cell的刷新。

對應的實如今UpdateTableViewController和UpdateTableViewCell

這裏其實主要想說的是使用UITableViewCell的自適應高度，有些時候很是管用。

例如在更新列表中，原本每個cell的等高的，但點擊更多按鈕後，cell的高度會變化。使用自適應高度後，咱們並不關心實際每個cell的高度，一切都交給系統本身去適配。

這裏cell的佈局我是用xib實現的，關鍵點在於xib由顯示文字的控件和其餘控件撐滿，當文字越多時，顯示文字的label越大，系統計算出cell的高度也會越大。

如圖，ContentLabel是顯示主要文字的Label,它的上下左右的約束，使得cell高度會隨它的高度變化而變化。

在UpdateTableViewController中的代碼也很是少，

只須要設置cell的預估高度，並將實際高度設爲自適應，最後註冊這個cell就好了

其餘部分

項目中還包括了個人詳情頁面，搜索頁面等，有興趣的朋友也能夠看看。

結尾：

出於想練練英文的目的，項目顯示的內容以及代碼中的註釋，都是用的英文。
本項目只作了一部分，還有不少內容能夠繼續作，有興趣的朋友，也能夠提交大家想補充的地方，讓咱們一塊兒把這個項目完善吧。