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

 

人已赞赏
iOS文章

iOS开发weak和block的说明并比较

2020-1-27 12:06:30

iOS文章

iOS开发国际配置

2020-1-27 15:57:21

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索