ios - 如何设置 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

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

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

希望对您有所帮助。

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)

希望对你有帮助，谢谢。

Answer 3

您可以通过更改现在添加图层的方式来解决您的问题，将其添加到有时会隐藏其他图层和查看对象的所有内容之上。

改变

self.view.layer.addSublayer(emitter)

至

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

Answer 4

它工作正常，检查我的模拟器的输出。背景图像是从情节提要中添加的，蓝色是由代码完成的。仍然工作正常。

输出：