用UIKit和UIView在視圖上執行iOS動畫

本文旨在成為iOS動畫的入門讀物，目的是詳盡地介紹不同的實現方法。鑒於該主題的廣泛性，我們將在相當高的層次上簡潔地涵蓋每個部分。這樣做的目的是通過一組選項來教育讀者將動畫添加到他/她的iOS應用程式中。在我們開始討論與IOS相關的主題之前，讓我們先簡單地看一看動畫的速度。 60 Fps動畫通常 ...

本文旨在成為iOS動畫的入門讀物，目的是詳盡地介紹不同的實現方法。

鑒於該主題的廣泛性，我們將在相當高的層次上簡潔地涵蓋每個部分。這樣做的目的是通過一組選項來教育讀者將動畫添加到他/她的iOS應用程式中。

在我們開始討論與IOS相關的主題之前，讓我們先簡單地看一看動畫的速度。

60 Fps動畫

通常，在視頻中，每一幀由圖像表示，幀速率決定在序列中翻轉的圖像數量。這被稱為“幀每秒”或FPS。

FPS確定在一秒鐘內翻轉的靜止圖像的數量，這實際上意味著圖像/幀的數量越多，視頻中顯示的細節/信息就越多。這也適用於動畫。

FPS通常用於確定動畫的質量。有一種流行的觀點認為，任何好的動畫應該運行在60英尺或更高-任何低於60 fps將感到有點不對勁。

你想看看30 FPS和60 FPS之間的區別嗎？看看這個!

你註意到區別了嗎？人的眼睛肯定能感覺到低fps的抖動。因此，確保您所創建的任何動畫都遵循運行在60 fps或更高的基本規則，這是一個很好的實踐。這讓它感覺更現實，更有活力。

在查看了FPS之後，現在讓我們深入研究不同的核心iOS框架，這些框架為我們提供了一種執行動畫的方法

核心框架

在本節中，我們將討論可以用於創建視圖動畫的IOSSDK中的框架。我們將對它們進行快速的瀏覽，並以相關的示例說明它們的特性集。<

UIKIT/UIVIEW動畫

UIView是任何在iOS應用程式中顯示內容的視圖的基類。

UIKit是為我們提供UIView的框架，它已經為我們提供了一些基本的動畫功能，使得開發人員可以通過更少的操作來實現更多的目標。

APIUIView.animate，因為通過提供基於塊的語法中的屬性值，任何視圖的屬性都可以很容易地被動畫化。

在UIKit動畫中，建議只修改UIVIew的可動畫屬性，否則動畫可能會導致視圖處於意外狀態。

動畫(附圖：動畫：完成)

此方法接受動畫持續時間，這是一組需要動畫化的視圖的可動畫屬性更改。完成塊在視圖執行動畫時提供回調。

幾乎任何類型的動畫，如移動，縮放，旋轉，褪色，等等，在一個視圖可以實現這個單一的API。

現在，考慮您想要動畫一個按鈕大小的變化，或者您想要一個特定的視圖放大到屏幕。這就是我們如何使用UIView.animateAPI：

let newButtonWidth: CGFloat = 60

UIView.animate(withDuration: 2.0) { //1
    self.button.frame = CGRect(x: 0, y: 0, width: newButtonWidth, height: newButtonWidth) //2
    self.button.center = self.view.center //3
}

我們在這裡做的是：

我們稱之為UIView.animate方法具有傳遞給它的持續時間值，該值表示在塊中描述的動畫應該運行多長時間。
我們設置按鈕的新框架，它應該表示動畫的最終狀態。
我們設置按鈕center它的超級視圖的中心，使它保持在屏幕的中心。

上面的動畫代碼塊應該觸發按鈕框架的動畫，而不是當前的框架：

Width = 0, Height = 0

最後一個框架：

Width = Height = newButtonWidth

下麵是動畫的樣子：

animateWithDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion

此方法類似於動畫方法的擴展，您可以在前面的API中執行所有可以執行的操作，並將一些物理行為添加到視圖動畫中。

例如，如果您想在上面所做的動畫中實現彈簧阻尼效果，那麼代碼如下所示：

let newButtonWidth: CGFloat = 60
UIView.animate(withDuration: 1.0, //1
    delay: 0.0, //2
    usingSpringWithDamping: 0.3, //3
    initialSpringVelocity: 1, //4
    options: UIView.AnimationOptions.curveEaseInOut, //5
    animations: ({ //6
        self.button.frame = CGRect(x: 0, y: 0, width: newButtonWidth, height: newButtonWidth)
        self.button.center = self.view.center
}), completion: nil)

下麵是我們使用的一組參數：

