Auto Layout 使用心得（六）—— 製造炫酷的下拉刷新動畫

---

原文發表在個人我的網站：Auto Layout 使用心得（六）—— 製造炫酷的下拉刷新動畫

---

此係列文章代碼倉庫在 https://github.com/johnlui/AutoLayout ，有不明白的地方能夠參考個人 Auto Layout 設置哦，下載到本地打開就能夠了。

簡介

本文中，咱們將一塊兒使用 Auto Layout 技術製造一個炫酷的下拉刷新動畫。Auto Layout 除了在佈局的時候比較繁瑣之外，還有一個常常被人吐槽的點：讓許多 UIView.animateWithDuration 失效，甚至在界面上出現 「反方向動畫」 的視覺效果。本文中咱們將主要講述製造下拉刷新動畫的過程，關於 Auto Layout 與動畫的詳細配合咱們之後再一塊兒仔細探究。

實現首頁總體下拉回彈效果

創建接受下拉事件的主 View

使用一個跟窗體同樣很大的 mainView 把目前首頁的五個元素包括，並補全 Auto Layout 佈局。層次結構改變會讓除尺寸約束以外的全部約束消失。

修改 UI 綁定及動畫函數

UI 和代碼的綁定修改爲以下：

從新給 mainView 綁定上 panGesture，從 mainView 向 panGesture 拖動：

修改存儲值的變量名稱和初始化代碼：

swift...
var mainViewTopSpaceLayoutConstraintValue: CGFloat!
var mainViewOriginY: CGFloat!

...

mainViewTopSpaceLayoutConstraintValue = topLayoutConstraintOfMainView.constant
mainViewOriginY = mainView.frame.origin.y

...

修改手勢觸發的目標函數（增長冒號）：

swiftpanGesture.addTarget(self, action: Selector("pan:"))

改寫動畫目標函數：

swiftfunc pan(recongnizer: UIPanGestureRecognizer) {
    if panGesture.state == UIGestureRecognizerState.Ended {
        UIView.animateWithDuration(0.4, delay: 0, options: UIViewAnimationOptions.CurveEaseInOut, animations: { () -> Void in
            recongnizer.view?.frame.origin.y = self.mainViewOriginY
            }, completion: { (success) -> Void in
                if success {
                    self.topLayoutConstraintOfMainView.constant = self.mainViewTopSpaceLayoutConstraintValue
                }
        })
        return
    }
    let y = panGesture.translationInView(self.view).y
    topLayoutConstraintOfMainView.constant = mainViewTopSpaceLayoutConstraintValue + y
}

查看新的拖動回彈效果

創建動畫視圖

創建動畫主視圖

拖動一個 View 到 mainView 上面，目的是置於 mainView 圖層之下。在 Xcode 裏，最上面的元素位於 UI 的最底層，這個順序跟 PS 正好相反。修改其 frame，添加 Auto Layout 約束，以下圖：

將 UI 和代碼綁定：

動畫的時候咱們須要該主視圖進行必定程度的下移，故將其 「到父視圖頂部的距離」 的約束也進行綁定。（此圖爲後期補充，請自動忽略其子元素）

填充動畫元素

將動畫主視圖更名爲 HiddenTopView。爲了方便的填充動畫元素，須要先將 HiddenTopView 移動到 mainView 之下，以便將圖層顯示在 mainView 之上，不被其遮擋，沒法編輯。我填充了三個圖片資源，所有加上約束。具體約束你們能夠自由發揮。效果以下：

因爲我使用了白雲元素，故將最大的 view 的背景色填充爲灰色，將 HiddenTopView 背景色設置爲透明。

查看佈局效果

動畫規劃

咱們計劃整個下拉刷新動畫分爲四個部分。下拉時：

1. 整個 HiddenTopView 下移
2. 小云彩從屏幕右側飛入
3. 大雲彩持續作往復運動
4. 下拉距離超過必定值時，中間子元素進行必定程度的放大

完善準備工做

分析須要獲取的約束

「動畫規劃」中，1 上面已經準備過，二、3 須要將小云、大雲的橫向定位參數向代碼綁定，4 只需綁定中間元素便可。

綁定三個子元素及其關鍵約束到代碼

Make them move!

因爲事先動畫效果的代碼描述起來過於麻煩，請直接看代碼：https://github.com/johnlui/AutoLayout/blob/1420fddee57d22ebd443656fb31...

查看效果