UIView Animations 學習筆記（一）簡介及API說明

目錄

• UIView Animations 學習筆記（一）簡介及API說明
• UIView Animation 學習筆記 應用示例

1、簡介

隨着iOS7的發佈，動畫與運動效果變成了Apple和第三方開發者進行app設計的中心。iOS7介紹了一種app扁平化、最小化設計，這致使在一些app中有類似的UI。爲了區分他們的app與其餘人的app，開發者引入了一些相似動畫和運動效果的特性來使得他們的app脫引而出。

動畫不僅是用於設置你的app部分，他們能夠改善你應用程序的用戶體驗總體。對於怎樣使用動畫來改善用戶體驗（UX）的示例，你應該查看Apple是怎樣在他們的app中使用動畫的。例如，在Photos應用中，當你從一個集合中選擇一個照片，這個照片從被選擇的那個擴大出來，當關閉這個照片時，這個照片縮小回被選擇時的狀態。這個添加給這個應用的導航，它讓你明確的知道你在那裏，若是在瀏覽不少的圖片的時候。

有不少種方法在你的應用中包含動畫，他們中的一些經過使用UIKit Dynamics、層動畫（Layer Animation）、視圖控制器切換（View Controller Transitions）或經過使用相似__Facebook Pop__或JNWSpringAnimation等第三方庫來實現。

1.1 UIView API說明

在你的視圖上建立動畫是指改變視圖的屬性以及讓UIKit自動的催動他們。咱們改變的屬性被使用Animatable進行標記。

下面的列表展現可動屬性。

• center —— 中心
• alpha —— 透明度
• frame —— 邊框
• bounds —— 約束
• transform —— 切換
• backgroundColor —— 背景色
• contentStretch —— 內容縮放

隨着咱們對視圖動畫的使用，你將發現全部的動畫都是引入了上面屬性的一種或多種變化。

1.1.1 基礎動畫 API

對於簡單的視圖動畫，UIKit提供了下面能夠被用於在屏幕上催動視圖的API。

• animateWithDuration(_:animations:)
• animateWithDuration(_:animations:completion:)
• animateWithDuration(_:delay:options:animations:completion:)

第一個方法使用兩個參數，一個用於描述動畫持續時間（秒）的值以及一個用於指定改變屬性用的閉包。UIKit將獲取視圖的方向狀態以及建立一個你在閉包中指定的從這個狀態到終止狀態的平滑的過渡。

另外兩個API與第一個相似，可是他們使用額外的參數，用於給動畫添加更多的配置。第二個使用一個完成時的閉包，你可使用這個閉包來指定當第一個動畫完成時要做的第二個動畫或者你能夠作一些這個UI的清理（從視圖結構樹中移除已經運動到其餘場景的視圖）。

第三個API使用兩個附加的參數 - delay指定動畫開始前的延遲時間，options（一個UIViewAnimationOptions常量）制定你想要怎樣執行動畫。下面展現了可用的選項。

1.1.2 彈性動畫 API

彈性動畫（Spring Animations）嘗試模型化真實的彈動行爲，這方面，當一個視圖從一個點移動到另外一個，在放置到位置前它將跳動/震盪朝向終點。

下面是咱們用於彈性動畫的API。

• animateWithDuration(_:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion:)

上面的API添加了兩個新的傳入參數usingSpringWithDamping和initialSpringVelocity。

• usingSpringWithDamping：設置在彈性動畫執行過程當中的阻尼大小，阻尼（Damping）是一個從0到1的值，它決定朝向動畫終點的視圖彈性有多少。越靠近1，彈性越小。
• initialSpringVelocity：決定動畫的初始速率。若是你想要在動畫開始時動的更加的猛烈一些，設置一個更大的值，若是你想要一個相對柔和的動畫，你能夠設置值爲0.

1.1.3 關鍵幀動畫 API

關鍵幀動畫（Keyframe Animation）讓你能夠設置一個動畫的不一樣階段。你能夠組織不一樣的動畫在一塊兒，以便共享一些公用的屬性，可是仍然能夠分別控制他們。

代替一個僅僅是沿着一條路徑移動的動畫，UIKit將執行不一樣的動畫階段。

關鍵幀動畫API以下所示。

• animateKeyframesWithDuration(_:delay:options:animations:completion:)
• addKeyframeWithRelativeStartTime(_:relativeDuration:animations:)

