1. Particle emitter: CAEmitterLayer
CAEmitterLayer is a core animation class that allows you to create particles natively. Each particle is a CAEmitterCell object, and we don’t have to worry too much about cell creation and destruction. As long as we set the parameters, these systems will do it for us.
Without further ado, on the code:
// CAEmitterLayer let emitter = CAEmitterLayer() Let rect = CGRect(x: 0.0, y: 100.0, width: 100) view.bounds.width, height: 100) emitter.backgroundColor = UIColor.blackColor().CGColor emitter.frame = rect view.layer.addSublayer(emitter) // EmitterShape = kCAEmitterLayerRectangle // Set the size of the rectangle emitter. EmitterPosition = CGPoint(x: rect.width/2, y: // emitterCell = CAEmitterCell() emitterCell.contents = UIImage(named: "flake")! BirthRate = 8 emitterCell. Lifetime = 3 emitterCells = [emitterCells]Copy the code
EmitterShape emitter emitterShape emitter emitterShape
- KCAEmitterLayerPoint focuses all particles in position, which can be used for spark explosion effect
- KCAEmitterLayerLine all particles in a line, can be used for waterfall effect, snow effect
- KCAEmitterLayerRectangle All particles appear randomly in the given rectangle
Add the following to the code above:
/ / x y axis acceleration emitterCell yAcceleration. = 70.0 emitterCell xAcceleration = 70.0 / / velocity emitterCell velocity = 20.0 / / Launch Angle emitterCell. EmissionLatitude = CGFloat (M_PI_2)Copy the code
The properties of the CAEmitterLayer above are basically fixed values. If we want to achieve a snow effect, we need a lot of random properties. These are all:
Func Snow () {// 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 Viewer.layer. addSublayer(Emitter) // kCAEmitterLayerPoint Gathers all the particles in position, which can be used to create a spark explosion effect All the particles appear randomly in the given rectangle. EmitterShape = kCAEmitterLayerLine emitter.emitterPosition = CGPoint(x: rect.width/2, y: 1) emitterCell = CAEmitterCell() emitterCell.contents = 1) emitterCell = CAEmitterCell() emitterCell.contents = 1) emitterCell = CAEmitterCell( UIImage(named: "flake3")! .cgImage // EmitterCell. birthRate = 250 // Cell lifetime is 1.5 seconds // EmitterCell. lifetime = 10 // Emitter can add many different types of cell emitter. EmitterCells = [emitterCell] / / make a y axis acceleration emitterCell yAcceleration = 70.0 / / make a x axis acceleration EmitterCell. XAcceleration = 10.0 / / emitterCell. Particles velocity = 20.0 / / to set a launch Angle emitterCell emissionLongitude = CGFloat (M_PI) / / emitterCell scale = 0.8 / / add random speed, if there is a velocity, so the range is - 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: Emittercell.redrange = 0.3 emitterCell.greenrange = 0.3 BlueRange = 0.3 // Random size emitterCell.scaleRange = 0.8 // 15% reduction per second emitterCell.scaleSpeed = -0.05 Emittercell. alphaRange = 0.75 emittercell. alphaSpeed = -0.15}Copy the code
In fact, all animations on iOS are eventually converted to the form of a framed animation. Of course, the implementation of this frame animation will certainly be provided. Implementation steps:
/ / will need to add the frame of the animation picture added penguinView. The animationImages = walkFrames. / / set playback time penguinView animationDuration = animationDuration / 3 / / set penguinView repetitions. AnimationRepeatCount = 3 / / the last play in an appropriate position for penguinView. StartAnimating ()Copy the codeFrame animation we achieve a penguin can walk left and right, and can slide on the ground effect:
Note: because it is relatively simple, I will simply paste the code! Want to look at the end of the article can be found to give the source link!
1. Add background images, move left and right, and slide buttons, and set button listening
// 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
}()Copy the code2. Load the frame animation picture, set the walking and sliding animation, and determine whether to flip the picture
Var walkFrames = [UIImage(named: "walk01.png")!, UIImage(named: "walk02.png")! "walk03.png")!, UIImage(named: "walk04.png")! ] Var slideFrames = [UIImage(named: "slide01.png")! UIImage(named: "slide02.png")! "slide01.png")! ] Let animationDuration = 1.0 let penguinWidth: CGFloat = 108.0 let penguinHeight: CGFloat = 96.0 / / walk animation func loadWalkAnimation () {/ / will need to add the frame of the animation picture added penguinView. The animationImages = walkFrames / / set playback time PenguinView. AnimationDuration = animationDuration / 3 / / set penguinView repetitions. AnimationRepeatCount = 3} / / taxi animation func loadSlideAnimation() { penguinView.animationImages = slideFrames penguinView.animationDuration = animationDuration PenguinView. AnimationRepeatCount = 1} / / judgment If not flip var isLookingRight picture on the right: Bool = true {didSet {let xScale wasn't entirely: CGFloat = isLookingRight ? 1 : -1 penguinView.transform = CGAffineTransformMakeScale(xScale, 1) slideButton.transform = penguinView.transform } }Copy the code3. Handle button click events
func leftBtnClick() { isLookingRight = false penguinView.startAnimating() UIView.animateWithDuration(animationDuration, Delay: 0.0, the options: CurveEaseOut, animations: {self. PenguinView. Center. X - = self. PenguinWidth}, completion: nil) } func rightBtnClick() { isLookingRight = true penguinView.startAnimating() UIView. AnimateWithDuration (animationDuration, delay: 0.0, the options: CurveEaseOut, animations: { self.penguinView.center.x += self.penguinWidth }, completion: Nil)} func slideBtnClick () {/ / slide set animation loadSlideAnimation () penguinView. StartAnimating () UIView. AnimateWithDuration (animationDuration - 0.02, delay: 0.0, the options: the CurveEaseOut, animations: { self.penguinView.center.x += self.isLookingRight ? self.penguinWidth : -self.penguinWidth }, completion: {_ in self.loadWalkAnimation() }) }Copy the code
Conclusion: This article focuses on particle effects and frame animation.
This paper sort the: iOS. Animations. By. Tutorials. V2.0 source: github.com/DarielChen/… If you have any questions, please leave a message at -d