原文: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ū)Ш降膯栴}折剃。
[ ColorMatchTab 動(dòng)畫，在 Dribbble 和 Github 可以查看]
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)扫夜。
頂部欄
一年前楞泼，蘋果宣布了一項(xiàng)新的UI組件稱為 UIStackView（ WWDC session 和 Apple’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ù)組
轉(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)視圖侨把，隱藏圓外視圖的圓，是通過 CALayer 類 mask 屬性實(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ì)很樂意幫助你蕊苗！
