關于App的一些迷思以及一些動畫效果開源庫的推薦

dwd4 9年前發布 | 82K 次閱讀 iOS開發移動開發 APP

前言

說來慚愧，iOS 8 都已經發布半年多了，而我最近才開始學習iOS 7的一些新特性，才開始去理解 iOS 7 所帶來的一些界面交互的變化。

一切的源起還是來自非死book 在去年發布的社交、新聞聚合閱讀應用非死book Paper，當然我們在這里討論的不是該應用是否達到了當初非死book發布它時所定的目標，而是在于它那出色的交互設計，并從中學習到點東西。至于如何出色請見它的宣傳視頻，同時可以強烈推薦移步到美區 App Store 的 Paper 頁面下載一個把玩下。（什么？沒有美區賬號！那就多看幾遍的宣傳視頻吧！）讓我們來扒扒這一應用后面的團隊，該應用的UI設計師是 Mike Matas，聽到這個名字不要害怕，更不要緊張，因為我跟你一樣對他一無所知，抱著好奇的心態接著往下扒吧。他是這樣的一個人：

15 歲高中輟學，加入了 The Omni Group。18 歲創立自己的第一個公司 Delicious Monster。2005 年 WWDC 設計作品 Delicious Library 摘得了最佳 Mac OS X 用戶體驗第一名和最佳 Mac OS X 產品第二名。19 歲加入蘋果公司，設計了 iPhone 上的 Settings.app, Photos.app, Camera.app, Maps.app 以及電池圖標，還有 Mac 上的 Photo Booth 和 Time Machine。2011年夏天創辦他聯合創辦的 Push Pop Press 被非死book 收購了。

然后，我們在來看看他創辦的Push Pop Press做了哪些事？他跟美國前總統、2007年諾貝爾和平獎主阿爾·戈爾合作一起開發了 Our Choice 這個號稱“下一代電子書的典范”的環保類電子書App。Our Choice 有超過400張可互動的圖和表，每一張在文字中的附圖都能利用手指放大，有一些圖表還可以用手指碰觸其中的圖案或橫條，然后圖中就會顯示更詳細的內容或解說。溢美之話不多說，照例放個Vimeo上的宣傳視頻給大家看看，還有這篇《劃時代的愛地球電子書--戈爾的Our Choice》。如果你因為沒有美區 App Store 賬號而下載不到 Paper 的話，那恭喜你，你可以在中國區的App Store下載到 Our Choice，RMB 30。如果你還沒有被我的啰嗦所打敗，或者你已經對我啰嗦的話語感到深惡痛絕，那你可以出門左拐到優酷看看在 Mike Matas 在 TED 上的《下一代的電子書》演講。

說了這么多廢話之后，終于可以再回到正題了！如果你體驗完了Our Choice 和 Paper 這兩款 App后，你會發現他們的交互和動畫幾乎如出一轍。對，他們都是 Kimon Tsinteris 開發的。那么問題又來了，Kimon Tsinteris 這個又是誰呢？他是Push Pop Press 的聯合創始人，曾在蘋果擔任高級工程師，并參與了 iPhone 和iPad 上的軟件研發（iPhone的指南針及地圖）。2011年，非死book收購了他的公司，此后他便和 Mike Matas 加入了非死book負責非死book iOS版本的開發。Mike Matas 和 Kimon Tsinteris 他們都有一個共同的特點，那就是不滿足于蘋果自身動畫框架的單調，他們認為：

隨著觸屏設備的不斷發展，用戶需要更加逼真的動畫形式。對于用戶來說，如果觸摸屏上的元素可以對其觸摸動作作出反饋，那么它也應該對其觸摸的速率作出反饋。這也將是移動設備上動畫效果接下來的發展趨勢。