上面兩個方法須要一塊兒使用，第二個方法的調用是嵌套在第一個動畫的閉包中的。

第一個函數設置動畫的所有配置項目，如須要多少時間，延遲以及它的選項。以後你定義一個或多個第二個方法在動畫閉包中來設置動畫的不一樣階段。每一幀的相對起始時間和相對持續時間爲0至1，表示動畫總時間內的百分比時間。

1.1.4 視圖間切換 API

視圖切換（View Transition）被用於添加一個新的視圖到你的視圖組織結構當中或從屬兔組織結構當中移除一個視圖時。

用於建立視圖切換的API有：

• transitionWithView(_:duration:options:animations:completion:)
• transitionFromView(_:toView:duration:options:completion:)

使用第一個來介紹一個視圖到視圖組織結構中。這個方法採用咱們在其餘動畫方法中一樣的參數。

第二個用於從視圖結構中取得一個視圖，而後放置一個新的視圖在它的位置。

1.1.5 其餘 API

除了以上提到的在各個場景中經常使用的API外，Cocoa框架還提供以下的API。

• performSystemAnimation(_:onViews:options:animations:completion:)
• performWithoutAnimation(_:)

performSystemAnimation用於在一個或多個視圖上執行一個特定的由系統提供的動畫，伴隨着可選的並行動畫。參數中，onViews爲須要執行動畫的視圖的數組，animations爲想要並行執行的動畫。

performWithoutAnimation用於禁用一個視圖動畫。參考setAnimationsEnabled:、areAnimationsEnabled

1.2 動畫數據類型

1.2.1 視圖動畫選項(UIViewAnimationOptions)

經常使用數據類型：

• CurveEaseOut：動畫開始時快速，動畫臨近結束時變慢
• CurveEaseIn：動畫開始時慢速，動畫臨近結束時變快
• CurveLinear：勻速

完整數據類型：

struct UIViewAnimationOptions : OptionSetType {
    init(rawValue rawValue: UInt)
    static var LayoutSubviews: UIViewAnimationOptions { get }
    static var AllowUserInteraction: UIViewAnimationOptions { get }
    static var BeginFromCurrentState: UIViewAnimationOptions { get }
    static var Repeat: UIViewAnimationOptions { get }
    static var Autoreverse: UIViewAnimationOptions { get }
    static var OverrideInheritedDuration: UIViewAnimationOptions { get }
    static var OverrideInheritedCurve: UIViewAnimationOptions { get }
    static var AllowAnimatedContent: UIViewAnimationOptions { get }
    static var ShowHideTransitionViews: UIViewAnimationOptions { get }
    static var OverrideInheritedOptions: UIViewAnimationOptions { get }
    static var CurveEaseInOut: UIViewAnimationOptions { get }
    static var CurveEaseIn: UIViewAnimationOptions { get }
    static var CurveEaseOut: UIViewAnimationOptions { get }
    static var CurveLinear: UIViewAnimationOptions { get }
    static var TransitionNone: UIViewAnimationOptions { get }
    static var TransitionFlipFromLeft: UIViewAnimationOptions { get }
    static var TransitionFlipFromRight: UIViewAnimationOptions { get }
    static var TransitionCurlUp: UIViewAnimationOptions { get }
    static var TransitionCurlDown: UIViewAnimationOptions { get }
    static var TransitionCrossDissolve: UIViewAnimationOptions { get }
    static var TransitionFlipFromTop: UIViewAnimationOptions { get }
    static var TransitionFlipFromBottom: UIViewAnimationOptions { get }
}

1.2.2 UIViewAnimationCurve

用於對運動弧線的支持。

enum UIViewAnimationCurve : Int {
    case EaseInOut
    case EaseIn
    case EaseOut
    case Linear
}

1.2.3 UISystemAnimation

當一個動畫必定結束時，將其從視圖結構中移除。

enum UISystemAnimation : UInt {
    case Delete
}

1.2.4 UIViewAnimationTransition

用在動畫閉包中的動畫過渡效果選項。

enum UIViewAnimationTransition : Int {
    case None
    case FlipFromLeft
    case FlipFromRight
    case CurlUp
    case CurlDown
}

參考

• Creating Simple View Animations in Swift
• Animating Views with Block Objects