前言
最近項目在做了一個類似微信的紅包雨的功能独榴，雖然功能沒讓我做块饺，我自己也想研究下這個功能，搜一下網(wǎng)上朴沿，貌似很少有這方面的文章猜谚，研究后寫下筆記。
過程
先看看效果圖：
表情雨效果圖.gif
在iOS中悯仙，樣式簡單的動畫可以用uivew動畫來做龄毡；而樣式復雜，追求更好的動畫體驗就需要在layer層做動畫锡垄，本文的表情雨功能也是用后者。
表情雨功能剛開始接觸時我也是有點迷茫祭隔，深入了解發(fā)現(xiàn)其實原理真的很簡單货岭，稍微有點iOS的動畫基礎很容易就能完成，下面分析下做法：
用一個定時器不斷生成新的layer疾渴，給layer添加從上往下移動的動畫
self.timer = NSTimer.scheduledTimerWithTimeInterval(0.5, target: self, selector: "showRain", userInfo: "", repeats: true)
func showRain(){
//創(chuàng)建畫布
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值都應該隨機生成搞坝，于是有了下面這句代碼：
//動畫路線搔谴，一個數(shù)組里有多個軌跡點
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")
//動畫路線，一個數(shù)組里有多個軌跡點
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
//重復次數(shù)
moveAnimation.repeatCount = 1
//動畫的速度
moveAnimation.timingFunction = CAMediaTimingFunction.init(name: kCAMediaTimingFunctionLinear)
self.moveLayer.addAnimation(moveAnimation, forKey: "move")
}
結束動畫時店量，可以直接讓計時器停止
self.timer.invalidate()
但是這樣會有點奇怪芜果，計時器停止后，原先已開始的動畫不會被停止融师，如下圖：
停止計時器.gif
再加上下面的代碼就好了右钾，讓當前頁面所有動畫都停止，這樣定時器一停止旱爆，所有動畫也結束舀射。
//停止所有l(wèi)ayer的動畫
for item in self.view.layer.sublayers!{
item.removeAllAnimations()
}
最終效果.gif
這樣基本效果就有了。附上本文demo
結束
學習之路怀伦，與君共勉脆烟。