他們創辦的Push Pop Press 就一直致力于創造一個逼真的、充滿物理效應的體驗，伴隨著被非死book收購后，他們這一理念也就自然而然的帶到了他們所負責的產品身上，Paper 就是這樣的一個產物。故事到此當然還沒有結束，他們發布完Paper 之后，更進一步將其背后的動畫引擎POP開源了！它目前在Github上有著10250個Star。借助于POP這個動畫引擎，iOS 開發者將至少有6類動畫效果可以使用了，如果再把自定義功能加進去，那么在眾多開發者的努力下人機交互動畫將產生無限多的可能。而這正是Pop引擎背后的工程師所愿意看到的。讓我們來看看 Kimon Tsinteris 本人對這個開源庫的介紹：

今天我們開源了實現Paper應用平滑動畫和轉場效果的動畫引擎Pop。使用動態動畫(dynamic animations)而不是傳統的靜態動畫(static animations)，Pop使常見的滑動(scrolling)、彈跳(bouncing)、折疊(unfolding)等效果充滿了活力，也使 Paper給人一種耳目一新的感覺。

手勢交互的革新迎來了新的一輪軟件設計的浪潮。人們可以用手指直接操作屏幕上的元素，（而不像以前，需要一支筆），這就降低了交互的間接性（反著說，就是交互更直接），于是，人們又提出更進一步的要求：既然觸屏可以得到處理，那么不同速度的滑屏操作也應該得到處理。

當我在2010年聯合創辦Push Pop Press公司的時候，我們的目標就是要創造一種可行的、基于物理效果(physics-everywhere)的體驗。我們在尋求一種可以使人們非常愉悅、輕松的使用整個應用的解決方案，就像我們使用UIScrollView那樣的順滑。

所以從上面的這些我們可以看到，他們倡導的是隨著觸屏設備的不斷發展，在我們的項目中應該充分的利用觸屏設備的手勢交互功能，App應該對用戶的手勢做一些相應地反應，這些反應可以包括滑動的速度、滑動的方向、重力感應、用戶晃動手機的方向等等，通過這些反應來提供給用戶一種愉悅、輕松的體驗。

在 iOS 7 之前，我們看到的大量的App都是通過iOS系統提供的Core Animation framework所支持的傳統的靜態動畫來實現一些簡單的線性動畫(linear)、淡入效果(ease-in)和淡出效果(ease-out)。

iOS系統支持提供的基礎的靜態動畫

</div>

常規的App界面操作大體是這樣的：用戶點擊界面上的按鈕，界面通過利用上述的靜態動畫做出相應的反應，比如最常見的 NavigationController中界面切換的“左進右出”動畫、模態視圖的“下進下出”動畫。這些靜態動畫大部分沒有利用到觸屏設備的手勢交互功能。那些不滿足現狀的開發者們想做出精彩的動態動畫效果大都花了九牛二虎之力，印象最深的就是看到一些應用將模態視圖的“下進下出”動畫硬生生的改成的了NavigationController的“左進右出”展示動畫，然后就經常遇到視圖控制器混亂的問題，這樣的代碼也不利于維護和修改。當然在iOS 7之前蘋果引入了一些方法和類來解決一些問題，如UIPageViewController類、UICollectionViewController 類，以及addChildViewController:、removeFromParentViewController、 transitionFromViewController:toViewController: duration:options:animations: completion:等方法。但是，這些還是類的使用還是有著很大的局限性。尤其是addChildViewController:、 removeFromParentViewController、 transitionFromViewController:toViewController: duration:options:animations: completion: 這幾個方法的重用性幾乎為0。

一切的轉變發生在 iOS 7，iOS 7最大的變化就是從 iOS 6 的擬物化換成扁平化。同時，加入了大量的動態效果。這里貼幾張圖來看看：圖一是在墻紙選取界面多了一個動態墻紙選項，如果你選擇了動態墻紙，在主頁面當你左右晃動手機時，墻紙也會跟著動。圖二是在應用中，你現在可以通過右滑手勢返回到上一級界面，隨著你的滑動，界面會跟著移動。圖三是Messages的彈簧效果。從這些我們可以直觀的看到，從iOS 7開始，蘋果也開始鼓勵使用動態動畫。

