搜索
 找回密码
 立即注册
查看: 152|回复: 0

iOS--如何写一个微博导航栏动画(CoreGraphics)

[复制链接]

52

主题

52

帖子

174

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
174
发表于 2018-8-23 14:13:19 | 显示全部楼层 |阅读模式

                    
前言
昨天刚做完项目的新版本、除了尝试一些新的架构之外、功能方面并没什么特别的地方。
但是顺手搞了一些还算好玩的东西、其一就是这个导航栏的动画。
感觉还算简单易懂、分享一下(其实更多是最近攒了好多封面、不贴出来憋得人难受)。
导航栏动画.gif
思路
先介绍CA的两个方法:
知道了这两个方法、剩下就是如何使用形变和位移以达到想要的效果了。
这里、需要分两部分来看、一部分是位移、一部分是形变
而且、如果将一整个动画以及翻页动作看成1。那么位移和形变又需要分成两部分来看:0到0.5以及0.5到1。
其实一点都不难、画个图看一眼。连一元方程都不算、完全是小学算术题~甚至连奥数都算不上。
0到0.5区间内
在0.5时、我们需要将线条长度从left_width形变成max_width
形变-0到0.5
与此同时如果想让线条在左侧看起来并没有移动、就需要将线条的x轴一点点向右移动。这个移动的值呢?
由于形变是双向的、右侧和左侧都会变长。那么对于左侧最终将是中间时最终形变差值的一半。
最左侧到中心点时x轴的位移=最左侧到中心点时形变的差值/2=(max_width - left_width)/2
0.5到1区间内
和之前的形变相同
形变-0.5到1
同理、如果我的长度减少了X、那么我如果想保证看起来右侧位置不会改变、考虑到形变是左右同时发生、就需要向右移动X/2。
具体到数值:
中心点到最右侧时x轴的位移=中心点到最右时形变的差值/2=(max_width - right_width)/2
具体函数
以我项目里两个按钮(self.titleBtn1/self.titleBtn2)为例
其中的某些参数的意义以及取值:
将屏幕滑动的偏移量传递进来
Demo
上面的例子的代码其实都已经列出来了、没什么再单独传Demo的必要。
但是毕竟开了个帖子、连个Demo都没有不好看。于是上午干脆封装了一个小工具出来。
但是只封装了移动的动画、并没封装按钮变色等等一系列功能。
KTNavDemo.gif
用起来也挺简单的、只要将按钮的数组、下方横线交付、在屏幕滑动的时候把偏移量传递进去、就能自动工作了。宽度啊什么都会自己算:
GitHub有兴趣可以自取
作者:kirito_song

链接:https://www.jianshu.com/p/456a63c3b402

               
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表