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()
    }