快速入門指南：使用 UIViewPropertyAnimator 作動畫

做者：Yari D'areglia，原文連接，原文日期：2016-11-20
譯者：SketchK；校對：Cee；定稿：CMB

iOS 10 帶來了一堆很是有意思的新特性，例如 UIViewPropertyAnimator。這是一個可以改善動畫處理方式的新類。

它完全改變了咱們所習慣的工做流，爲動畫邏輯添加了一個更爲精細的控制手段。

一個簡單例子

讓咱們看看如何建立一個改變視圖中心的動畫。

let animator = UIViewPropertyAnimator(duration: 1.0, curve: .easeOut){
    AView.center = finalPoint
}
animator.startAnimation()

這裏至少有 3 點值得去關注：

1. 動畫是經過一個閉包來定義的，這與 UIView 的動畫方法 「UIView.animation(duration:…)」 十分類似。

2. 方法返回了一個對象——animator。

3. 動畫並非當即執行，而是經過 startAnimation() 方法來觸發執行。

動畫狀態

使用這種新方式來處理動畫的不一樣之處就是 animator 有完整的狀態機邏輯。經過 UIViewAnimation 協議，控件能夠用一種簡單明瞭的方式實現動畫狀態的管理，例如調用 startAnimation、 pauseAnimation 和 stopAnimation 函數。經過調用這些函數，咱們能夠更新控件的狀態，使得控件在 active、inactive 和 stopped 狀態之間轉換。

當動畫開始或者暫停的時候，動畫狀態爲 active， 當控件被建立出來且沒有開始執行動畫或者已經執行完動畫的時候，它的狀態是 inactive。這裏仍是要聲明下 inactive 和 stopped 之間仍是有一點區別的。當動畫執行完畢或者使用 stop 命令暫停動畫後，控件的狀態變爲 stopped，而在 animator 內部會調用 finishAnimation(at:) 來代表當前動畫完畢， 而後會設置當前狀態爲 inactive，最後會調用 completion block (稍後會詳細說明)

動畫選項

在以前的例子中應該注意到了，在動畫的 block 中，咱們定義了兩個參數：動畫的 duration 和動畫的 curve， 一個 UIViewAnimationCurve 可以表示大部分的常見動畫曲線類型（ easeIn, easeOut, liner 或者 easeInOut ）。

當你須要對動畫曲線作更多的設置時，你能夠經過兩個控制點來定義一個貝塞爾曲線

let animator = UIViewPropertyAnimator(
               duration: 1.0, 
               point1: CGPoint(0.1,0.5), 
               point2: CGPoint(0.5, 0.2){
 
        AView.alpha = 0.0
}

(若是貝塞爾曲線也不能知足需求的話，可使用 UITimingCurveProvider 建立一個徹底自定義的曲線)

另一個有趣的動畫選項是你能夠向函數傳遞 dampingRatio 參數。這與 UIView 的動畫方法類似，能夠經過使用一個 0 到 1 的 damping 值來實現彈跳效果。

let animator = UIViewPropertyAnimator(
               duration: 1.0,
               dampingRatio:0.4){
 
        AView.center = CGPoint(x:0, y:0)
}

讓動畫延後執行的操做也很是簡單，只須要在 startAnimation 函數中傳入 afterDelay 參數。

animator.startAnimation(afterDelay:2.5)

動畫 Block

UIViewPropertyAnimator 遵照了 UIViewImplicitlyAnimating 協議，這個協議賦予 UIViewPropertyAnimator 許多有趣的特性。舉個例子，除了在初始化期間指定的第一個動畫 block 外，還能夠指定多個動畫 block。

// Initialization
let animator = UIViewPropertyAnimator(duration: 2.0, curve: .easeOut){
    AView.alpha = 0.0
}
// Another animation block
animator.addAnimation{ 
    Aview.center = aNewPosition
}
animator.startAnimation()

你也能夠在已經執行動畫的代碼裏添加動畫 block， 這個 block 會當即執行並使用剩下的時間做爲其動畫時長。

與動畫的交互

在前面的內容裏已經說明了咱們能夠經過調用 startAnimation、stopAnimation 和 pauseAnimation 等方法實現動畫的循環。默認的動畫循環能夠經過 fractionComplete 屬性進行修改。這個值代表了動畫的完成百分比，它的取值範圍在 0.0 到 1.0 之間。這樣就能夠經過修改 fractionComplete 來讓循環達到預期效果（例如：用戶可能會經過 slider 或者 pan 手勢來實時改變參數值）

animator.fractionComplete = slider.value

在一些場景下，你可能想在動畫執行完畢後作一些操做，addCompletion 容許你添加一個在動畫執行完畢後纔會被觸發的 block。

animator.addCompletion { (position) in
    print("Animation completed")
}

position 參數是 UIViewAnimatingPosition 類型，它用於代表動畫結束的位置，這個值自己是一個枚舉，包含了 starting、end 和 current。一般獲得的值是 end。

這就是快速入門指南的所有內容了。
我已經火燒眉毛地想使用這個新的動畫系統來實現一些酷炫的 UI 效果了！我會在 Twitter 上分享做品 ? Ciao！

本文由 SwiftGG 翻譯組翻譯，已經得到做者翻譯受權，最新文章請訪問 http://swift.gg。