1 .粒子发射器: CAEmitterLayer
CAEmitterLayer是核心动画中的一个类，用它可以很原生的创造微粒效果.每一个微粒就是一个CAEmitterCell对象,我们可以不用太过关心cell的创建与销毁.只要我们设置好参数,这些系统会帮我们完成.
话不多说,上代码:
// 创建CAEmitterLayer 并设置好CAEmitterLayer
let emitter = CAEmitterLayer()
let rect = CGRect(x: 0.0, y: 100.0, width: view.bounds.width, height: 100)
emitter.backgroundColor = UIColor.blackColor().CGColor
emitter.frame = rect
view.layer.addSublayer(emitter)
// 所有粒子随机出现在所给定的矩形框内
emitter.emitterShape = kCAEmitterLayerRectangle
// 设置位置大小
emitter.emitterPosition = CGPoint(x: rect.width/2, y: rect.height/2)
emitter.emitterSize = rect.size
// 一个cell代表一个微粒
let emitterCell = CAEmitterCell()
emitterCell.contents = UIImage(named: "flake")!.CGImage
// 每秒出现的比率 cell的生命周期
emitterCell.birthRate = 8
emitterCell.lifetime = 3
emitter.emitterCells = [emitterCell]
emitter的emitterShape属性:
常用到的有三种:
- kCAEmitterLayerPoint 将所有的粒子集中在position的位置,可用来做火花爆炸效果
- kCAEmitterLayerLine 所有的粒子位于一条线上,可用来作瀑布效果,下雪效果
- kCAEmitterLayerRectangle 所有粒子随机出现在所给定的矩形框内
在上面代码的基础上,在添加下面的:
// x y 轴的加速度
emitterCell.yAcceleration = 70.0
emitterCell.xAcceleration = 70.0
// 初始速度
emitterCell.velocity = 20.0
// 发射角度
emitterCell.emissionLatitude = CGFloat(M_PI_2)
上面的CAEmitterLayer设置的属性基本都是固定的值,如果我们要实现一个下雪效果,需要很多随机的属性,这些都有:
func snow() {
// 通过CAEmitterLayer可以很原生的创造微粒效果,不需要第三方库
let emitter = CAEmitterLayer()
let rect = CGRect(x: 0.0, y: -100.0, width: view.bounds.width, height: view.bounds.height+100)
// let rect = view.bounds
emitter.backgroundColor = UIColor.blackColor().CGColor
emitter.frame = rect
view.layer.addSublayer(emitter)
// kCAEmitterLayerPoint 将所有的粒子集中在position的位置,可用来做火花爆炸效果
// kCAEmitterLayerLine 所有的粒子位于一条线上,可用来作瀑布效果
// kCAEmitterLayerRectangle 所有粒子随机出现在所给定的矩形框内
emitter.emitterShape = kCAEmitterLayerLine
emitter.emitterPosition = CGPoint(x: rect.width/2, y: 0)
emitter.emitterSize = rect.size
// 一个cell代表一个微粒
let emitterCell = CAEmitterCell()
emitterCell.contents = UIImage(named: "flake3")!.CGImage
// 每秒创建的cell
emitterCell.birthRate = 250
// cell的生命周期为1.5秒
// emitterCell.lifetime = 10
// emitter可以添加很多不同类型的cell
emitter.emitterCells = [emitterCell]
// 制造一个y轴的加速度
emitterCell.yAcceleration = 70.0
// 制造一个x轴的加速度
emitterCell.xAcceleration = 10.0
// emitterCell.velocity = 20.0
// 给微粒设置一个发射角度
emitterCell.emissionLongitude = CGFloat(-M_PI)
// emitterCell.scale = 0.8
// 添加随机的速度,如果有velocity,那么范围为 -180 ~ 220
emitterCell.velocityRange = 200.0
emitterCell.emissionRange = CGFloat(M_PI_2)
emitterCell.lifetimeRange = 18
// emitterCell.color = UIColor(red: 0.9, green: 1.0, blue: 1.0, alpha: 1.0).CGColor
// 值为0.3 的范围为 0.7~1.3,但由于高于1算1,所以值得范围为 0.7~1
emitterCell.redRange = 0.3
emitterCell.greenRange = 0.3
emitterCell.blueRange = 0.3
// 随机大小
emitterCell.scaleRange = 0.8
// 每秒缩小15%
emitterCell.scaleSpeed = -0.05
emitterCell.alphaRange = 0.75
emitterCell.alphaSpeed = -0.15
}
2.帧动画
其实iOS上所有的动画,到最后都是转化成已帧动画的形式播放的.当然了,这种帧动画的实现肯定也会提供的.
实现的步骤:
// 将需要添加帧动画的图片添加进去
penguinView.animationImages = walkFrames
// 设置播放时间
penguinView.animationDuration = animationDuration / 3
// 设置重复次数
penguinView.animationRepeatCount = 3
// 最后在一个适当的位置播放就行了
penguinView.startAnimating()
帧动画我们实现一个小企鹅可以左右行走,并且可以在地上滑动的效果:
注:由于比较简单,我就简单的贴一下代码啦!想细看的可以找文章末尾给出的源码链接!
1.添加背景图片,以及左右移动,以及滑动按钮,并设置好按钮的监听
// MARK: - 设置UI
lazy var bgView : UIImageView = {
let bgView = UIImageView(image:UIImage(named: "bg"))
bgView.frame = self.view.bounds
return bgView
}()
lazy var leftButton : UIButton = {
let btn = UIButton()
btn.setImage(UIImage(named: "btn-left"), forState: .Normal)
btn.frame = CGRect(x: 0, y: UIScreen.mainScreen().bounds.height-100, width: 100, height: 100)
btn.addTarget(self, action: Selector("leftBtnClick"), forControlEvents: .TouchUpInside)
return btn
}()
lazy var rightButton : UIButton = {
let btn = UIButton()
btn.setImage(UIImage(named: "btn-right"), forState: .Normal)
btn.frame = CGRect(x: 100, y: UIScreen.mainScreen().bounds.height-100, width: 100, height: 100)
btn.addTarget(self, action: Selector("rightBtnClick"), forControlEvents: .TouchUpInside)
return btn
}()
lazy var slideButton : UIButton = {
let btn = UIButton()
btn.setImage(UIImage(named: "btn-slide"), forState: .Normal)
btn.frame = CGRect(x: UIScreen.mainScreen().bounds.width-100, y: UIScreen.mainScreen().bounds.height-100, width: 100, height: 100)
btn.addTarget(self, action: Selector("slideBtnClick"), forControlEvents: .TouchUpInside)
return btn
}()
lazy var penguinView : UIImageView = {
let penguin = UIImageView()
penguin.image = UIImage(named: "walk01")
penguin.frame = CGRect(x: 100, y: UIScreen.mainScreen().bounds.height-175, width: self.penguinWidth , height: 96)
return penguin
}()
2.加载帧动画图片,设置好走路和滑行的动画,判断是否需要翻转图片
// 添加走路动画的图片
var walkFrames = [
UIImage(named: "walk01.png")!,
UIImage(named: "walk02.png")!,
UIImage(named: "walk03.png")!,
UIImage(named: "walk04.png")!
]
// 添加滑行的图片
var slideFrames = [
UIImage(named: "slide01.png")!,
UIImage(named: "slide02.png")!,
UIImage(named: "slide01.png")!
]
let animationDuration = 1.0
let penguinWidth: CGFloat = 108.0
let penguinHeight: CGFloat = 96.0
// 走路的动画
func loadWalkAnimation() {
// 将需要添加帧动画的图片添加进去
penguinView.animationImages = walkFrames
// 设置播放时间
penguinView.animationDuration = animationDuration / 3
// 设置重复次数
penguinView.animationRepeatCount = 3
}
// 滑行的动画
func loadSlideAnimation() {
penguinView.animationImages = slideFrames
penguinView.animationDuration = animationDuration
penguinView.animationRepeatCount = 1
}
// 判断左右 如果不是右边翻转图片
var isLookingRight: Bool = true {
didSet {
let xScale: CGFloat = isLookingRight ? 1 : -1
penguinView.transform = CGAffineTransformMakeScale(xScale, 1)
slideButton.transform = penguinView.transform
}
}
3.处理按钮的点击事件
func leftBtnClick() {
isLookingRight = false
penguinView.startAnimating()
UIView.animateWithDuration(animationDuration, delay: 0.0, options: .CurveEaseOut, animations: {
self.penguinView.center.x -= self.penguinWidth
}, completion: nil)
}
func rightBtnClick() {
isLookingRight = true
penguinView.startAnimating()
UIView.animateWithDuration(animationDuration, delay: 0.0, options: .CurveEaseOut, animations: {
self.penguinView.center.x += self.penguinWidth
}, completion: nil)
}
func slideBtnClick() {
// 设置滑行动画
loadSlideAnimation()
penguinView.startAnimating()
UIView.animateWithDuration(animationDuration - 0.02, delay: 0.0, options: .CurveEaseOut, animations: {
self.penguinView.center.x += self.isLookingRight ?
self.penguinWidth : -self.penguinWidth
}, completion: {_ in
self.loadWalkAnimation()
})
}
总结:本篇主要介绍了粒子效果,以及帧动画.
本文整理自 : iOS.Animations.by.Tutorials.v2.0
源码 : https://github.com/DarielChen/DemoCode
如有疑问,欢迎留言 :-D
