《Motion Design for iOS》（三十九）

標籤：

介紹Facebook的Pop

在2014年4月，Facebook的工程師Kimon Tsinteris發布了Pop，Facebook構建用來支撐他們app Paper的一個彈簧動畫架構。這個架構的起源其實早於Facebook，Kimon構建了其中的大部分用來支撐他被Facebook於2011年收購的電子書公司Push Pop Press。你可能記得Push Pop Press，它獲得了蘋果的設計獎，作為iPad的電子書，為被稱為“Our Choice”的AI Gore所構建。

點擊觀看AI Gore’s ‘Our Choice’ - an iPad app視頻

“Our Choice”在2011年確實很有開創性。它是最早的有完整的基於手勢來操作介面內容的iOS app之一。螢幕上的每個視覺元素都是彈簧動畫的，有著很好的彈性和響應，這是從所未見的。

時間快進到2014年早期，來介紹一些Facebook的Paper。Paper同樣包含基於手勢的控制和彈簧動畫，並且可以發現，它全部基於Al Gore三年前的電子書的工作。對我們開發人員來說幸運的是，Facebook認為他們的動畫架構Pop值得公開到社區中去，這樣其他人也能構建酷的基於彈簧動畫的app了。

Pop VS Core Animation

當我們在本書前面討論Core Animation的時候，以及它是如何在一個基本的水平上工作的，我結識了model layer和presentation layer的不同。模型層表示已知的準確的CALayer預加到動畫上的屬性。如果你添加一個動畫到layer上，然後在動畫進行到一半時問模型層它的屬性是什麼，答案是不會反映任何動畫當前的內容的。如果你想要知道動畫中即時的、運動中的layer的值，你就得去看錶現層。而一旦動畫完成後，表現層就會消失，所以如果你不想你的layer回到開始的位置，你就需要設定模型層的屬性來匹配動畫的最終狀態。

這就是Core Animation的工作。這是蘋果為了構建一個iPhone上用的動畫架構在很多年前做出的一個基本的實現選擇。而因為JNWSpringAnimation簡單地為我們開發了一個依然是Core Animation對象的CAKeyframeAnimation，我們還是需要設定動畫模型層的最終值來在完成時保持住。

Pop是完全不同的！

Pop不使用Core Animation來執行任何它提供的動畫功能。不同之處在於它設定了一個特殊的時間對象來每1/60秒執行一次。那個每秒執行60次的代碼會直接基於下一個你在彈簧動作中定義的位置更新任何你想要的屬性。沒有什麼特別的、額外的layer添加到你的元素中去，Pop直接在UIView或者CALayer上改變屬性，或者，有趣地在任何你想要的物件類型上改變。這意味著在動畫中的任何時候，你都可以直接接觸改變的屬性的當前值而不用跳到任何錶現層。並且更好的是，你不需要單獨設定最終值讓動畫在那逗留，因為動畫始終在實際的真實值上工作。

這個Pop用來支撐整個架構的時間對象是CADisplayLink，它可以看做是NSTimer的一個更進階版本，NSTimer是Mac遊戲開發人員常年用來在他們的Mac和iOS遊戲中一幀幀運行代碼的。NSTimer可以在你想要的任何時候調用任何你想調用的代碼，不斷地重複或者只調用一次。如果你想每5秒鐘調用一次代碼就可以使用NSTimer來做。或者如果你想要每秒調用代碼60次，也可以用NSTimer來做，但當這麼快地調用代碼的時候（比如每次運動一點點像素，一步步地動畫一個介面元素），這個時間對象就會失去準確的同步重新整理頻率，你可能會丟失一些幀，從而導致一些奇怪的短暫跳躍。

這就是CADisplayLink施展之處。CADisplayLink就是設計來避免這個問題的，因為它不是設定時間間隔，它一遍遍地調用你的方法的速率完全取決於螢幕的重新整理頻率。它隨著螢幕的重新整理來啟動你的代碼，這樣你就有了最好的機會來每秒更新你的介面60次（平滑感知動作的時間）。這就是Pop用來將動畫一像素一像素、1/60秒一次推動的方法。

查看完整合集：https://github.com/Cloudox/Motion-Design-for-iOS
著作權：http://blog.csdn.net/cloudox_

《Motion Design for iOS》（三十九）