Swift仿淘宝App选择颜色分类弹出view效果

先来张图让小伙伴们看一眼, 是不是效果很不错.



自制做效果图

主要有四个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 {

/// 在底部弹出的View
var popView = UIView()
/// rootView
var rootView = UIView()
/// 主VC
var mainVc: UIViewController?
/// maskView
var maskView = UIView()

外部传参接口

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

创建视图

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

关键的打开方法

func openAction(){
UIApplication.sharedApplication().windows[0].addSubview(popView)
var frame = popView.frame
frame.origin.y = self.view.bounds.size.height - self.popView.frame.size.height

UIView .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, 遮挡view
self.maskView = UIView.init(frame: self.view.bounds)
self.maskView.backgroundColor = UIColor.whiteColor()
self.maskView.alpha = 0.5
self.rootView.addSubview(self.maskView)
// popView上升
self.popView.frame = frame
}, completion: { (Bool) in
//
})
}
}

关闭方法

func closeAction(){
var frame = popView.frame
frame.origin.y += popView.frame.size.height

UIView.animateWithDuration(0.3, animations: {
//
self.maskView.alpha = 0
self.popView.frame = frame
// 改善滑动效果
self.rootView.layer.transform = self.firstTransform()

}) { (Bool) in
UIView.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 = CATransform3DIdentity
t2.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 是点击打开的时候下方弹出的view
popView1.backgroundColor = UIColor.grayColor()
/// 加个阴影
popView1.layer.shadowColor = UIColor.blackColor().CGColor
popView1.layer.shadowOffset = CGSizeMake(0.5, 0.5)
popView1.layer.shadowOpacity = 0.8
popView1.layer.shadowRadius = 5

let 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.view
main.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()
}