[Swift通天遁地]九、拔剑吧-(5)创建Tab图标具有多种样式的Tab动画

本文将演示创建动画样式的底部标签条的切换效果。

Github项目地址:【animated-tab-bar】,下载项目,解压成文件夹窗口。

将第三方类库的标签控制器文件夹【RAMAnimatedTabBarConroller】拖动到项目中。

在弹出的文件导入确认窗口中,点击【Finish】完成按钮,确认文件的导入。

在左侧的项目导航区打开视图控制器的代码文件【Main.storyboard】

选择故事板中的视图控制器。依次点击:

【Editor】编辑- >【Embed In】植入- >【Tab Bar Controller】标签控制器

将选择的视图控制器,植入标签控制器。使用快捷键【Command】+【D】复制最初的视图控制器。

将复制后的视图控制器,拖动到和第一个视图控制器对齐的位置。

在故事板上点击鼠标右键,弹出右键菜单。选择【Zoom  to 25%】缩小故事板的显示比例。

使用快捷键【Command】+【D】复制当前的视图控制器,并将它移动到适当的位置。

扫描二维码关注公众号,回复: 5153353 查看本文章

使用相同的方法,继续复制并放置两个新的视图控制器。在故事板上点击鼠标右键,弹出右键菜单。

选择【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

点击【显示辅助编辑器】图标,打开辅助编辑器。

选择故事板中的标签控制器,

在动画属性左侧的连接图标上按下鼠标,

并向第五个控制器的帧动画对象拖动,

将动画属性和其他的动画对象进行连接。

点击连接图标,可以查看该属性共连接了哪些控件。在面板外部点击隐藏该面板。

猜你喜欢

转载自www.cnblogs.com/strengthen/p/10356231.html