用Swift封裝圖片摺疊效果

用Swift封裝圖片摺疊效果

談到封裝,那麼就要從使用者的角度出發,提供外界使用的方法

• 1.新建一個類繼承UIView

class XWFoldImageView: UIView {}

• 2.外界想實現這個效果只需要給我圖片名和控件顯示的frame就夠了，那麼提供使用者遍歷構造方法

convenience init(imageName:String ,frame:CGRect){
        self.init()
        self.frame = frame
        //1.在初始化做的操作
        self.setupDoubleImageViewLayer(imageName)
        self.setupGestureRecognizer()
    }

• 3那麼外界使用就是非常方便,如:

 override func viewDidLoad() {
        super.viewDidLoad()
        let foldImageView = XWFoldImageView(imageName: "image", frame: CGRectMake(50, 100, 300, 200))
        self.view.addSubview(foldImageView)
    }

談談如何具體實現

• 大體思想

1.利用兩張一模一樣的圖片,放在同一個UIView上面分了頂部和底部

具體代碼

   //MARK: 成員屬性

    private var imageTopView:UIImageView!
    private var imageBottomView:UIImageView!
    private var gradientLayer:CAGradientLayer = CAGradientLayer()


    //MARK: 便利構造

    convenience init(imageName:String ,frame:CGRect){
        self.init()
        self.frame = frame
        self.setupDoubleImageViewLayer(imageName)
        self.setupGestureRecognizer()
    }
    //MARK: 設置圖片圖層的描點和 postion
    private func setupDoubleImageViewLayer(imageName:String){

        //1添加到父控件
        let imageBottomView = UIImageView(image: UIImage(named: imageName))
        imageBottomView.frame = self.bounds
        imageBottomView.contentMode = UIViewContentMode.ScaleAspectFit
        self.addSubview(imageBottomView)
        self.imageBottomView = imageBottomView

        let imageTopView = UIImageView(image: UIImage(named: imageName))
        imageTopView.frame = self.bounds
        imageTopView.contentMode = UIViewContentMode.ScaleAspectFit
        self.addSubview(imageTopView)
        self.imageTopView = imageTopView


        //2.設置contents顯示比例
        self.imageTopView.layer.contentsRect = CGRectMake(0, 0, 1, 0.5)
        self.imageBottomView.layer.contentsRect = CGRectMake(0, 0.5, 1, 0.5)

        //2.1設置錨點
        /**     兩張圖，各顯示一半，讓描點爲中間的點，這樣纔可以用tranfrom */

        self.imageTopView.layer.anchorPoint = CGPointMake(0.5, 1)

        self.imageBottomView.layer.anchorPoint = CGPointMake(0.5, 0)

        //3.修改圖層座標點,修改postion 其實就是center,改了之後center也跟着改了
        self.imageTopView.layer.position = CGPointMake(self.imageTopView.center.x, self.imageTopView.center.y + self.imageTopView.height * 0.5)

        //3.1 雖然修改了圖層的contentsRect 但是本身的高度並沒有修改,導致旋轉的時候,高度變高
        self.imageTopView.height = self.height * 0.5

        self.imageBottomView.height = self.height * 0.5

        //4 給圖層增加一個陰影層
        self.gradientLayer.frame = self.imageBottomView.bounds
        //4.1漸變的顏色
        self.gradientLayer.colors = [UIColor .clearColor().CGColor, UIColor.blackColor().CGColor]
        //不透明度
        self.gradientLayer.opacity = 0
        //4.2加入到底部ImageView的圖層
        self.imageBottomView.layer.addSublayer(self.gradientLayer)

    }

2.給父控件添加手勢，來改變子控件圖層的形變

具體代碼

 //MARK: 添加手勢拖拽
    private func setupGestureRecognizer(){
        //1.
        let pan = UIPanGestureRecognizer(target: self, action: "panFunc:")

        self.addGestureRecognizer(pan)
    }


    //MARK: 手勢執行

    func panFunc(pan:UIPanGestureRecognizer){

        //1.得到偏移量,就是x,y座標與 左上角CGPointZero 的差距
        let offSet = pan.translationInView(pan.view)

        //2.得到旋轉的角度
        var angle = -kAngle2Radian(offSet.y) * 5

        //3.如果大於角度就固定最剛好遮蓋值,這個值可以更具調試得到
        if fabs(angle) >= kAngle2Radian(340) * 5 {

            angle = angle / angle *  kAngle2Radian(340) * 5
        }

        //增強立體感
        var transfrom:CATransform3D = CATransform3DIdentity
        // d:人的眼睛和屏幕的垂直距離
        let d:CGFloat = 300
        // 設置形變的m34就可以增加立體感,立體感(近大遠小)
        transfrom.m34 = -1 / d

        //2.根據 y 值的大小進行旋轉X軸的角度
         transfrom =  CATransform3DRotate(transfrom, angle, 1, 0, 0)

        self.imageTopView.layer.transform = transfrom

        //2.1設置陰影
        self.gradientLayer.opacity = Float(fabs(angle) / (kAngle2Radian(346) * 4.0))

        //3.檢查用戶擡起手勢
        if pan.state == UIGestureRecognizerState.Ended {

            UIView.animateWithDuration(0.5, delay: 0, usingSpringWithDamping: 0.1, initialSpringVelocity: 0, options: UIViewAnimationOptions.CurveEaseInOut, animations: { () -> Void in

                self.imageTopView.layer.transform = CATransform3DIdentity

                self.gradientLayer.opacity = 0;

                }, completion: { (Bool) -> Void in

            })
        }
    }

通過這個思想，通過捆綁式控件,讓父控件響應用戶交互,然後控制子控件形變,來實現複雜的UI動畫效果比繼承UIControl,來完成複雜的自定義控件操作，應該容易點