iOS开发之虾米音乐频道选择切换效果分析与实现

 今天博客的内容比较简单,就是看一下虾米音乐首页中频道选择的一个动画效果的实现。之前用mask写过另外一种Tab切换的一种效果,网易云音乐里边的一种Tab切换效果,详情请移步于"

 

今日头条也是有类似选中放大Tab的效果,但是与下方的这个放大效果大大不同,可以说 “今日头条” 内个切换放大的效果实现起来是比较简单的,因为其放大是基于Select Tab的中心往四周放大,并且放大后会虚掉,基于这个特点,今日头条的Select放大效果应该是通过Scale来进行放大的。下方是之前实现的类似今日头条的切换效果,具体请移步于“

 

  

二、效果实现

看完上述效果,接下来就是实现过程了,先入为主下,方是自己实现的类似上述切换效果。下方的切换组件较 “虾米音乐” 的频道选择组件做了一些扩充。

 下方是该组件的切换和定时方式

   

 

我们可以把上述的切换效果来慢放看一下具体的切换效果,在切换时,效果可分为以下几步:

从下方的效果可以看出,放大时字体是不会变虚的,肯定不是用的仿射变换这种放大方式。

  

 

 

三、具体实现方式

在实现该Demo时,尝试了几种方案来实现上述效果,之前实验的方案如下:

下方是具体实现的视图层级,可以看出使用的是ImageView来展示的Title。

  

 

下方是该组件对外暴露的调用方法,可以设置一些常规参数,如下所示:

  

 

下方代码是具体的调用方式:

  

 

有其他实现思路欢迎交流,具体实现方式请移动github:

https://github.com/lizelu/FATabSwitchView

 

作者:青玉伏案 
出处:http://www.cnblogs.com/ludashi/ 
本文版权归作者和共博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。 
如果文中有什么错误,欢迎指出。以免更多的人被误导。https://www.cnblogs.com/ludashi/p/9373298.html

50000+
5万行代码练就真实本领
17年
创办于2008年老牌培训机构
1000+
合作企业
98%
就业率

联系我们

电话咨询

0532-85025005

扫码添加微信