前言

本篇主要寫一些基于CALayer及其子類做的一些效果，結(jié)合CAAnimation做的好看常用的動(dòng)畫。代碼在Github Example，廢話不多說我們先看展示圖

當(dāng)前展示的效果

音樂播放器常用控件
系統(tǒng)加載中控件
毛玻璃蒙版效果

音樂播放器控件.gif

系統(tǒng)加載中控件.gif

關(guān)鍵代碼

音樂播放器常用控件

在音樂播放的app中我們經(jīng)?？吹竭@個(gè)控件，其實(shí)這個(gè)控件寫起來很是簡單，我們現(xiàn)在使用CAReplicatorLayer 來做這個(gè)效果 【為了方便演示，代碼對(duì)控件進(jìn)行放大演示】

    func drawreplicatoreLayer() {
//        控件的長寬
        let rtWidth:CGFloat = 150,rtheight:CGFloat = 120
        
        let replicatoreLayer = CAReplicatorLayer()
        replicatoreLayer.frame = CGRect(x: 0.0, y: 0.0, width: rtWidth, height: rtheight)
        replicatoreLayer.position = view.center
        view.layer.addSublayer(replicatoreLayer)
    
//        需要的重復(fù)的個(gè)數(shù)
        let instanceCount:Int = 3
//        計(jì)算每一個(gè)的長寬
        let itemLayerW:CGFloat = rtWidth/CGFloat(2*instanceCount+1)
        let itemLayerH:CGFloat = rtheight/4.0*3.0

        let itemLayer = CALayer()
        itemLayer.frame = CGRect(x: itemLayerW, y: rtheight-itemLayerH, width: itemLayerW, height: itemLayerH)
        itemLayer.cornerRadius = itemLayerH/20.0
        itemLayer.backgroundColor = UIColor.red.cgColor
        replicatoreLayer.addSublayer(itemLayer)
        
        let move = CABasicAnimation(keyPath: "position.y")
        move.toValue = itemLayer.position.y + itemLayerH-itemLayerH/5.0
        move.duration = 0.5
        move.autoreverses = true
        move.repeatCount = Float.infinity
        itemLayer.add(move, forKey: nil)
        
        replicatoreLayer.instanceCount = 3
        replicatoreLayer.instanceTransform = CATransform3DMakeTranslation(2*itemLayerW, 0.0, 0.0)
        replicatoreLayer.instanceDelay = 0.33
        replicatoreLayer.masksToBounds=true
        
    }

系統(tǒng)加載中控件

首先我們創(chuàng)建一個(gè)父容器someView

let someView = UIView.init()

    func createParentView(){
        var w:CGFloat,h:CGFloat;
//        系統(tǒng)的控件是20 寬高  我們?yōu)榱苏故具M(jìn)行放大處理
        w=self.view.frame.width/4.0
//        w=20.0
        h=w
        someView.frame=CGRect.init(x: 0, y: 0, width: w, height: h)
        someView.center=view.center
        self.view.addSubview(someView)
    }

創(chuàng)建活動(dòng)指示器的Layer

 func activityIndicatorLayerAnimation(){
        
        // 1
        let replicatorLayer = CAReplicatorLayer()
        replicatorLayer.frame = someView.bounds
        someView.layer.addSublayer(replicatorLayer)
        
        // 2
        let instanceCount = 12  //系統(tǒng)的控件是12個(gè)
        replicatorLayer.instanceCount = instanceCount
        replicatorLayer.instanceDelay = CFTimeInterval(1 / 30.0) //延遲時(shí)間
        replicatorLayer.preservesDepth = false
        
        // 3 顏色偏移
        let  AlphaOffset:Float = 0.1
        replicatorLayer.instanceAlphaOffset = AlphaOffset
        // 4  計(jì)算角度
        let angle = Float(M_PI * 2.0)/Float(instanceCount)
        replicatorLayer.instanceTransform = CATransform3DMakeRotation(CGFloat(angle), 0.0, 0.0, 1.0)        
      // 5
        let instanceLayer = CALayer()
        //第一個(gè)出現(xiàn)計(jì)算位置 我們這里計(jì)算的 正中心最下面的那一個(gè)item
        let  layerHeight: CGFloat = replicatorLayer.frame.width/3.0
        let  layerWidth: CGFloat = layerHeight/3.0
         instanceLayer.frame = CGRect(x: (someView.bounds.width-layerWidth)/2.0, y: (someView.bounds.height-layerHeight), width: layerWidth, height: layerHeight)
        
        instanceLayer.backgroundColor = UIColor.gray.cgColor
        instanceLayer.cornerRadius = layerWidth/2.0 //圓角
        replicatorLayer.addSublayer(instanceLayer)        
//         6 添加動(dòng)畫
        let fadeAnimation = CABasicAnimation(keyPath: "opacity")
        fadeAnimation.fromValue = 0.6
        fadeAnimation.toValue = AlphaOffset
        fadeAnimation.duration = 1
        fadeAnimation.repeatCount = Float(Int.max)
        instanceLayer.add(fadeAnimation, forKey: "FadeAnimation")
        
    }

以上就是CAReplicatorLayer 的簡單使用，如果對(duì)CAReplicatorLayer有疑惑請(qǐng)翻閱developer CAReplicatorLayer

毛玻璃的蒙版效果

代碼和講解

 func creatMaskAnimation() {
//        1 定義常量
        let maskWidth:CGFloat = 180
        let maskY:CGFloat = 100

        //        2 創(chuàng)建路徑
        let maskPath = CGMutablePath.init()

        let outsidePath = CGPath.init(rect: self.visualView.bounds, transform: nil)
        
        let insidePath = CGPath.init(rect: CGRect.init(x: (self.view.bounds.width-maskWidth)/2.0, y: maskY, width: maskWidth, height: maskWidth), transform: nil)
        
        maskPath.addPath(outsidePath)
        maskPath.addPath(insidePath)
        
//        3 創(chuàng)建 CAShapeLayer
        let maskLayer = CAShapeLayer.init()
        maskLayer.fillRule="even-odd"
        maskLayer.path = maskPath
        
//        經(jīng)過測試 使用 visualView.Layer.mask 蒙版得以保留，但毛玻璃效果沒有了 錯(cuò)誤寫法
//        self.visualView.layer.mask=maskLayer
        
//        4 正確寫法應(yīng)該使用UIView.mask
        let maskView = UIView.init(frame: self.view.bounds)
        maskView.backgroundColor = UIColor.black
        maskView.layer.mask = maskLayer
        
        self.visualView.mask = maskView

    }