How to set CAEmitterLayer background transparent? - ios

Question

var emitter = CAEmitterLayer()
emitter.emitterPosition = CGPoint(x: self.view.frame.size.width / 2, y: -10)
emitter.emitterShape = kCAEmitterLayerLine
emitter.emitterSize = CGSize(width: self.view.frame.size.width, height: 2.0)
emitter.emitterCells = generateEmitterCells()
self.view.layer.addSublayer(emitter)
here, CAEmitterLayer covers my view... the content of self.view not visible..
Ref. code : https://oktapodi.github.io/2017/05/08/particle-effects-in-swift-using-caemitterlayer.html
I want to set this animation on my view.

Answer 1

I don't know if I understand you correct, but if this is the effect you are looking for:
Then you need to:
Add a "container view" for your your emitter to live in
Create an outlet for that view
set clipsToBounds to true for your container view
Here is my ViewController which produced the above screenshot
import UIKit
enum Colors {
static let red = UIColor(red: 1.0, green: 0.0, blue: 77.0/255.0, alpha: 1.0)
static let blue = UIColor.blue
static let green = UIColor(red: 35.0/255.0 , green: 233/255, blue: 173/255.0, alpha: 1.0)
static let yellow = UIColor(red: 1, green: 209/255, blue: 77.0/255.0, alpha: 1.0)
}
enum Images {
static let box = UIImage(named: "Box")!
static let triangle = UIImage(named: "Triangle")!
static let circle = UIImage(named: "Circle")!
static let swirl = UIImage(named: "Spiral")!
}
class ViewController: UIViewController {
#IBOutlet weak var emitterContainer: UIView!
var emitter = CAEmitterLayer()
var colors:[UIColor] = [
Colors.red,
Colors.blue,
Colors.green,
Colors.yellow
]
var images:[UIImage] = [
Images.box,
Images.triangle,
Images.circle,
Images.swirl
]
var velocities:[Int] = [
100,
90,
150,
200
]
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
view.backgroundColor = UIColor.red
emitter.emitterPosition = CGPoint(x: emitterContainer.frame.size.width / 2, y: -10)
emitter.emitterShape = kCAEmitterLayerLine
emitter.emitterSize = CGSize(width: emitterContainer.frame.size.width, height: 2.0)
emitter.emitterCells = generateEmitterCells()
emitterContainer.layer.addSublayer(emitter)
emitterContainer.clipsToBounds = true
}
private func generateEmitterCells() -> [CAEmitterCell] {
var cells:[CAEmitterCell] = [CAEmitterCell]()
for index in 0..<16 {
let cell = CAEmitterCell()
cell.birthRate = 4.0
cell.lifetime = 14.0
cell.lifetimeRange = 0
cell.velocity = CGFloat(getRandomVelocity())
cell.velocityRange = 0
cell.emissionLongitude = CGFloat(Double.pi)
cell.emissionRange = 0.5
cell.spin = 3.5
cell.spinRange = 0
cell.color = getNextColor(i: index)
cell.contents = getNextImage(i: index)
cell.scaleRange = 0.25
cell.scale = 0.1
cells.append(cell)
}
return cells
}
private func getRandomVelocity() -> Int {
return velocities[getRandomNumber()]
}
private func getRandomNumber() -> Int {
return Int(arc4random_uniform(4))
}
private func getNextColor(i:Int) -> CGColor {
if i <= 4 {
return colors[0].cgColor
} else if i <= 8 {
return colors[1].cgColor
} else if i <= 12 {
return colors[2].cgColor
} else {
return colors[3].cgColor
}
}
private func getNextImage(i:Int) -> CGImage {
return images[i % 4].cgImage!
}
}
Hope that helps you.

Answer 2

It is working fine check output of my simulator. Background images are added from storyboard and blue color is done by code. Still working fine.
OUTPUT:

Answer 3

You can fix your problem by changing the way you add the layer right now your adding it on top of everything which sometimes hide other layers and view objects.
change
self.view.layer.addSublayer(emitter)
To
self.view.layer.insertSublayer(emitter, at: 0)

Answer 4

Hello change emitterPosition X of each like below:-
let emitter1 = Emitter.getEmitter(with: #imageLiteral(resourceName: "img_ribbon_4"), directionInRadian: (180 * (.pi/180)), velocity: 50)
emitter1.emitterPosition = CGPoint(x: self.view.frame.width / 3 , y: 0)
emitter1.emitterSize = CGSize(width: self.view.frame.size.width, height: 2.0)
self.view.layer.addSublayer(emitter1)
let emitter2 = Emitter.getEmitter(with: #imageLiteral(resourceName: "img_ribbon_6"), directionInRadian: (180 * (.pi/180)), velocity: 80)
emitter2.emitterPosition = CGPoint(x: self.view.frame.width / 2, y: 0)
emitter2.emitterSize = CGSize(width: self.view.frame.size.width, height: 2.0)
self.view.layer.addSublayer(emitter2)
I hope it will help you,
thank you.