iOS表情雨-类似微信的红包雨

前言

最近项目在做了一个类似微信的红包雨的功能，虽然功能没让我做，我自己也想研究下这个功能，搜一下网上，貌似很少有这方面的文章，研究后写下笔记。

过程

先看看效果图：

表情雨效果图.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

结束

学习之路，与君共勉。