圖一：動態墻紙設置

</div>

圖二：右滑返回上一級界面

</div>

圖三：消息應用

</div>

既然有直觀的，那肯定就會用戶不直觀的東西。那就是 iOS 7 的SDK（Software Development Kit，軟件開發工具包）。

通過 iOS 7 的SDK（真的是罪過，現在都已經是iOS 8了，我還在研究iOS 7）我們可以看到這幾個東西：

1、UIKit Dynamics （UIKit動力學）

UIKit Dynamics是UIKit中一套完整的物理引擎。它可以讓我們在程序中對界面元素添加一些行為從而達到諸如重力、彈簧等現實中的動作行為。你只需在引擎中注冊界面元素，并指定好物理行為，其他的事就交給物理引擎去完成了。

2、Motion Effects

Motion Effects 可以創建很酷的視差效果，就像我們上面提到的首屏動態壁紙。它基于Apple提供的重力加速器提供的數據計算分析，使我們的界面元素根據移動設備的傾斜方向做出相應的反應。

3、Custom View Controller Transitions（自定義視圖控制器轉場）

它是給出了一套完整的自定義View Controller之間切換效果的方案，你可以通過它簡單、方便的自定義各種界面切換效果。可以輕松的就改變NavigationController中界面切換的“左進右出”動畫和模態視圖的“下進下出”動畫。

這就是iOS 7上關于交互的重大改變，現在你可以通過有效的利用這些特性開發出獨一無二的動畫，玩出各種各樣的特效，也讓人機交互動畫產生無限多的可能。

本文的目的不是介紹和講解這些新特性，所以在此不做任何介紹。

正文

盡管 iOS 7 帶來了如此偉大的特性（請允許我用“偉大”來形容），但是遺憾是，在日常常用的App中你并不容易看到這些變化，大部分應用還是采用著老式的靜態動畫，即使iOS 8都已經推出了大半年，即使在網絡上可以輕松的找到這些新特性的教程，即使你可以看到國外大量的采用這些新特性的應用并帶來了全新的交互體驗。。。。。。

我覺得可能有以下幾個原因：

1、國內很多常用的應用都還支持著iOS 6，甚至是iOS 5，所以導致他們沒有辦法很快的用上最新的特性；

2、很多公司覺得沒必要在市場反響很好、有著大量用戶的產品上做這些實驗設計，即使他們做這些設計易如反掌；

3、設計師、產品經理、工程師對于系統的一些新特性沒有及時的了解、學習跟交流，所以會出現不知道系統可以實現這些效果，即使是知道了這些特性，但是如何應用，如何設計動畫又是個頭疼的問題。

對于第2點顯然我們沒有什么能夠做的，但對于第1點跟第3點我覺得我們還是可以做點力所能及的事的。

首先，對于第1點就是多鼓勵身邊的人將他們的手機系統升級到最新的系統，這不僅僅是為了能讓開發者可以更加放心地、更加容易地開發出優秀的App, 同時，由于系統的更新往往伴隨著舊系統一些bug、漏洞的修復，所以也可以讓用戶更加安全、放心的使用手機，畢竟手機現在在我們日常生活中得地位是如此的重要。

其次，對于第二點，就是我們今天的重點了（現在才到重點！你應該有種把我殺了的沖動吧！）。由于最近在負責一個新項目，在交互、動畫的效果和實現上嘗試了很多，看了很多Github上的開源庫，雖然還不能簡單、輕松的理解和實現那些效果，但還是覺得收獲滿滿。古人云“獨樂樂，不如眾樂樂”，所以在此把看到的覺得不錯的、有意思的效果列出來供大家學習參考，由于本文不是技術文章，所以只看效果、只給Github鏈接地址，不討論具體實現方式等等。