Swift 仿简书、淘宝App的弹出view效果

感谢原作者提供OC代码
个人博客主站：欢迎访问http://littlesummerboy.com
先来张图让小伙伴们看一眼

主要有四个View
黑色 XtPopViewController的self.view的颜色
白色主控制器self.view颜色
在白色View上方有个透明度为0.5的view 进行遮挡. (maskView)
下方的灰色View (popView1)

不多说直接上代码

let screen_Width = UIScreen.mainScreen().bounds.size.width
let screen_Height = UIScreen.mainScreen().bounds.size.height
class XtPopViewController: UIViewController {/// 在底部弹出的Viewvar popView = UIView()/// rootViewvar rootView = UIView()/// 主VCvar mainVc: UIViewController?/// maskViewvar maskView = UIView()

外部传参接口

func createPopViewControllerWithMainViewController(root: UIViewController, popView: UIView) -> Void {self.mainVc = rootself.popView = popViewself.createSubviews()}

创建视图

func createSubviews() {self.view.backgroundColor = UIColor.blackColor()mainVc!.view.frame = self.view.boundsmainVc!.view.backgroundColor = UIColor.grayColor()rootView = mainVc!.viewself.addChildViewController(mainVc!)self.view.addSubview(rootView)}

关键的打开方法

func openAction(){UIApplication.sharedApplication().windows[0].addSubview(popView)var frame = popView.frameframe.origin.y = self.view.bounds.size.height - self.popView.frame.size.heightUIView .animateWithDuration(0.3, delay: 0, options: UIViewAnimationOptions.CurveEaseInOut, animations: { //self.rootView.layer.transform = self.firstTransform()}) { (Bool) in//UIView .animateWithDuration(0.3, delay: 0, options: UIViewAnimationOptions.CurveEaseInOut, animations: { //self.rootView.layer.transform = self.secondTransform()// 显示maskview, 模糊阴影self.maskView = UIView.init(frame: self.view.bounds)self.maskView.backgroundColor = UIColor.whiteColor()self.maskView.alpha = 0.5self.rootView.addSubview(self.maskView)// popView上升self.popView.frame = frame}, completion: { (Bool) in//})}}

关闭方法

func closeAction(){var frame = popView.frameframe.origin.y += popView.frame.size.heightUIView.animateWithDuration(0.3, animations: {//self.maskView.alpha = 0self.popView.frame = frame// 改善滑动效果self.rootView.layer.transform = self.firstTransform()}) { (Bool) inUIView.animateWithDuration(0.3, delay: 0, options: UIViewAnimationOptions.CurveEaseInOut, animations: {// 变为初始值self.rootView.layer.transform = CATransform3DIdentity;}, completion: { (Bool) in// 移除self.popView.removeFromSuperview()})}   }

layer层形变

func firstTransform() -> CATransform3D {var t1 = CATransform3DIdentity;t1.m34 = 1.0 / -900;//带点缩小的效果t1 = CATransform3DScale(t1, 0.95, 0.95, 1);//绕x轴旋转t1 = CATransform3DRotate(t1, 15.0 * (CGFloat)(M_PI)/180.0, 1, 0, 0);return t1;}func secondTransform() -> CATransform3D {var t2 = CATransform3DIdentityt2.m34 = self.firstTransform().m34;//向上移t2 = CATransform3DTranslate(t2, 0, self.view.frame.size.height * (-0.08), 0);//第二次缩小t2 = CATransform3DScale(t2, 0.8, 0.8, 1);return t2;}

使用: 创建(TestViewController)继承于上面的控制器(XtViewController)

        let popView1 = UIView.init(frame: CGRectMake(0, screen_Height, screen_Width, screen_Height / 2))/// popView1 是点击打开的时候下方弹出的viewpopView1.backgroundColor = UIColor.grayColor()/// 加个阴影popView1.layer.shadowColor = UIColor.blackColor().CGColorpopView1.layer.shadowOffset = CGSizeMake(0.5, 0.5)popView1.layer.shadowOpacity = 0.8popView1.layer.shadowRadius = 5let main = ViewController()let mainNav = UINavigationController.init(rootViewController: main)/// 关闭按钮let btnClose = UIButton.init(type: UIButtonType.Custom)btnClose.frame = CGRectMake(15, 0, 50, 40)btnClose.setTitle("Close", forState: UIControlState.Normal)btnClose.setTitleColor(UIColor.cyanColor(), forState: UIControlState.Normal)btnClose.addTarget(self, action:Selector("close"), forControlEvents: UIControlEvents.TouchUpInside)popView1.addSubview(btnClose)// 打开按钮let btnOpen = UIButton.init(type: UIButtonType.Custom)btnOpen.frame = CGRectMake(((screen_Width - 100) / 2), 300, 50, 40)btnOpen.setTitle("打开", forState: UIControlState.Normal)btnOpen.setTitleColor(UIColor.cyanColor(), forState: UIControlState.Normal)btnOpen.addTarget(self, action: Selector("open"), forControlEvents: UIControlEvents.TouchUpInside)/// main.view 是主控制器的self.viewmain.view.addSubview(btnOpen)main.view.backgroundColor = UIColor.whiteColor()main.title = "XTtest"self.createPopViewControllerWithMainViewController(mainNav, popView: popView1)
//        self.view.backgroundColor = UIColor.whiteColor() // 底部}func open(){print("+++++++++")self.openAction()}func close(){self.closeAction()}

OC版本原文链接
Swift入口

Swift 仿简书、淘宝App的弹出view效果相关推荐

Android仿淘宝口令复制弹出框功能
1.我要做什么应用场景: 我的朋友使用微信给我发一个淘宝链接的口令,我复制口令,进入我的淘宝,弹框,显示口令的详情,点击详情,进入商品页面. 存在的问题: 但这存在一个问题,我的淘宝并不总是关闭状态 ...
swift实现ios类似微信输入框跟随键盘弹出的效果
为什么要做这个效果在聊天app,例如微信中,你会注意到一个效果,就是在你点击输入框时输入框会跟随键盘一起向上弹出,当你点击其他地方时,输入框又会跟随键盘一起向下收回,二者完全无缝连接,那么这是怎么实 ...
Elasticsearch仿京东、淘宝APP客户端的商品侧边栏筛选条件过滤和分页列表查询的实现案例
目录需求分析项目环境 API接口实现需求分析通过Elasticsearch完成商品列表查询和分类.品牌.规格参数的分组聚合统计查询当用户输入关键字搜索后,查询出商品列表后点击右上角筛选按钮, ...
ecshop仿淘宝加入购物车弹出框【支持任何页面】淡出淡隐固定屏幕-兼容ie
效果演示如图: 如果没有会员还购物买过的商品,则下面那部份不会显示! 有渐隐渐出效果,也是非jquery的,固定屏幕滚动,测试过是支持ie6-ie9的,无闪动,喜欢这个HACK代码的朋友也可以参考下, ...
使用WEX5移动开发工具制作仿淘宝APP
毕业设计-使用WEX5移动开发工具制作仿淘宝APP 系统设计的意义本课题来源于对日常逛超市.购物的生活体验和指导老师的提示.本系统是基于 WeX5的仿淘宝App系统,它商家们提供了一个更广阔的商品推 ...
vue2移动端仿淘宝APP省市区街道四级地区选择器
前言 : 这个选择器的的界面有使用到vant作为样式的编写,之后有时间会写一个完全无任何依赖的出来,作为以后组件库的使用. 最近写一个商城项目时,地区选择器上设计图上是这样的总觉得好眼熟,但是又想不 ...
抓包淘宝APP HTTPS请求2022最新多种方法
抓一下淘宝App的HTTPS请求.到目前为止非常坎坷. 之前抓小红书App的时候,也折腾过类似的事情.解决了几个问题: 抓包工具:MITMProxy 手机端的强制代理:ProxyDroid的全局模式. ...
android 仿简书评论,Android 开发仿简书登录框可删除内容或显示密码框的内容
简书App 是我很喜欢的一款软件.今天就模仿了一下他的登录框.先上图: 好了下面上代码,自定义ImgEditText 继承与EditText.重写一些方法. package lyf.myimgedit ...
Android点击按钮显示密码,Android 开发仿简书登录框可删除内容或显示密码框的内容...
简书App 是我很喜欢的一款软件.今天就模仿了一下他的登录框.先上图: 好了下面上代码,自定义ImgEditText 继承与EditText.重写一些方法. package lyf.myimgedit ...

Swift 仿简书、淘宝App的弹出view效果

Swift 仿简书、淘宝App的弹出view效果相关推荐

最新文章

热门文章