[譯] 快速指南:用UIViewPropertyAnimator作動畫

翻譯自:QUICK GUIDE: ANIMATIONS WITH UIVIEWPROPERTYANIMATORbash

譯者:Haley_Wong閉包

iOS 10 帶來了一大票有意思的新特性,像 UIViewPropertyAnimator,它是一個改善動畫處理的全新的類。 這個視圖屬性動畫徹底顛覆了咱們已經習慣的流程,可以爲動畫邏輯添加更精細的控制。app

一個簡單的動畫

讓咱們來看看如何經過一個簡單的動畫改變視圖的中心點屬性。iview

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

至少有3點須要注意:ide

  1. 這個動畫是經過閉包來定義的,與UIView 的動畫類很類似「UIView.animation(duration:…)」。
  2. 返回一個對象,即動畫建立者。
  3. 這個動畫不是馬上開始的,而是經過 startAnimation()方法觸發的。

動畫狀態

咱們對一個元素執行動畫操做方式的主要變化與如下事實有關:一個屬性動畫器包含一整套狀態機邏輯。經過UIViewAnimating協議實現的功能以一種簡單明瞭的方式管理動畫的狀態,而這些狀態又是經過startAnimation, pauseAnimationstopAnimation函數來實現的。調用這些方法咱們能夠更新狀態的值,使之能在active,inactivestopped之間轉換。函數

當動畫開始或者暫停時,動畫的狀態就是活躍狀態;當動畫已被初始化可是還未開始或者動畫已完成,它就是非活躍狀態。須要注意的是 在活躍狀態中止態之間有一點點不一樣。當動畫因中止命令而完成或者它真的已經完成後,狀態會變成中止態,動畫器內部會調用方法finishAnimation(at:) 來標記動畫 已完成,將狀態設置爲非活躍狀態,並最終調用完成的代碼塊。動畫

動畫的可選項

可能你已經在前面的例子裏注意到,挨着動畫的 block,咱們定義了兩個參數:動畫的時長 和動畫的曲線,一個UIViewAnimationCurve實例,表明着最多見的曲線(easeIn,easeOut,linear或easeInOut)。ui

若是你須要對動畫取消有更多的控制,你能夠用由兩個控制點定義的貝塞爾曲線。spa

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

(若是一條貝塞爾曲線依然不夠,那麼你甚至能夠利用UITimigCurveProvider來指定一條徹底自定義的曲線)翻譯

另外一個能夠傳給構造器的有意思的參數是 阻尼係數值。用法與UIView 的動畫方法相似,你能夠定義出彈簧效果,阻尼係數的取值範圍是0到1.

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

延遲動畫的執行也很是的簡單,只須要調用 帶有afterDelay參數的startAnimation方法便可。

animator.startAnimation(afterDelay:2.5)
複製代碼

動畫的block

UIViewPropertyAnimator 採用的是可以爲動畫器提供不少有趣能力的UIViewImplicitlyAnimating協議。例如,除了在初始化的時候指定的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()
複製代碼

你還能夠向已在運行的動畫添加動畫塊,該動畫塊將當即使用剩餘時間做爲新動畫的持續時間來執行。

與動畫流交互

正如咱們已提過的那樣,咱們能夠經過調用startAnimation, pauseAnimationstopAnimation輕鬆地與動畫流交互。動畫的默認流(從起始點到結束點),能經過fractionComplete屬性更改。這個值表示動畫完成的百分比,取值範圍是0 到 1。你可以修改這個值來像你指望的那樣驅動流(例如:用戶可能會用滑塊或滑動手勢實時地修改fraction)。

animator.fractionComplete = slider.value
複製代碼

某些情形下,你可能但願在動畫運行完畢時執行一些操做。 addCompletion 方法能讓你添加一個(當動畫完成時會被觸發的)代碼塊。

animator.addCompletion { (position) in
    print("Animation completed")
}
複製代碼

position參數是一個 UIViewAnimatingPosition類型的值,它有三個枚舉值,分別表明動畫是在開始中止,結束後中止,仍是當前位置中止。 一般你都會收到結束的枚舉值。 (譯者注:UIViewAnimatingPosition的三個枚舉值分別是end,start,current)

這就是這份快速指南的所有內容啦。

我已經火燒眉毛地想要用這個新的動畫系統來實現一些很酷的UI 效果了。

相關文章
相關標籤/搜索