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

前言
說來慚愧,iOS 8 都已經發布半年多了,而我最近才開始學習iOS 7的一些新特性,才開始去理解 iOS 7 所帶來的一些界面交互的變化。
一切的源起還是來自 Facebook 在去年發布的社交、新聞聚合閱讀應用Facebook Paper,當然我們在這里討論的不是該應用是否達到了當初Facebook發布它時所定的目標,而是在于它那出色的交互設計,并從中學習到點東西。至于如何出色請見它的宣傳視頻,同時可以強烈推薦移步到美區 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 被 Facebook 收購了。

然后,我們在來看看他創辦的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 ChoicePaper 這兩款 App后,你會發現他們的交互和動畫幾乎如出一轍。對,他們都是 Kimon Tsinteris 開發的。那么問題又來了,Kimon Tsinteris 這個又是誰呢?他是Push Pop Press 的聯合創始人,曾在蘋果擔任高級工程師,并參與了 iPhone 和iPad 上的軟件研發(iPhone的指南針及地圖)。2011年,Facebook收購了他的公司,此后他便和 Mike Matas 加入了Facebook負責Facebook iOS版本的開發。Mike MatasKimon Tsinteris 他們都有一個共同的特點,那就是不滿足于蘋果自身動畫框架的單調,他們認為:
隨著觸屏設備的不斷發展,用戶需要更加逼真的動畫形式。對于用戶來說,如果觸摸屏上的元素可以對其觸摸動作作出反饋,那么它也應該對其觸摸的速率作出反饋。這也將是移動設備上動畫效果接下來的發展趨勢。

他們創辦的Push Pop Press 就一直致力于創造一個逼真的、充滿物理效應的體驗,伴隨著被Facebook收購后,他們這一理念也就自然而然的帶到了他們所負責的產品身上,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系統支持提供的基礎的靜態動畫

常規的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開始,蘋果也開始鼓勵使用動態動畫。


圖一:動態墻紙設置

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

圖三:消息應用

既然有直觀的,那肯定就會用戶不直觀的東西。那就是 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鏈接地址,不討論具體實現方式等等。
1、轉場動畫
VCTransitionsLibrary




AnimatedTransitionGallery


ZFDragableModalTransition

GTAppMenuController

ICGTransitionAnimation

CBHazeTransitionViewController

CSStickyHeaderFlowLayout



PinterestAnimator


2、輸入框
RPFloatingPlaceholders

JVFloatLabeledTextField

LTBouncyPlaceholder

3、加載動畫
PWProgressView

UAProgressView
RJImageLoader


PQFCustomLoaders

4、下拉動畫
UzysAnimatedGifPullToRefresh

Pull-to-Refresh.Rentals-iOS

CBStoreHouseRefreshControl


5、UITableCell
SWTableViewCell

MGSwipeTableCell





6、視圖展示
MGSpotyViewController

RKCardView


HAPaperViewController

AMLoginViewController(背景模糊、加視頻)


VideoCover-iOS-Demo(背景加視頻)

DVOBouncer

UIView-Shake

AMWaveTransition

URBMediaFocusViewController

TwitterBirdAnimationCBZSplashView 效果一樣

RKNotificationHub

SOZOChromoplast

VVBlurPresentation

TinderSimpleSwipeCards

ZLSwipeableView

RGCardViewLayout

AFBlurSegue

BRFlabbyTable


VPRubberMenu

YFCardTransitions

TGLStackedViewController

CXCardView


7、UILabel
LazyFadeInView
RQShineLabel

LTMorphingLabel






8、UIButton
ZFRippleButton


BFPaperCheckbox

YLLongTapShare

VBFPopFlatButton

9、UINavigationBar
TLYShyNavBar


LTNavigationBar


BLKFlexibleHeightBar


BMYScrollableNavigationBar

最后
如果你看到了這里,那么我真的太感謝你了!謝謝!

附錄:
1、Facebook開放動畫引擎Pop,你也可以打造和Paper一樣酷的應用了
2、Introducing Pop, the animation engine behind Paper
3、Facebook Paper背后的動畫引擎Pop介紹(譯文)

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,885評論 6 541
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,312評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,993評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,667評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,410評論 6 411
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,778評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,775評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,955評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,521評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,266評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,468評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,998評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,696評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,095評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,385評論 1 294
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,193評論 3 398
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,431評論 2 378

推薦閱讀更多精彩內容

  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,163評論 4 61
  • 從窗外望去,樹上的枝頭,又冒出一丁點兒嫩綠,遠看似一個綠色的葉苞,就等著再次滋潤一場春雨,就會燦爛地綻放。清...
    馨享事承閱讀 440評論 0 1
  • [滿庭芳]中秋 作者:曉虹 穹拱秋高, 風輕兮爽, 欲別西去夕陽。 茗茶醇釀, 宮餅暗飄香。 擺案執梾翹首, 待宵...
    陳霓裳閱讀 396評論 0 25
  • 打從記事起,我的頭發總是短短的,最長不超過衣領。對于喜歡臭美的女生,也曾多次懇求媽媽留住我的頭發(別剪太短),可媽...
    愛如你我閱讀 452評論 1 4