前言
最近项目在做了一个类似微信的红包雨的功能，虽然功能没让我做，我自己也想研究下这个功能，搜一下网上，貌似很少有这方面的文章，研究后写下笔记。
过程
先看看效果图：
表情雨效果图.gif
在iOS中，样式简单的动画可以用uivew动画来做；而样式复杂，追求更好的动画体验就需要在layer层做动画，本文的表情雨功能也是用后者。
表情雨功能刚开始接触时我也是有点迷茫，深入了解发现其实原理真的很简单，稍微有点iOS的动画基础很容易就能完成，下面分析下做法：
用一个定时器不断生成新的layer，给layer添加从上往下移动的动画
self.timer = NSTimer.scheduledTimerWithTimeInterval(0.5, target: self, selector: "showRain", userInfo: "", repeats: true)
func showRain(){
//创建画布
let imageV = UIImageView.init()
imageV.image = UIImage.init(named: "x")
imageV.frame = CGRect.init(x: 0, y: 0, width: 40, height: 40)
//这里把这句消除动画有问题
self.moveLayer = CALayer.init()
self.moveLayer.bounds = (imageV.frame)
self.moveLayer.anchorPoint = CGPointMake(0,0)
//此处y值需比layer的height大
self.moveLayer.position = CGPointMake(0,-40)
self.moveLayer.contents = imageV.image!.CGImage
self.view.layer.addSublayer(self.moveLayer)
//画布动画
self.addAnimation()
}
添加动画时有一点特别需要注意，因为每一个表情的运动轨迹都是不一样的，因此表情的轨迹点的x值都应该随机生成，于是有了下面这句代码：
//动画路线，一个数组里有多个轨迹点
moveAnimation.values = [NSValue.init(CGPoint: CGPointMake(CGFloat(Float(arc4random_uniform(320))), 10)),NSValue.init(CGPoint: CGPointMake(CGFloat(Float(arc4random_uniform(320))), 500))]
至于y值则控制从哪开始落下，落到哪结束，看各自需求。以下是添加动画的代码：
//给画布添加动画
func addAnimation() {
//此处keyPath为CALayer的属性
let moveAnimation:CAKeyframeAnimation = CAKeyframeAnimation(keyPath:"position")
//动画路线，一个数组里有多个轨迹点
moveAnimation.values = [NSValue.init(CGPoint: CGPointMake(CGFloat(Float(arc4random_uniform(320))), 10)),NSValue.init(CGPoint: CGPointMake(CGFloat(Float(arc4random_uniform(320))), 500))]
//动画间隔
moveAnimation.duration = 5
//重复次数
moveAnimation.repeatCount = 1
//动画的速度
moveAnimation.timingFunction = CAMediaTimingFunction.init(name: kCAMediaTimingFunctionLinear)
self.moveLayer.addAnimation(moveAnimation, forKey: "move")
}
结束动画时，可以直接让计时器停止
self.timer.invalidate()
但是这样会有点奇怪，计时器停止后，原先已开始的动画不会被停止，如下图：
停止计时器.gif
再加上下面的代码就好了，让当前页面所有动画都停止，这样定时器一停止，所有动画也结束。
//停止所有layer的动画
for item in self.view.layer.sublayers!{
item.removeAllAnimations()
}
最终效果.gif
这样基本效果就有了。附上本文demo
结束
学习之路，与君共勉。
