如何设置CAEmitterLayer背景透明？

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

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 2

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 3

I don't know if I understand you correct, but if this is the effect you are looking for:

Then you need to:

1. Add a "container view" for your your emitter to live in
2. Create an outlet for that view
3. 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 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.