[譯]我們是如何開發(fā)ColorMatchTabs動(dòng)畫

原文:How We Developed ColorMatchTabs Animation for iOS

在應(yīng)用中有很多方式去組織導(dǎo)航欄:tab bars 辆毡、side menus 纵隔、Tinder-like swipes ,然而,大多數(shù)現(xiàn)有的解決方案都有一個(gè)問題,對(duì)于大屏幕手機(jī)是很不方便的,用戶必須通過去不斷地點(diǎn)擊圖標(biāo)來(lái)切換屏幕据块。

我們決定分享我們創(chuàng)建用戶界面動(dòng)畫的概念码邻,解決了在大屏幕上的應(yīng)用程序?qū)Ш降膯栴}折剃。

content_review-app-concept.gif

[ ColorMatchTab 動(dòng)畫,在 DribbbleGithub 可以查看]

ColorMatchTab動(dòng)畫有什么用像屋?

開發(fā)這個(gè)動(dòng)畫是為了說明一個(gè)概念在我們開發(fā)的一款評(píng)論應(yīng)用怕犁,這個(gè)應(yīng)用將顯示用戶周圍的有趣的地方,也可以他們留下評(píng)論和閱讀其他人留下的評(píng)論己莺。動(dòng)畫顯示了四種不同的類別:產(chǎn)品奏甫、地點(diǎn)評(píng)論朋友凌受,就像四個(gè)不同的屏幕阵子。

我們?cè)?Relativewave 完成了這個(gè)動(dòng)畫的原型,Relativewave 是一個(gè)非常好的制作原型的工具胜蛉。

ColorMatchTab 動(dòng)畫我們?yōu)榱藚^(qū)分不同的類型的 tab bar 采用了彩色的圖標(biāo)挠进。為了避免混亂,每個(gè)圖標(biāo)誊册,以及每個(gè)顏色领突,都是唯一的一個(gè)特定類別。當(dāng) tab bar 的其中一欄變成活躍案怯,一個(gè)填充著相應(yīng)的顏色君旦,并且出現(xiàn)相應(yīng)的分類標(biāo)題的圓角矩形使它非常突出,這樣非常清楚哪些tab bar是當(dāng)前活躍的嘲碱。

用戶所看到屏幕是整體的一部分金砍,通過應(yīng)用引導(dǎo)用戶進(jìn)一步了解每個(gè)屏幕。Call-to-action 按鈕很容易發(fā)現(xiàn)麦锯,并幫助用戶用自己的方式了解應(yīng)用恕稠。

我們使用了 FAB(浮動(dòng)操作按鈕)來(lái)創(chuàng)建一個(gè) Call-to-action ,是很難不被注意到的离咐。容易實(shí)現(xiàn)在屏幕底部中間部分創(chuàng)建這個(gè)按鈕谱俭,特別是對(duì)更大屏幕的設(shè)備奉件。

當(dāng)我們的設(shè)計(jì)師創(chuàng)造了這個(gè)概念后,我們的任務(wù)給動(dòng)畫帶來(lái)生命力昆著。

正如你可以看到下面县貌,我們開發(fā)了幾個(gè)動(dòng)畫組件:一個(gè)底部欄,一個(gè)頂部欄凑懂,有內(nèi)容的頁(yè)面煤痕,和屏幕的轉(zhuǎn)場(chǎng)。每一個(gè)組件都有開發(fā)難點(diǎn)接谨。

底部按鈕

為了實(shí)現(xiàn)這個(gè)底部按鈕我們調(diào)整每個(gè)元素摆碉,使它們從圓心等距。開發(fā)人員可以根據(jù)他們的需要改變圓的半徑脓豪,從而在圓的周圍調(diào)整元素的位置巷帝。您還可以調(diào)整尺寸大小和動(dòng)畫持續(xù)時(shí)間,并選擇您喜歡任何圖像作為圖標(biāo)扫夜。

content_reviews.png

頂部欄

