前言
本篇主要寫一些基于CALayer及其子類做的一些效果诫尽，結(jié)合CAAnimation做的好看常用的動畫肢预。代碼在Github Example读存，廢話不多說我們先看展示圖
當前展示的效果
音樂播放器常用控件
系統(tǒng)加載中控件
毛玻璃蒙版效果
音樂播放器控件.gif
系統(tǒng)加載中控件.gif
關(guān)鍵代碼
音樂播放器常用控件
在音樂播放的app中我們經(jīng)常看到這個控件航攒，其實這個控件寫起來很是簡單磺陡，我們現(xiàn)在使用CAReplicatorLayer 來做這個效果 【為了方便演示，代碼對控件進行放大演示】
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ù)的個數(shù)
let instanceCount:Int = 3
// 計算每一個的長寬
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)建一個父容器someView
let someView = UIView.init()
func createParentView(){
var w:CGFloat,h:CGFloat;
// 系統(tǒng)的控件是20 寬高 我們?yōu)榱苏故具M行放大處理
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)建活動指示器的Layer
func activityIndicatorLayerAnimation(){
// 1
let replicatorLayer = CAReplicatorLayer()
replicatorLayer.frame = someView.bounds
someView.layer.addSublayer(replicatorLayer)
// 2
let instanceCount = 12 //系統(tǒng)的控件是12個
replicatorLayer.instanceCount = instanceCount
replicatorLayer.instanceDelay = CFTimeInterval(1 / 30.0) //延遲時間
replicatorLayer.preservesDepth = false
// 3 顏色偏移
let AlphaOffset:Float = 0.1
replicatorLayer.instanceAlphaOffset = AlphaOffset
// 4 計算角度
let angle = Float(M_PI * 2.0)/Float(instanceCount)
replicatorLayer.instanceTransform = CATransform3DMakeRotation(CGFloat(angle), 0.0, 0.0, 1.0)
// 5
let instanceLayer = CALayer()
//第一個出現(xiàn)計算位置 我們這里計算的 正中心最下面的那一個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 添加動畫
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 的簡單使用漠畜，如果對CAReplicatorLayer有疑惑請翻閱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 蒙版得以保留币他，但毛玻璃效果沒有了 錯誤寫法
// 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
}
