介紹Facebook的Pop
在2014年4月忆谓，F(xiàn)acebook的工程師Kimon Tsinteris發(fā)布了Pop贪薪，F(xiàn)acebook構(gòu)建用來(lái)支撐他們app Paper的一個(gè)彈簧動(dòng)畫(huà)框架屯断。這個(gè)框架的起源其實(shí)早于Facebook，Kimon構(gòu)建了其中的大部分用來(lái)支撐他被Facebook于2011年收購(gòu)的電子書(shū)公司Push Pop Press携茂。你可能記得Push Pop Press钞钙，它獲得了蘋(píng)果的設(shè)計(jì)獎(jiǎng)，作為iPad的電子書(shū)刊侯，為被稱為“Our Choice”的AI Gore所構(gòu)建章办。
點(diǎn)擊觀看AI Gore’s ‘Our Choice’ - an iPad app視頻
“Our Choice”在2011年確實(shí)很有開(kāi)創(chuàng)性。它是最早的有完整的基于手勢(shì)來(lái)操作界面內(nèi)容的iOS app之一滨彻。屏幕上的每個(gè)視覺(jué)元素都是彈簧動(dòng)畫(huà)的藕届，有著很好的彈性和響應(yīng)，這是從所未見(jiàn)的亭饵。
時(shí)間快進(jìn)到2014年早期休偶，來(lái)介紹一些Facebook的Paper。Paper同樣包含基于手勢(shì)的控制和彈簧動(dòng)畫(huà)辜羊，并且可以發(fā)現(xiàn)踏兜，它全部基于Al Gore三年前的電子書(shū)的工作词顾。對(duì)我們開(kāi)發(fā)者來(lái)說(shuō)幸運(yùn)的是，F(xiàn)acebook認(rèn)為他們的動(dòng)畫(huà)框架Pop值得公開(kāi)到社區(qū)中去碱妆，這樣其他人也能構(gòu)建酷的基于彈簧動(dòng)畫(huà)的app了肉盹。
Pop VS Core Animation
當(dāng)我們?cè)诒緯?shū)前面討論Core Animation的時(shí)候，以及它是如何在一個(gè)基本的水平上工作的山橄，我結(jié)識(shí)了model layer和presentation layer的不同垮媒。模型層表示已知的準(zhǔn)確的CALayer預(yù)加到動(dòng)畫(huà)上的屬性。如果你添加一個(gè)動(dòng)畫(huà)到layer上航棱，然后在動(dòng)畫(huà)進(jìn)行到一半時(shí)問(wèn)模型層它的屬性是什么睡雇，答案是不會(huì)反映任何動(dòng)畫(huà)當(dāng)前的內(nèi)容的。如果你想要知道動(dòng)畫(huà)中實(shí)時(shí)的饮醇、運(yùn)動(dòng)中的layer的值它抱，你就得去看表現(xiàn)層。而一旦動(dòng)畫(huà)完成后朴艰，表現(xiàn)層就會(huì)消失观蓄，所以如果你不想你的layer回到開(kāi)始的位置，你就需要設(shè)置模型層的屬性來(lái)匹配動(dòng)畫(huà)的最終狀態(tài)祠墅。
這就是Core Animation的工作侮穿。這是蘋(píng)果為了構(gòu)建一個(gè)iPhone上用的動(dòng)畫(huà)框架在很多年前做出的一個(gè)基本的實(shí)現(xiàn)選擇。而因?yàn)镴NWSpringAnimation簡(jiǎn)單地為我們開(kāi)發(fā)了一個(gè)依然是Core Animation對(duì)象的CAKeyframeAnimation毁嗦，我們還是需要設(shè)置動(dòng)畫(huà)模型層的最終值來(lái)在完成時(shí)保持住亲茅。
Pop是完全不同的！
Pop不使用Core Animation來(lái)執(zhí)行任何它提供的動(dòng)畫(huà)功能狗准。不同之處在于它設(shè)置了一個(gè)特殊的時(shí)間對(duì)象來(lái)每1/60秒執(zhí)行一次克锣。那個(gè)每秒執(zhí)行60次的代碼會(huì)直接基于下一個(gè)你在彈簧動(dòng)作中定義的位置更新任何你想要的屬性。沒(méi)有什么特別的腔长、額外的layer添加到你的元素中去袭祟，Pop直接在UIView或者CALayer上改變屬性，或者捞附，有趣地在任何你想要的對(duì)象類型上改變巾乳。這意味著在動(dòng)畫(huà)中的任何時(shí)候，你都可以直接接觸改變的屬性的當(dāng)前值而不用跳到任何表現(xiàn)層鸟召。并且更好的是想鹰，你不需要單獨(dú)設(shè)置最終值讓動(dòng)畫(huà)在那逗留，因?yàn)閯?dòng)畫(huà)始終在實(shí)際的真實(shí)值上工作药版。
這個(gè)Pop用來(lái)支撐整個(gè)框架的時(shí)間對(duì)象是CADisplayLink，它可以看做是NSTimer的一個(gè)更高級(jí)版本喻犁，NSTimer是Mac游戲開(kāi)發(fā)者常年用來(lái)在他們的Mac和iOS游戲中一幀幀運(yùn)行代碼的槽片。NSTimer可以在你想要的任何時(shí)候調(diào)用任何你想調(diào)用的代碼何缓，不斷地重復(fù)或者只調(diào)用一次。如果你想每5秒鐘調(diào)用一次代碼就可以使用NSTimer來(lái)做还栓÷道或者如果你想要每秒調(diào)用代碼60次，也可以用NSTimer來(lái)做剩盒，但當(dāng)這么快地調(diào)用代碼的時(shí)候（比如每次運(yùn)動(dòng)一點(diǎn)點(diǎn)像素谷婆，一步步地動(dòng)畫(huà)一個(gè)界面元素），這個(gè)時(shí)間對(duì)象就會(huì)失去準(zhǔn)確的同步刷新頻率辽聊，你可能會(huì)丟失一些幀纪挎，從而導(dǎo)致一些奇怪的短暫跳躍。
這就是CADisplayLink施展之處跟匆。CADisplayLink就是設(shè)計(jì)來(lái)避免這個(gè)問(wèn)題的异袄，因?yàn)樗皇窃O(shè)置時(shí)間間隔，它一遍遍地調(diào)用你的方法的速率完全取決于屏幕的刷新頻率玛臂。它隨著屏幕的刷新來(lái)啟動(dòng)你的代碼烤蜕，這樣你就有了最好的機(jī)會(huì)來(lái)每秒更新你的界面60次（平滑感知?jiǎng)幼鞯臅r(shí)間）。這就是Pop用來(lái)將動(dòng)畫(huà)一像素一像素迹冤、1/60秒一次推動(dòng)的方法讽营。
查看完整合集（喜歡請(qǐng)打星~）：https://github.com/Cloudox/Motion-Design-for-iOS