一年前楞泼,蘋果宣布了一項(xiàng)新的UI組件稱為 UIStackViewWWDC sessionApple’s documentation )。 UIStackView 允許你創(chuàng)建多個(gè)沒有任何約束的成員視圖笤闯。你只設(shè)置分配模式和它怎樣工作堕阔。在內(nèi)部機(jī)制下,它會(huì)自動(dòng)布局颗味。但這對(duì)你來(lái)說意味著什么呢超陆?這意味著你不必添加約束,在你需要的的時(shí)候你可以這樣做浦马。如果視圖是隱藏的 UIStackView 也會(huì)自動(dòng)調(diào)整約束时呀。

這個(gè)實(shí)現(xiàn)非常簡(jiǎn)單 - 我們會(huì)展示在 UIStackView 下的各種各樣的 UIViews

您可能注意到頂部菜單是導(dǎo)航欄的一部分,有幾種方法來(lái)實(shí)現(xiàn)一個(gè)自定義導(dǎo)航欄捐韩。蘋果有一個(gè)很好的示例項(xiàng)目退唠,顯示如何創(chuàng)建自定義的導(dǎo)航欄(特別是擴(kuò)展和自定義導(dǎo)航欄)。我們決定使用一個(gè)擴(kuò)展的導(dǎo)航欄荤胁,但您可以選擇一個(gè)自定義的導(dǎo)航欄來(lái)提供更多的原生行為瞧预。

頁(yè)面內(nèi)容

頁(yè)面是通過 UIScrollView 構(gòu)建的,并且包含視圖控制器在里面仅政。

通過檢測(cè)當(dāng)前索引的內(nèi)容偏移量垢油,當(dāng)一個(gè)視圖超過50%出現(xiàn)在屏幕上。這個(gè)索引值將會(huì)發(fā)生變化圆丹,然后我們觀察到當(dāng)前的內(nèi)容偏移量來(lái)檢測(cè)變化滩愁。

當(dāng)我們從第一個(gè)到第四個(gè) tab bar 切換的時(shí)候,為了避免屏幕閃爍辫封,我們先隱藏在屏幕的所有內(nèi)容硝枉,然后在切換后再次顯示所有內(nèi)容廉丽。這是 ColorMatchTabs 動(dòng)畫的一部分。我們沒有使用 UIPageViewController 妻味,這是一個(gè)明智的選擇正压,因?yàn)樗鼘?shí)現(xiàn)起來(lái)達(dá)不到同樣的流暢性能。

我們也不需要重復(fù)使用視圖控制器责球,因?yàn)?tab bar 預(yù)計(jì)不會(huì)有超過五個(gè)(就像 UITabBarController )焦履。這個(gè)類的這個(gè)接口也類似于 tab bar 控制器,你所需要做的就是設(shè)置一個(gè)視圖控制器的數(shù)組

content_menu.png

轉(zhuǎn)場(chǎng)

用戶按下底部按鈕(粉紅色按鈕)雏逾,屏幕之間切換時(shí)都需要通過轉(zhuǎn)場(chǎng)嘉裤。

新的視圖出現(xiàn)從底部的按鈕的中心,逐漸擴(kuò)大栖博,直到它取代以前的視圖屑宠。我們實(shí)現(xiàn)通過 CircleTransition 類來(lái)實(shí)現(xiàn)轉(zhuǎn)場(chǎng)動(dòng)畫,并且實(shí)現(xiàn)相應(yīng)的 UIViewControllerAnimatedTransitioning 協(xié)議方法笛匙。

這個(gè)只顯示圓內(nèi)視圖侨把,隱藏圓外視圖的圓,是通過 CALayermask 屬性實(shí)現(xiàn)的妹孙,這表明圈內(nèi)的一切隱藏一切超越它。要達(dá)到這種效果我們使用 UIBezierPath 兩實(shí)例化兩個(gè)圓圈获枝,一個(gè)小尺寸和一個(gè)足以覆蓋整個(gè)屏幕大的圓蠢正。我們還創(chuàng)建了一個(gè)新的 CAShapeLayer 暫時(shí)的圓遮蓋,最后的動(dòng)畫發(fā)生在這兩個(gè)軌跡之間省店。

