原文: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ì)很樂意幫助你蕊苗!