CAEmitterLayer's emissionLongitude and latitude in swift

Question

hello I have a question about emissionLongitude and latitude i don't know what are they used for. I currently study a tutorial book about animations and I am on CAEmitterLayer right now and i have stopped studying because I don't know about these two things. I will appreciate you help. thank you.

Answer 1

Frequently, the best way to learn is by trying. I'd suggest you follow the link to the source code at the end of that article (here), download the project, and play around with the code.

Based on that article, here is a quick, simple example:

class EmmitterTestViewController: UIViewController {

    let eView = BasicParticleView()
    
    override func viewDidLoad() {
        super.viewDidLoad()

        // create a 12x12 round red image
        let img = roundImage(with: .red)
        eView.particleImage = img
        
        eView.translatesAutoresizingMaskIntoConstraints = false
        eView.backgroundColor = .cyan
        
        view.addSubview(eView)
        let g = view.safeAreaLayoutGuide
        NSLayoutConstraint.activate([
            eView.topAnchor.constraint(equalTo: g.topAnchor, constant: 20.0),
            eView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 20.0),
            eView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -20.0),
            eView.bottomAnchor.constraint(equalTo: g.bottomAnchor, constant: -20.0),
        ])
    }
    
    func roundImage(with color: UIColor) -> UIImage {
        let rect = CGRect(origin: .zero, size: CGSize(width: 12.0, height: 12.0))
        return UIGraphicsImageRenderer(size: rect.size).image { context in
            context.cgContext.setFillColor(color.cgColor)
            context.cgContext.addPath(UIBezierPath(ovalIn: rect).cgPath)
            context.cgContext.fillPath()
        }
    }

}

class BasicParticleView:UIView {
    
    var particleImage:UIImage?
    
    override class var layerClass:AnyClass {
        return CAEmitterLayer.self
    }
    
    func makeEmmiterCell(color:UIColor, velocity:CGFloat, scale:CGFloat)-> CAEmitterCell {
        let cell = CAEmitterCell()
        cell.birthRate = 10
        cell.lifetime = 20.0
        cell.lifetimeRange = 0
        cell.velocity = velocity
        cell.velocityRange = velocity / 4
        
        cell.emissionRange = .pi / 8
        cell.scale = scale
        cell.scaleRange = scale / 3
        
        cell.contents = particleImage?.cgImage

        // emissionLongitude - direction of particles on x/y plane
        //  .pi * 0.0 == up
        //  .pi * 1.0 == down
        //  .pi * 0.5 == left-to-right
        //  .pi * 1.5 == right-to-left
        //  .pi * 0.25 == angle-up-right
        cell.emissionLongitude = .pi * 0.0
        
        return cell
    }
    
    override func layoutSubviews() {
        let emitter = self.layer as! CAEmitterLayer
        emitter.masksToBounds = true
        emitter.emitterShape = .line
        
        emitter.emitterPosition = CGPoint(x: bounds.midX, y: bounds.midY)
        emitter.emitterSize = CGSize(width: 1, height: 1)

        let cell = makeEmmiterCell(color: UIColor(white: 1, alpha: 1), velocity: 100, scale: 0.3)
        emitter.emitterCells = [cell]
    }
    
}

This will create a cyan view (inset by 20-pts on each side to make it easy to see), and will generate round, red particles. Note in the comments how you can use .emissionLongitude to change the direction.

Here's how it looks with .emissionLongitude = 0 -- particles moving "up":

Here's how it looks with .emissionLongitude = .pi -- particles moving "down":

And with .emissionLongitude = .pi * 0.25 -- particles moving "up-right":

Play with the settings... read the docs... read articles / tutorials... examine example code... Learn as you go :)