控制器使用的動(dòng)畫遵循 UIViewControllerAnimatedTransitioningDelegate 協(xié)議嚣崭。接受該協(xié)議控制器,我們要顯示或隱藏懦傍,并要求我們返回一個(gè)接受 UIViewControllerAnimatedTransition 協(xié)議的對(duì)象雹舀。

這個(gè)轉(zhuǎn)場(chǎng)具有以下屬性:

  • 起點(diǎn)處— 動(dòng)畫這一點(diǎn)是在按鈕的中心,也是動(dòng)畫在屏幕上消失的一個(gè)點(diǎn)
  • 持續(xù)時(shí)間— 持續(xù)多長(zhǎng)時(shí)間
  • 模式— 一個(gè)可能的動(dòng)畫模式列表(隱藏和顯示)

Dropping items

Dropping items 可能是 ColorMatchTab 動(dòng)畫最有趣的部分粗俱。我們需要能夠?qū)D標(biāo)從動(dòng)畫的一個(gè)元素移動(dòng)到另一個(gè)元素说榆。要做到這一決定,我們決定使用臨時(shí)圖標(biāo)寸认。一旦臨時(shí)圖標(biāo)到達(dá)他們的目標(biāo)在屏幕上签财,在當(dāng)前的動(dòng)畫組件中隱藏它們,并顯示真正的圖標(biāo)偏塞。

為了確保這些圖標(biāo)正確顯示在不同的屏幕尺寸上唱蒸,我們必須做以下幾方面:

  • 顯示 tab bar 頂部的臨時(shí)圖標(biāo)
  • 隱藏 tab bar 的圖標(biāo)
  • 在主屏幕上臨時(shí)圖標(biāo)的轉(zhuǎn)場(chǎng)動(dòng)畫
  • 在模式視圖控制器上顯示臨時(shí)圖標(biāo)
  • 在模式視圖控制器上臨時(shí)圖標(biāo)的轉(zhuǎn)場(chǎng)動(dòng)畫
  • 在模式視圖控制器上隱藏臨時(shí)圖標(biāo)

菜單控制器

如果你想完全利用屏幕上所有的動(dòng)畫顯示,你必須為 MenuViewController 設(shè)置數(shù)據(jù)源灸叼。該數(shù)據(jù)源允許您自定義視圖控制器神汹、標(biāo)題庆捺、顏色、圖標(biāo):

public protocol ColorMatchTabsViewControllerDataSource: class {

func numberOfItems(inController controller: ColorMatchTabsViewController) -> Int
func tabsViewController(controller: ColorMatchTabsViewController, viewControllerAt index: Int) -> UIViewController
func tabsViewController(controller: ColorMatchTabsViewController, titleAt index: Int) -> String
func tabsViewController(controller: ColorMatchTabsViewController, iconAt index: Int) -> UIImage
func tabsViewController(controller: ColorMatchTabsViewController, hightlightedIconAt index: Int) -> UIImage
func tabsViewController(controller: ColorMatchTabsViewController, tintColorAt index: Int) -> UIColor

}

我們也提供了一個(gè)示例應(yīng)用程序屁魏,所以你可以打開它疼燥,運(yùn)行和學(xué)習(xí)如何將它使用在您的應(yīng)用中。

總結(jié)

我們希望我們實(shí)現(xiàn)的這個(gè) tab bar 是對(duì)你有用的蚁堤,尤其是看到它在屏幕之間非常流暢的滑動(dòng)醉者。我們將組件分成幾個(gè)部分描述,以便你可以將它作為單獨(dú)的項(xiàng)目或作為一個(gè)整體來(lái)使用披诗。

