iOS 狂霸酷炫拽之Button动效

上周的 引起热烈的反响, 小弟真的是受宠若惊, 还有些同学私信求更新的, 我特别推崇这种互帮互助的学习方式, 有利于共同学习, 好了开始今天的话题!

今天我们需要实现的功能是: 酷炫的Button动效, 大家不禁要问, 一个小小的Button, 能够搞出些什么花头呢? 想必大家都等不及了吧, 来, 不急我们step by step 一步步来~ (今天的内容过多, 示例代码不会很详尽, 具体请到github上下载)

有同学提出效果图放开头会比较好!! 大家可以先参考下, 先想想实现方法^ ^

导航栏遗漏细节处理

上周有些同学说, 渐变导航栏有几个细节不是尽善尽美, 今天我们就先来将其处理一下!!

1. 当push到下一界面时搜索栏的UI始终出现

这其实非常的正常, 我们是将searchBar加载到了navigationController.view上, 当push到下个见面自然会存在了, 好的, 为了处理这个问题, 我们新建一个viewcontroller, 然后作为栈顶控制器.

在生命周期方法中添加和删除, 当view完全出现的时候执行动画显现即可!
可是这样当我们使用交互转场的时候发现 搜索栏突然就消失了(这实在是太生硬了吧!!)
我们在SQLifestyleSearchCell中再添加一个searchBarView就可以完美解决啦~~

2. 当push到下一界面时会调用scorllDidScroll方法发生位移

好的, 我们来解决第二个问题, 当push到下一界面时会调用scorllDidScroll是系统自动会调用的, 我们为了解决这个问题首先要讲调用给屏蔽掉!

在scorllDidScroll方法中添加上述方法就是屏蔽系统自动调用的问题! 但这样会将tableView上移64, 我们使用contentInset就能完美解决啦~~

这时我们碰到了一个问题, 当我们push进入到下个页面时, 导航栏的颜色会和栈底控制器保持同步!!

我们在下一个页面设置背景色, 并在导航栏的下面贴一层和导航栏相同颜色的view,即可解决!!

但是这样又有问题了, 我们把栈顶控制器导航栏的颜色给带回到栈底控制器了, 所以解决方法就是在view将要出现的时候, 计算颜色值!!

3. 轮播图被导航栏遮挡 部分区域不能交互

这个就要说到响应者链条的问题了, 但上层View可以接受响应的时候, 事件是不会向下传递的, 所以不能响应 很正常!! 我们禁止navigationBar的响应事件的能力即可!
我们在上面的方法中添加如下代码!!

看, 设置了取消用户交互,就能将事件传递到Cell身上了吧~~ (完美搞定!!)

4 显示效果

加载展示Cell

向诸如此类的Cell 图片,文字等元素都是相同的, 就单布局不同的情况下, 我们可以将其封装一下, 这里共享给大家一个写法~~ (抽象类)

.h

.m

上面我们完成了Cell的内容部分, 接下来我们可以创建任意Cell来继承上面的Cell, 共享内容!! 并且仅需实现布局即可!!

狂霸酷炫拽之Button动效

终于进入今天的正题, 我们先来吧Button给画出来吧~~

1. 自定义Button

这里我们使用CAShapeLayer + UIBezierPath将Button给画了出来, 其实完全可以让设计做图, 我这里只是因为抛砖引玉后面的内容!!

2. 可移动Button

将上面创建好的Button 继承与SQExtension中的SQRemovableButton 即可实现移动属性!! 这里我来看下可移动属性的实现原理!!(其实完全可以使用Pan手势实现!!)

这里有个难点在于当滑动的时候会和Touch Events/Tap Gesture 发生冲突, 解决方法在于当其移动的时候不调用其父类的方法即可!!

3. Button的Pop动画

使用SQExtension中的CAAnimation+Extension即可实现pop动画, 这个我不多说, 关键帧动画的基本实现!

我们同样将其加在navigationController.view 上并设定初始布局

并将点击事件在Button内部实现, 那我们怎么在view的内部拿到当前控制器呢?
之前我的老大在项目中是用单例设计模式实现的可以参考SQExtension中的SQViewControllerManager.h, 今天我分享一个更加投机的方式, 全局变量!!
我们先将所有的控制器都继承与SQViewController, 并实现如下方法;

.h

.m

SQViewController.m

这样我们就能够拿到当前的控制器了 whenTap方法我不多讲,底层是用runtime实现的, 就是为了让代码高内聚,低耦合,(关键是runtime真的要讲很久…)

到此为止, 我们的Button已经具有不错的动画效果了~~

Button的自定义转场动画

自定义转场, 我之前就有提及到我就快速的讲, 今天我们来在Modal的自定义转场, 自定义转场两步走~

1 设置代理

2 实现自定义转场

之前我有看过用象限算法实现的, 擦, 好复杂… 本宝宝最不喜欢的就是计算这种费脑子的事情了, 能够投机的, 就不要那么麻烦嘛, 这里我借用了两个view来实现相同功能, 我感觉这里需要细讲一下,不然有些同学不是很好理解…

self.frame 就是可移动Button最终的frame, 然后借助一个View来确定第二个Rect的Center, 其实就是同心圆, 有没有很好理解?? 然后使用mask属性进行路径动画就可以了, mask其实就Ps中的蒙版, 遮罩, 对mask属性不是很熟悉的同学可以Google一下alpha通道, 简单来说就是, mask不透明, 就能够穿透, 好像就是这个意思~

到这里我们今天的内容就全部结束了…

Q/A

但是我发现一个问题, 只要进行转场动画, 自动轮播图就会有几率被卡住, 为了解决这个问题,我们可以在控制器加载完成后进行对TableView的刷新 就可以了~~

还有同学提出, 打开Demo时模拟器上下会有两条黑边, 这是由于我是用Xcode5创建的项目 新版Xcode没有加载LaunchScreen.xib 可以在项目配置页,General下面有一栏App Icons and Launch Images,其中有一项Launch Images Source,如果你遇到了问题,那么旁边显示的可能是一个按钮,Use Asset Catalog,点一下然后确定就可以了.

显示效果

在Reveal中显示

1229762-d3bd0c4cd3ac183d

最终显示

1229762-18cf0c1e8e8b24a2


github 下载地址!!!

1229762-7d2183683da49c9f

点击下方链接跳转!!

具体源码及SQExtension方法信息 请到github上进行下载! 喜欢的朋友送下小星星哟!!

1 4 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部