duration
表示確定代碼塊應運行多長時間的動畫持續時間。
delay
表示我們希望在動畫開始之前具有的初始延遲。
SpringWithDamping
表示我們希望視圖表現的彈性效果的值。數值必須在0到1之間。值越低，彈簧振蕩越高。
velocity
表示動畫應以何種速度啟動。
options
要應用於視圖動畫的動畫曲線類型。
最後，我們設置需要動畫的按鈕框架的代碼塊。它和以前的動畫一樣。

下麵是用上面的動畫配置動畫的樣子：

UIViewProperty動畫

為了更好的控制動畫，UIViewPropertyAnimator它為我們提供了暫停和恢復動畫的方法。您可以有自定義的定時，並使您的動畫具有交互性和可中斷性。這在執行動畫時非常有用，這些動畫也可以與用戶操作交互。

經典的“滑動解鎖”手勢和播放器視圖“解散/擴展動畫”(在音樂應用程式中)是互動式動畫和可中斷動畫的例子。您可以開始用手指移動視圖，然後釋放它，視圖將回到原來的位置。或者，您可以在動畫期間捕捉視圖並繼續用手指拖動視圖。

下麵是一個簡單的示例，說明如何使用UIViewPropertyAnimator:

let newButtonWidth: CGFloat = 60
let animator = UIViewPropertyAnimator(duration:0.3, curve: .linear) { //1
    self.button.frame = CGRect(x: 0, y: 0, width: newButtonWidth, height: newButtonWidth)
    self.button.center = self.view.center
}
animator.startAnimation() //2

我們正在做的事情如下：

我們稱之為UIViewPropertyAPI通過傳遞持續時間和動畫曲線。
與上面的UIView.動畫API不同，除非您自己指定動畫，即完全控制完整的動畫過程/流，否則動畫不會啟動。

現在，讓我們假設你想要更多的控制動畫。例如，您希望設計和控制動畫中的每個幀。還有另一個APIanimateKeyframes。但是在我們深入研究它之前，讓我們快速地看看一個框架是什麼，在一個動畫中。

什麼是A`frame`?

視圖的框架更改/轉換集合(從開始狀態到最終狀態)定義為animation動畫期間視圖的每個位置都被稱為frame.

動畫關鍵幀

這個API提供了一種設計動畫的方法，使您可以定義具有不同時間和轉換的多個動畫。發佈這篇文章後，API簡單地將所有動畫集成到一個無縫體驗中。

假設我們想以隨機的方式移動屏幕上的按鈕。讓我們看看如何使用KeyFrame動畫API來做到這一點。

UIView.animateKeyframes(withDuration: 5, //1
  delay: 0, //2
  options: .calculationModeLinear, //3
  animations: { //4
    UIView.addKeyframe( //5
      withRelativeStartTime: 0.25, //6
      relativeDuration: 0.25) { //7
        self.button.center = CGPoint(x: self.view.bounds.midX, y: self.view.bounds.maxY) //8
    }

    UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 0.25) {
        self.button.center = CGPoint(x: self.view.bounds.width, y: start.y)
    }

    UIView.addKeyframe(withRelativeStartTime: 0.75, relativeDuration: 0.25) {
        self.button.center = start
    }
})

詳細情況如下：

duration
通過傳遞動畫的持續時間來調用API。
delay
動畫的初始延遲持續時間。
options
要應用於視圖動畫的動畫曲線類型。
animations
塊，該塊接受開發人員/用戶設計的所有關鍵幀動畫。
addKeyFrame
調用API來設計每個動畫。在我們的例子中，我們定義了按鈕的每一個動作。我們可以有更多的這樣的動畫，我們需要，添加到塊。
relativeStartTime
定義動畫塊集合中動畫的啟動時間。
relativeDuration
定義此特定動畫的總體持續時間。
center
在我們的示例中，我們只需更改按鈕的中間屬性，將按鈕移動到屏幕周圍。

最後的動畫是這樣的：

共動畫

任何基於UIKit的動畫都是在內部轉換成核心動畫。因此，核心動畫框架充當任何UIKit動畫的支持層或骨幹。因此，所有UIKit動畫API都只是以一種易於消費或方便的方式封裝了核心動畫API的層。

UIKit動畫API不提供對視圖執行的動畫的太多控制，因為它們主要用於視圖的可動畫屬性。因此，在這種情況下，如果您想要控制動畫的每一個幀，最好直接使用底層的核心動畫API。或者，UIView動畫和核心動畫也可以一起使用。

UIView+核心動畫

讓我們看看如何重新創建相同的按鈕更改動畫，同時使用UIView和Core動畫API指定時間曲線。

我們可以用CATransaction的定時功能，它允許您指定和控制動畫曲線。

讓我們來看一個按鈕大小變化動畫的例子，它的角半徑使用CATransaction的定時功能和UIView動畫的組合：