如果你在你的 Apps 中使用我們的解決方案撬即,我們將很高興。我們喜歡分享我們的經(jīng)驗(yàn)呈队,并總是高興地討論我們的工作剥槐。如果你決定在你的應(yīng)用中使用我們的部件,不要猶豫與我們聯(lián)系宪摧,我們將您添加到 'Readme' 中粒竖。如果你碰巧發(fā)現(xiàn)我們的部件有問題,在GitHub庫(kù)創(chuàng)建一個(gè)問題几于,我們會(huì)很樂意幫助你蕊苗!

ColorMatchTab 動(dòng)畫,在 DribbbleGithub 可以查看沿彭。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末朽砰,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子喉刘,更是在濱河造成了極大的恐慌瞧柔,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,607評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件睦裳,死亡現(xiàn)場(chǎng)離奇詭異造锅,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)廉邑,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,239評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門哥蔚,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人鬓催,你說我怎么就攤上這事肺素。” “怎么了宇驾?”我有些...
    開封第一講書人閱讀 164,960評(píng)論 0 355
  • 文/不壞的土叔 我叫張陵倍靡,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我课舍,道長(zhǎng)塌西,這世上最難降的妖魔是什么他挎? 我笑而不...
    開封第一講書人閱讀 58,750評(píng)論 1 294
  • 正文 為了忘掉前任,我火速辦了婚禮捡需,結(jié)果婚禮上办桨,老公的妹妹穿的比我還像新娘。我一直安慰自己站辉,他們只是感情好呢撞,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,764評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著饰剥,像睡著了一般殊霞。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上汰蓉,一...
    開封第一講書人閱讀 51,604評(píng)論 1 305
  • 那天绷蹲,我揣著相機(jī)與錄音,去河邊找鬼顾孽。 笑死祝钢,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 40,347評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼懊蒸,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了龄章?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,253評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤乞封,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后岗憋,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體肃晚,經(jīng)...
    沈念sama閱讀 45,702評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,893評(píng)論 3 336
  • 正文 我和宋清朗相戀三年仔戈,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了关串。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,015評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡监徘,死狀恐怖晋修,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情凰盔,我是刑警寧澤墓卦,帶...
    沈念sama閱讀 35,734評(píng)論 5 346
  • 正文 年R本政府宣布,位于F島的核電站户敬,受9級(jí)特大地震影響落剪,放射性物質(zhì)發(fā)生泄漏睁本。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,352評(píng)論 3 330
  • 文/蒙蒙 一忠怖、第九天 我趴在偏房一處隱蔽的房頂上張望呢堰。 院中可真熱鬧,春花似錦凡泣、人聲如沸枉疼。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,934評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)骂维。三九已至,卻和暖如春严卖,著一層夾襖步出監(jiān)牢的瞬間席舍,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,052評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工哮笆, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留来颤,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,216評(píng)論 3 371
  • 正文 我出身青樓稠肘,卻偏偏與公主長(zhǎng)得像福铅,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子项阴,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,969評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)滑黔、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,105評(píng)論 4 62
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,152評(píng)論 25 707
  • 山雨欲來(lái)風(fēng)蕭蕭环揽,閉門聽雨打芭蕉略荡。 青梅煮酒獨(dú)自飲,人生何處不寂寥歉胶?
    綠野V仙蹤閱讀 169評(píng)論 0 3
  • 1汛兜、你好,全家才會(huì)安好通今。 慢慢地粥谬,我們都會(huì)變老,從起點(diǎn)走向終點(diǎn)辫塌,自然而必然漏策。成長(zhǎng)的途中,匆匆而又忙忙臼氨,跌跌而又撞撞...
    夢(mèng)雅星辰閱讀 260評(píng)論 0 0
  • 我和胡胡是校友掺喻,但我并不認(rèn)識(shí)胡胡,雖然我們一年以前就有過互發(fā)消息,但真正讓我認(rèn)識(shí)胡胡是幾天以前巢寡,突然發(fā)一天消息給...
    空困如也閱讀 450評(píng)論 0 0