看看上一次更新一个多月过去了，基本上简书都断更了，内心那个自责呀。这一个月都没有碰过电脑，突然敲起代码，那个手生呀～所以说，码农就是熟练工种还是有一定道理的。
今天主要通过实现一个音乐播放状态的展示条，还有一个点赞的动画效果，来看看
CAReplicatorLayer、CAEmitterLayer和CAGradientLayer这三个专用层。
还是老惯例啦，先看看实现后的效果是啥样子。
播放指示器.gif
点赞动画
渐变色.gif
1. CAReplicatorLayer
CAReplicatorLayer的目的是为了高效生成许多相似的图层。它会绘制一个或多个图层的子图层，并在每个复制体上应用不同的变换。什么意思？看到例子中间的那么多条条在上下起伏了嘛？其实我并没有写那么多条条，只写了一个。把这一个写好的加入到了CAReplicatorLayer复制层中，然后就根据设置的参数自动的生成了剩下的条状物。
播放指示器.gif
1.1 第一步：先写好一个层，剩下的都复制这个
代码语言：javascript复制let layer = CALayer.init()
layer.frame = CGRect.init(x: 0, y: 0, width: 10, height: 80)
layer.backgroundColor = UIColor.white.cgColor
layer.anchorPoint = CGPoint.init(x: 0.5, y: 0.5)
layer.add(self.scaleYAnimation(), forKey: "scaleAnimation")
fileprivate func scaleYAnimation() -> CABasicAnimation{
let anim = CABasicAnimation.init(keyPath: "transform.scale.y")
anim.toValue = 0.1
anim.duration = 0.4
anim.autoreverses = true
anim.repeatCount = MAXFLOAT
return anim
}这些都没啥问题把？就是最基本的建立一个CALayer，设置了frame，设置了锚点，设置了背景颜色，加入了上下移动的动画。
等等，为什么这里背景颜色是白色吶？白色不是就看不见了嘛？别着急，第二步里面答案就揭晓啦。
1.2 第二步：使用CAReplicatorLayer进行复制
代码语言：javascript复制// 设置复制层里面包含子层的个数
replicatorLayer.instanceCount = 6
// 设置子层相对于前一个层的偏移量
replicatorLayer.instanceTransform = CATransform3DMakeTranslation(45, 0, 0)
// 设置子层相对于前一个层的延迟时间
replicatorLayer.instanceDelay = 0.2
// 设置层的颜色，(前提是要设置层的背景颜色，如果没有设置背景颜色，默认是透明的，再设置这个属性不会有效果。
replicatorLayer.instanceColor = UIColor.green.cgColor
// 颜色的渐变，相对于前一个层的渐变（取值-1~ 1）.RGB有三种颜色，所以这里也是绿红蓝三种。
replicatorLayer.instanceGreenOffset = -0.2
replicatorLayer.instanceRedOffset = -0.2
replicatorLayer.instanceBlueOffset = -0.2
// 需要把子层加入到复制层中，复制层按照前面设置的参数自动复制
replicatorLayer.addSublayer(layer)
// 将复制层加入view的层里面进行显示
view.layer.addSublayer(replicatorLayer)看到了木有？前面那个基准层的背景颜色为啥是白色吶？最终生效的其实还是replicatorLayer.instanceColor = UIColor.green.cgColor。
这样就齐活啦～就完事儿了，就这么简单。
1.3 CAReplicatorLayer属性介绍
为了能够看到各个属性之间的含义，所以又来了第二个复制层。第二个复制层修改了复制的锚点、复制的个数、复制的偏移量。
来，我们一起对照看看两个复制层上面有什么区别。
指示器2.gif
我们看看官方对于这个层有哪些属性：
代码语言：javascript复制 open var instanceCount: Int
open var preservesDepth: Bool
open var instanceDelay: CFTimeInterval
open var instanceTransform: CATransform3D
open var instanceColor: CGColor?
open var instanceRedOffset: Float
open var instanceGreenOffset: Float
open var instanceBlueOffset: Float
open var instanceAlphaOffset: Float一共有九个属性对吧？一起来看看都啥意思。
- instanceCount：拷贝图层的次数,包括其所有的子图层,默认值是1,也就是没有任何子图层被复制。
preservesDepth：如果设置为YES,图层将保持于CATransformLayer类似的性质和相同的限制
instanceDelay：设置子层相对于前一个层的延迟时间
- instanceTransform： 设置子层相对于前一个层的偏移量
- instanceColor：设置层的颜色，(前提是要设置层的背景颜色，如果没有设置背景颜色，默认是透明的，再设置这个属性不会有效果。
- instanceRedOffset、instanceGreenOffset、instanceBlueOffset：颜色的渐变，相对于前一个层的渐变（取值-1~ 1）.RGB有三种颜色，所以这里也是绿红蓝三种。
- instanceAlphaOffset：相对于前一个层透明图的渐变。
2. CAEmitterLayer
CAEmitterLayer是一个高性能的粒子引擎，被用来创建实时例子动画如：烟雾，火，雨等等这些效果。CAEmitterLayer看上去像是许多CAEmitterCell的容器，这些CAEmitierCell定义了一个例子效果。
通俗点说，例如雨是由很多小雨点组成的。每个小雨点就是
CAEmitterCell，CAEmitterLayer用来控制这些小雨点。我们不用太关心cell的创建和销毁，只要设置好参数，系统会帮助我们完成这些工作。
那我们就通过一个点赞的动画来看看到底怎么用。实现的效果如下：
点赞动画
2.1 第一步：创建一个大拇指的button
创建一个button，设置选中状态、普通状态的图片。写好触发事件。这个没什么好解释的，就是点一下把状态改一下。
代码语言：javascript复制//点击按钮事件
@IBAction func priaseBtnClick(_ sender: UIButton) {
sender.isSelected = !sender.isSelected
}2.2 第二步：自定义button
为了能够让button具有动画效果，需要自定义这个button。因此我们需要重写button的初始化方法、button状态改变的方法。
swift里面重写方法的格式和OC不太一样，需要注意一下。
代码语言：javascript复制//重写状态改变的方法
override var isSelected: Bool{
didSet{
// 执行动画
explosionAni()
}
}
//重写button初始化方法
override init(frame: CGRect) {
explosionLayer = CAEmitterLayer.init()
super.init(frame: frame)
setupExplosion()
}
required init?(coder aDecoder: NSCoder) {
explosionLayer = CAEmitterLayer.init()
super.init(coder: aDecoder)
setupExplosion()
// fatalError("init(coder:) has not been implemented")
}2.3 创建点赞周围的那些小点点的单个元素，通过CAEmitterCell实现
基本上CAEmitterCell该用的属性都用到了，剩下的咱们会在下面继续补充。
代码语言：javascript复制 let explosionCell = CAEmitterCell.init()
explosionCell.name = "explosion"
// 设置粒子颜色alpha能改变的范围
explosionCell.alphaRange = 0.10
// 粒子alpha的改变速度
explosionCell.alphaSpeed = -1.0
// 粒子的生命周期
explosionCell.lifetime = 0.7
// 粒子生命周期的范围
explosionCell.lifetimeRange = 0.3
// 粒子发射的初始速度
explosionCell.birthRate = 2500
// 粒子的速度
explosionCell.velocity = 40.00
// 粒子速度范围
explosionCell.velocityRange = 10.00
// 粒子的缩放比例
explosionCell.scale = 0.03
// 缩放比例范围
explosionCell.scaleRange = 0.02
// 粒子要展现的图片
explosionCell.contents = UIImage(named: "sparkle")?.cgImage2.4 设置CAEmitterLayer，让它控制cell
代码语言：javascript复制 explosionLayer.name = "explosionLayer"
// 发射源的形状
explosionLayer.emitterShape = kCAEmitterLayerCircle
// 发射模式
explosionLayer.emitterMode = kCAEmitterLayerOutline
// 发射源大小
explosionLayer.emitterSize = CGSize.init(width: 10, height: 0)
// 发射源包含的粒子
explosionLayer.emitterCells = [explosionCell]
// 渲染模式
explosionLayer.renderMode = kCAEmitterLayerOldestFirst
explosionLayer.masksToBounds = false
explosionLayer.birthRate = 0
// 发射位置
explosionLayer.position = CGPoint.init(x: frame.size.width/2, y: frame.size.height/2)
explosionLayer.zPosition = -1
layer.addSublayer(explosionLayer)2.5 设置动画的参数
这里的动画基本上就只是CAKeyframeAnimation，很简单。如果有不太清楚的，可以看看前面的这个 第七篇：CAKeyFrame Animation和CAAnimation Group。。
2.6 CAEmitterLayer的属性
基本上该用的属性这个粒子里面都用到了，唯一以后需要查手册的就是下面这些枚举。
代码语言：javascript复制/** `emitterShape' values. **/ 发射器形状
@available(iOS 5.0, *)
public let kCAEmitterLayerPoint: String //点
@available(iOS 5.0, *)
public let kCAEmitterLayerLine: String //线
@available(iOS 5.0, *)
public let kCAEmitterLayerRectangle: String //矩形
@available(iOS 5.0, *)
public let kCAEmitterLayerCuboid: String //长方形
@available(iOS 5.0, *)
public let kCAEmitterLayerCircle: String //圆形
@available(iOS 5.0, *)
public let kCAEmitterLayerSphere: String //球形
/** `emitterMode' values. **/ 发射模式
@available(iOS 5.0, *)
public let kCAEmitterLayerPoints: String //点状
@available(iOS 5.0, *)
public let kCAEmitterLayerOutline: String //轮廓
@available(iOS 5.0, *)
public let kCAEmitterLayerSurface: String //表面
@available(iOS 5.0, *)
public let kCAEmitterLayerVolume: String //大量
/** `renderMode' values. **/渲染模式
@available(iOS 5.0, *)
public let kCAEmitterLayerUnordered: String //乱序
@available(iOS 5.0, *)
public let kCAEmitterLayerOldestFirst: String //最老的最先出来
@available(iOS 5.0, *)
public let kCAEmitterLayerOldestLast: String //最老的最后出来
@available(iOS 5.0, *)
public let kCAEmitterLayerBackToFront: String //前后颠倒
@available(iOS 5.0, *)
public let kCAEmitterLayerAdditive: String //附加这些不用记，不用背。用的时候查一下就可以了。
3. CAGradientLayer
CAGradientLayer是用来生成两种或更多颜色平滑渐变的。用Core Graphics复制一个CAGradientLayer并将内容绘制到一个普通图层的寄宿图也是有可能的，但是CAGradientLayer的真正好处在于绘制使用了硬件加速。
实现效果如下：
渐变色.gif
代码语言：javascript复制 func createGradientLayer(){
gradientlayer = CAGradientLayer.init()
gradientlayer.frame = view.bounds
// 设置颜色组。这里设置了黑色、蓝色、橙色、红色、绿色五种颜色
gradientlayer.colors = [UIColor.black.cgColor,UIColor.blue.cgColor,UIColor.orange.cgColor,UIColor.red.cgColor,UIColor.green.cgColor]
// 根据起点指向终点的方向来渐变颜色,范围是0～1
gradientlayer.startPoint = CGPoint(x: 0.0, y: 0.0)
gradientlayer.endPoint = CGPoint(x: 1.0, y: 1.0)
// 设置颜色分割线，范围是0～1
gradientlayer.locations = [0.1,0.5,0.7,0.75,0.95]
view.layer.addSublayer(gradientlayer)
}swift版的源代码可以在这里下载。https://git.oschina.net/atypical/multAnimation.git
如果OC版的呼声很高，那我就再补充。
-------2017.04.28补充---
添加了OC版本的源代码。还是通过上面按个地址下载，找到OC的目录就可以了。
https://git.oschina.net/atypical/multAnimation.git
