Hey friends! Am back with new try in SwiftUI which is we are using CAEmitterLayer. CAEmitterLayer is a subclass of CALayer. Here i use that instance to create a beautiful shower animation in SwiftUI. Lets go.

Start with creating UIViewRepresentable class.

struct AutumnView: UIViewRepresentable {func makeUIView(context: Context) -> UIView {
}
func updateUIView(_ uiView: UIView, context: Context) {}typealias UIViewType = UIView
}

We have to create a UIView to host that CAEmitterLayer. So create a UIView.

func makeUIView(context: Context) -> UIView {let size = CGSize(width: 824.0, height: 1112.0)let host = UIView(frame: CGRect(x: 0.0, y: 0.0, width: size.width, height: size.height))
}

Create CAEmitterLayer and subview in that host view.

func makeUIView(context: Context) -> UIView {let size = CGSize(width: 824.0, height: 1112.0)let host = UIView(frame: CGRect(x: 0.0, y: 0.0, width: size.width, height: size.height))let particlesLayer = CAEmitterLayer()particlesLayer.frame = CGRect(x: 0.0, y: 0.0, width: size.width, height: size.height)host.layer.addSublayer(particlesLayer)host.layer.masksToBounds = true
}

And now add emitter position, shape ,size and render mode.

func makeUIView(context: Context) -> UIView {let size = CGSize(width: 824.0, height: 1112.0)let host = UIView(frame: CGRect(x: 0.0, y: 0.0, width: size.width, height: size.height))let particlesLayer = CAEmitterLayer()particlesLayer.frame = CGRect(x: 0.0, y: 0.0, width: size.width, height: size.height)host.layer.addSublayer(particlesLayer)host.layer.masksToBounds = trueparticlesLayer.backgroundColor = UIColor.clear.cgColorparticlesLayer.emitterShape = .circleparticlesLayer.emitterPosition = CGPoint(x: 0.0, y: 0.0)particlesLayer.emitterSize = CGSize(width: 1648.0, height: 1112.0)particlesLayer.emitterMode = .surfaceparticlesLayer.renderMode = .oldestLast
}

Now create a emitter cell which is the key of showering.

let image1 = UIImage(named: "summer")?.cgImagelet cell1 = CAEmitterCell()cell1.contents = image1cell1.name = "Snow"cell1.birthRate = 92.0cell1.lifetime = 20.0cell1.velocity = 59.0cell1.velocityRange = -15.0cell1.xAcceleration = 5.0cell1.yAcceleration = 40.0cell1.emissionRange = 180.0 * (.pi / 180.0)cell1.spin = -28.6 * (.pi / 180.0)cell1.spinRange = 57.2 * (.pi / 180.0)cell1.scale = 0.06cell1.scaleRange = 0.3cell1.color = UIColor(red: 255.0/255.0, green: 255.0/255.0, blue: 255.0/255.0, alpha: 1.0).cgColor

I forgot to mention that, Here in above code i used only like cgimage and cg color as it is a subclass of CALayer.

  • The property sets how many particles to create every second.
  • The property sets how long each particle should live, in seconds.
  • The property sets the base movement speed for each particle.
  • The property sets how much velocity variation there can be.
  • The property sets how much spin variation there can be between particles.
  • The property sets how large particles should be, where 1.0 is full size.
  • The property sets how much size variation there can be between particles.
  • The property sets the color to be applied to each particle.
  • The property sets how fast particles should be faded out (or in) over their lifetime.
  • The property assigns a to be used as the image.

Add this cell to CAEmitterLayer.

particlesLayer.emitterCells = [cell1]

Now we can use this in our SwiftUI’s ContentView.

var body: some View {let backg = VStack{Image(catname).resizable().scaledToFit()Image(imageName).resizable().scaledToFit().frame(height: 200)}HStack{
AutumnView() //use that view directly like that
.background(backg)}
}

Now the view will appear like the gif. And full code is available in my repo https://github.com/LyvennithaQgen/CAEmitterLayerProject. Follow me for more updates and new things.

Happy Coding !💚

Passionate iOS developer chasing my dreams toward success