如何将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)

这里，CAEmitterLayer覆盖了我的视图...self.view的内容不可见...

参考代码: https://oktapodi.github.io/2017/05/08/particle-effects-in-swift-using-caemitterlayer.html

我想在我的视图上设置这个动画。

- Darshit Shah

---

代码对我来说运行良好 - 动画出现在self.view的其他图层和子视图上。您正在执行某些隐藏或覆盖self.view内容的操作。我建议您也发布该代码。 - Jon Rose

Jon Rose是正确的，它正在正常工作。毫无疑问。 - dahiya_boy

我没有更改示例代码中的任何一行......我只是在self.view中添加了图像视图......您能否请在self.view中添加一个图像或其他内容并检查？ - Darshit Shah

我想在我的视图上显示...而不是作为背景。 - Darshit Shah

感谢回复，一切正常...不确定问题出在哪里...只是重新提取代码，现在可以工作了。 - Darshit Shah

Answer 1

我不确定我是否正确理解了你的意思，但如果这是你想要的效果：

接下来你需要：

1. 为你的喷射器添加一个“容器视图”
2. 为该视图创建一个出口
3. 将 clipsToBounds 设置为容器视图的 true

这是我使用的 ViewController，它生成了上面的截图

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!
    }
}

希望这能对您有所帮助。

- pbodsk

Answer 2

你好，更改每个如下的emitterPosition X：

    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)

希望能对您有所帮助，谢谢。

- V D Purohit

Answer 3

它正常工作，检查模拟器的输出。背景图像是从故事板中添加的，蓝色是通过代码完成的。仍然正常工作。

输出：

- dahiya_boy

Answer 4

你可以通过改变添加图层的方式来解决问题，现在你是将它添加到所有图层的顶部，有时会遮挡其他图层和视图对象。

更改

self.view.layer.addSublayer(emitter)

至

self.view.layer.insertSublayer(emitter, at: 0)

- Khalid Afridi