主要內容

• 基礎 (Basics)
• 可交互與可中斷的動畫(Interactive and Interruptible Animations)
• UIVew Property Animator新屬性(New Property Animator Behaviors)
• 協同動畫(Coordinating Animations)
• 提示與技巧(Tips and Tricks)

基礎(Basics)

傳統的UIView動畫都是線性的動畫

屏幕快照 2017-06-21 下午6.59.49.png

iOS10中增加的UIView Property Animator對比傳統UIView動畫有以下特性:

• 自定義時間函數(Custom timing)
  通過UICubicTimeParamters函數，指定自己想要的時間曲線

  
  
  屏幕快照 2017-06-21 下午7.03.18.png

• 可交互 (Interactive)

屏幕快照 2017-06-21 下午7.05.43.png

在Session 一個普通的view位移動畫Demo中，對在原點的view添加了pan手勢。在手勢開始是添加UIView Property Animator并對其調用pauseAnimation使其進入active狀態。
隨著手勢change過程中，不斷設定UIView Property Animator的完成進度。手勢結束時就讓UIView Property Animator從之前設定的完成進度開始進行動畫

但是交互時候有個細節要注意。就是 暫停UIView Property Animator不斷設置其完成進度時候，它是按線性時間來設置(不管你是否使用了自定義時間曲線)

屏幕快照 2017-06-21 下午7.13.35.png

這上圖在其暫停時不斷設定它的完成進度，可以看到紫色的線性時間，灰色的是創建UIView Property Animator時自定義的時間曲線

屏幕快照 2017-06-21 下午7.15.10.png

但是手勢結束開始動畫時，它會根據之前的進度從線性時間開始點轉換為自定義時間曲線的相應比例并開始。

• 可中斷 (Interruptible)

屏幕快照 2017-06-21 下午7.17.36.png

屏幕快照 2017-06-21 下午7.18.50.png

還是以view的位移動畫為例子。不同的是在view位移過程中進行手勢的檢測。
在手勢Begin時檢測是否已有UIView Property Animator，若沒則創建，并暫停它；
在手勢Change過程中不斷改變它的完成進度；
在手勢End時候從最新的完成進度開始進行動畫
同時也要注意設置其進度時的所用的時間曲線

正常動畫時按自定義時間曲線來

暫停時按照線性時間曲線來

恢復動畫時按照指定的時間曲線開始

• 可相應 (Responsive)

UIView Property Animator新屬性

var scrubsLineary: Bool

A Boolean value indicating whether a paused animation scrubs linearly or uses its specified timing information.

var pauseOnCompletion: Bool

之前的UIView Property Animator finish后會進入inactive狀態。設置這個屬性為YES后，完成動畫后會進入pause狀態，方便你進行逆動畫(revers)

提示與技巧(Tips and Tricks)

屏幕快照 2017-06-21 下午7.36.23.png

后面的Demo就是把點擊評論按鈕彈出評論視圖控制器的過程變成可交互和可中斷和可逆向的動畫，在這過程中添加了若干協同動畫：包括UIVisualEffectView的模糊blurAnimator；標題文字屬性(大小 位置)CGAffineTranasform的animator動畫，視圖控制器邊框圓角的animator動畫，甚至是幀動畫的animator動畫

屏幕快照 2017-06-21 下午7.43.01.png

屏幕快照 2017-06-21 下午7.44.04.png