let oldValue = button.frame.width/2
let newButtonWidth: CGFloat = 60

/* Do Animations */
CATransaction.begin() //1
CATransaction.setAnimationDuration(2.0) //2
CATransaction.setAnimationTimingFunction(CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut)) //3

// View animations //4
UIView.animate(withDuration: 1.0) {
    self.button.frame = CGRect(x: 0, y: 0, width: newButtonWidth, height: newButtonWidth)
    self.button.center = self.view.center
}

// Layer animations
let cornerAnimation = CABasicAnimation(keyPath: #keyPath(CALayer.cornerRadius)) //5
cornerAnimation.fromValue = oldValue //6
cornerAnimation.toValue = newButtonWidth/2 //7

button.layer.cornerRadius = newButtonWidth/2 //8
button.layer.add(cornerAnimation, forKey: #keyPath(CALayer.cornerRadius)) //9

CATransaction.commit() //10

詳細情況如下：

begin
表示動畫代碼塊的開始。
duration
整體動畫持續時間。
curve
表示需要應用於動畫的計時曲線。
UIView.animate
我們的第一個動畫改變框架的按鈕。
CABasicAnimation
我們創建CABasicAnimation引用cornerRadius按鈕作為鍵盤，因為這是我們想要的動畫。類似地，如果希望對關鍵幀動畫具有粒度級控制，則可以使用CAKeyframeAnimation班級。
fromValue
表示動畫的起始值，即cornerRadius從動畫必須從哪裡開始的按鈕的值。
toValue
表示動畫的最終值，即最終值。cornerRadius動畫必須結束的按鈕的值。
cornerRadius
我們必須設置`cornerRadius屬性的屬性，以動畫的最終值，否則，按鈕的角半徑值將在動畫完成後自動恢復到其初始值。
addAnimation
通過表示動畫需要執行的Keypath，我們將包含整個動畫過程配置的動畫對象附加到該層。
commit
表示動畫代碼塊的結束並開始動畫。

最後的動畫是這樣的：

這個博客是一個偉大的閱讀，以幫助創建更高級的動畫，因為它整齊地帶您通過大多數核心動畫框架API指導您通過每一步的道路。

UIKITDYNAMICS

UIKitDynamic是UIKit的物理引擎，它使您能夠在UIKit控制項中添加任何物理行為，如碰撞、重力、推、扣等。

UIKitDynamic動畫

這是UIKitDynamicyFramework的管理類，它規範由任何給定UI控制項觸發的所有動畫。

UIKitDynamicBehavior

它使您可以將任何物理行為添加到動畫師中，從而使其能夠在附在其上的視圖上執行操作。

UIKitDynamic的各種行為包括：

UIAttachmentBehavior
UICollisionBehavior
UIFieldBehavior
UIGravityBehavior
UIPushBehavior
UISnapBehavior

UIKitDynamic的體繫結構類似於這。請註意，項目1至5可以替換為單個視圖。

讓我們把一些物理行為應用到我們的按鈕上。我們將看到如何將重力應用到按鈕上，這樣它就能給我們一種處理真實物體的感覺。

var dynamicAnimator   : UIDynamicAnimator!
var gravityBehavior   : UIGravityBehavior!

dynamicAnimator = UIDynamicAnimator(referenceView: self.view) //1

gravityBehavior = UIGravityBehavior(items: [button]) //2
dynamicAnimator.addBehavior(gravityBehavior) //3

詳細情況如下：

UIKitDynamicAnimator
我們創建了一個UIKitDynamicAnimator對象，它充當執行動畫的協調器。我們還傳遞了作為引用視圖的按鈕的SuperView。
UIGravityBehavior
我們創建了一個UIGravityBehavior對象，並將我們的按鈕傳遞到註入此行為的數組元素中。
addBehavior
我們給動畫師添加了重力物體。

這將創建如下所示的動畫：

註意按鈕是如何從屏幕的中心(它的原始位置)掉到底部和後面的。

我們應該告訴動畫師考慮屏幕底部是地面。這裡是`UICollisionBehavior`進入畫面。

```
var dynamicAnimator   : UIDynamicAnimator!
var gravityBehavior   : UIGravityBehavior!
var collisionBehavior : UICollisionBehavior!

dynamicAnimator = UIDynamicAnimator(referenceView: self.view) //1

gravityBehavior = UIGravityBehavior(items: [button]) //2
dynamicAnimator.addBehavior(gravityBehavior) //3

collisionBehavior = UICollisionBehavior(items: [button]) //4
collisionBehavior.translatesReferenceBoundsIntoBoundary = true //5
dynamicAnimator.addBehavior(collisionBehavior) //6
```

UICollisionBehavior
我們創建了一個UICollisionBehavior對象並沿按鈕傳遞，以便將行為添加到元素中。
translatesReferenceBoundsIntoBoundary
啟用此屬性會告訴動畫師將引用視圖邊界作為結束，在我們的示例中，這是屏幕的底部。
addBehavior
我們在這裡給動畫師添加了碰撞行為。

現在，我們的按鈕應該按在地面上，靜止不動，如下所示：

挺不錯的，不是嗎？

現在，讓我們嘗試添加一個彈跳效應，使我們的對象感覺更真實。為此，我們將使用UIDynamicItemBehavior班級。

```
var dynamicAnimator   : UIDynamicAnimator!
var gravityBehavior   : UIGravityBehavior!
var collisionBehavior : UICollisionBehavior!
var bouncingBehavior  : UIDynamicItemBehavior!

dynamicAnimator = UIDynamicAnimator(referenceView: self.view) //1

gravityBehavior = UIGravityBehavior(items: [button]) //2
dynamicAnimator.addBehavior(gravityBehavior) //3

collisionBehavior = UICollisionBehavior(items: [button]) //4
collisionBehavior.translatesReferenceBoundsIntoBoundary = true //5
dynamicAnimator.addBehavior(collisionBehavior) //6

//Adding the bounce effect
bouncingBehavior = UIDynamicItemBehavior(items: [button]) //7
bouncingBehavior.elasticity = 0.75 //8
dynamicAnimator.addBehavior(bouncingBehavior) //9
```

UIDynamicItemBehavior
我們創建了一個UIDynamicItemBehavior對象並沿按鈕傳遞，以便將行為添加到元素中。
elasticity
數值必須在0-1之間，它代表彈性，即物體在地面上和地面上彈跳的次數。這就是魔術發生的地方--通過調整這個屬性，你可以區分不同種類的物體，比如球、瓶子、硬物品等等。
addBehavior
我們在這裡給動畫師添加了碰撞行為。

現在，我們的按鈕在觸地時應該會反彈，如下所示：

這個回購是非常有用的，並顯示了所有的UIKitDynamicsActions在行動中。它還提供了用於處理每一種行為的源代碼。在我看來，這應該是一系列在視圖上執行iOS動畫的方法。

在下一節中，我們將簡要介紹幫助我們測量動畫性能的工具。我也建議你看看優化Xcode構建的方法因為它將節省大量的開發時間。

性能調諧

在本節中，我們將研究如何測量和調優iOS動畫的性能。作為iOS開發人員，您可能已經使用Xcode工具(如記憶體泄漏和分配)來衡量整個應用程式的性能。同樣，也有一些工具可以用來衡量動畫的表現。

`Core Animation`儀器

試試看Core Animation儀器和你應該能夠看到你的應用屏幕提供的FPS。這是一個很好的方法來衡量任何動畫呈現在你的iOS應用程式的性能/速度。

繪圖

FPS在這個應用程式中被大大降低了，它顯示的內容很重，就像圖像中的陰影一樣。在這種情況下，而不是直接將圖像分配給UIImageView的圖像屬性，嘗試使用CoreGraphicsAPI在上下文中分別繪製圖像。當在單獨的線程中而不是在主線程中執行圖像解壓縮邏輯時，這會過度地減少圖像顯示時間。

光柵化

Rasteralization是一個用於緩存複雜層信息的過程，以便這些視圖在呈現時不會被重新繪製。重繪視圖是FPS減少的主要原因，因此，最好對將要重覆使用的視圖應用柵格化。

包起來

最後，我還總結了用於iOS動畫的有用資源列表。當你在iOS動畫上工作時，你可能會發現這很方便。此外，您可能還會發現這套設計工具在深入研究動畫之前，作為一個(設計)步驟很有幫助。

我希望我已經能夠涵蓋儘可能多的主題，圍繞iOS動畫。如果我在這篇文章中遺漏了什麼，請在下麵的評論部分告訴我，我很樂意做這個補充！

作為一個開發者，有一個學習的氛圍跟一個交流圈子特別重要，這是一個我的iOS交流群：1012951431 不管你是小白還是大牛歡迎入駐，分享BAT,阿裡面試題、面試經驗，討論技術，大家一起交流學習成長！

另附上一份各好友收集的大廠面試題，進群可自行下載！

用UIKit和UIView在視圖上執行iOS動畫

60 Fps動畫

核心框架

UIKIT/UIVIEW動畫

動畫(附圖：動畫：完成)

animateWithDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion

UIViewProperty動畫

什麼是Aframe?

動畫關鍵幀

共動畫

UIView+核心動畫

UIKITDYNAMICS

UIKitDynamic動畫

UIKitDynamicBehavior

性能調諧

Core Animation儀器

繪圖

光柵化

包起來

什麼是A`frame`?

`Core Animation`儀器