iosswiftcore-animationcaemitterlayercaemittercell

CAEmitterLayer's emissionLongitude and latitude in swift


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.


Solution

  • 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":

    enter image description here

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

    enter image description here

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

    enter image description here

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