[Swift通天遁地]9、拔劍吧-(5)建立Tab圖標具備多種樣式的Tab動畫

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤微信公衆號:山青詠芝(shanqingyongzhi)
➤博客園地址:山青詠芝(https://www.cnblogs.com/strengthen/
➤GitHub地址:https://github.com/strengthen/LeetCode
➤原文地址:http://www.javashuo.com/article/p-xiofmikf-kw.html 
➤若是連接不是山青詠芝的博客園地址,則多是爬取做者的文章。
➤原文已修改更新!強烈建議點擊原文地址閱讀!支持做者!支持原創!
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★html

目錄:[Swift]通天遁地Swiftgit

本文將演示建立動畫樣式的底部標籤條的切換效果。github

Github項目地址:【animated-tab-bar】,下載項目,解壓成文件夾窗口。微信

將第三方類庫的標籤控制器文件夾【RAMAnimatedTabBarConroller】拖動到項目中。編輯器

在彈出的文件導入確認窗口中,點擊【Finish】完成按鈕,確認文件的導入。post

在左側的項目導航區打開視圖控制器的代碼文件【Main.storyboard】動畫

選擇故事板中的視圖控制器。依次點擊:htm

【Editor】編輯- >【Embed In】植入- >【Tab Bar Controller】標籤控制器對象

將選擇的視圖控制器,植入標籤控制器。使用快捷鍵【Command】+【D】複製最初的視圖控制器。blog

將複製後的視圖控制器,拖動到和第一個視圖控制器對齊的位置。

在故事板上點擊鼠標右鍵,彈出右鍵菜單。選擇【Zoom  to 25%】縮小故事板的顯示比例。

使用快捷鍵【Command】+【D】複製當前的視圖控制器,並將它移動到適當的位置。

使用相同的方法,繼續複製並放置兩個新的視圖控制器。在故事板上點擊鼠標右鍵,彈出右鍵菜單。

選擇【Zoom  to 100%】故事板的顯示比例恢復至原始顯示比例。

如今開始將其餘四個子視圖控制器,和標籤控制器作鏈接,將它們置入標籤控制器。

將標籤控制器的上方,按下鼠標右鍵,而後拖動到第一個子控制器。

在彈出的選項菜單中,選擇【view controllers】視圖控制器選項,

以創建兩個控制器之間的從屬關係。使用相同的方式,將標籤控制器和另外二個子控制器,創建從屬關係。

在彈出的選項菜單中,選擇【view controllers】視圖控制器選項,

以創建兩個控制器之間的從屬關係。在標籤控制器的上方,按下鼠標右鍵,而後拖動到第三個子控制器。

在彈出的選項菜單中,選擇【view controllers】視圖控制器選項,

以創建兩個控制器之間的從屬關係。

點擊故事板右側的垂直滾動條,顯示五個子視圖控制器。

而後選擇第一個控制器標籤。點擊屬性檢查器圖標,進入屬性設置面板。

輸入標籤的文字內容,

【Titile】:User

【Image】:icon_user

選擇控制器的根視圖,設置根視圖的背景顏色。

點擊背景顏色右側的下拉箭頭,彈出顏色預設面板。

在彈出的系統顏色預設面板中, 選擇一種顏色做爲視圖的背景顏色。

選擇第二個控制器的標籤,輸入標籤的文字內容,

【Titile】:Settings

【Image】:Settings

選擇控制器的根視圖,設置根視圖的背景顏色。

選擇第三個控制器的標籤,輸入標籤的文字內容,

【Titile】:Location

【Image】:icon_pin

選擇控制器的根視圖,設置根視圖的背景顏色。

選擇第四個控制器的標籤,輸入標籤的文字內容,

【Titile】:Drop

【Image】:drop

選擇控制器的根視圖,設置根視圖的背景顏色。

選擇第五個控制器的標籤,輸入標籤的文字內容,

【Titile】:Frame

【Image】:Tools_00028

選擇控制器的根視圖,設置根視圖的背景顏色。

接着將五個視圖控制器的標籤控件,綁定到由第三方類庫提供的自定義標籤類。

使它們具備動畫的屬性,首先選擇第五個視圖控制器標籤。

而後點擊身份檢查器圖標,進入身份設置面板。

【Class】:RAMAnimatedTabBarItem

選擇第四個視圖控制器標籤

【Class】:RAMAnimatedTabBarItem

選擇第三個視圖控制器標籤

【Class】:RAMAnimatedTabBarItem

選擇第二個視圖控制器標籤

【Class】:RAMAnimatedTabBarItem

選擇第一個視圖控制器標籤

【Class】:RAMAnimatedTabBarItem

給每一個標籤指定不一樣的動畫類型,

首先須要給標籤控制器,綁定一個自定義的類文件。

選擇標籤控制器,在類名輸入框,輸入由第三方類庫提供的自定義類。

【Class】:RAMAnimatedTabBarController

如今開始給每一個視圖控制器,設置不一樣的標籤動畫樣式。

首先點擊控件庫右側的垂直滾動條,跳轉到對象控件所在的位置。

將【Object】對象控件拖動到第一個視圖控制器。

點擊身份檢查器圖標,進入身份設置面板。

【Class】:RAMRotationAnimation

給控制器的標籤控件設置一個跳躍動畫,

點擊屬性檢查器圖標。進入屬性設置面板。

在動畫時長輸入框內,【Duration】0.8,做爲跳躍動畫的時長。

【Text Selected】:設置當標籤處於焦點狀態時,標籤的文字顏色。

一樣對第二個第三個第四個視圖控制器進行相同的處理。

在此給第五個標籤控件,添加了一個幀動畫,

點擊屬性檢查器圖標,進入屬性設置面板。

點擊次數的下拉箭頭,設置標籤是否容許播放取消選擇時的動畫。

設置列表中的激活選項,當標籤取消選擇時,也會播放動畫。

【Images Path】:ToolsIsAnimation

點擊【顯示輔助編輯器】圖標,打開輔助編輯器。

選擇故事板中的標籤控制器,

在動畫屬性左側的鏈接圖標上按下鼠標,

並向第五個控制器的幀動畫對象拖動,

將動畫屬性和其餘的動畫對象進行鏈接。

點擊鏈接圖標,能夠查看該屬性共鏈接了哪些控件。在面板外部點擊隱藏該面板。

相關文章
相關標籤/搜索