Shower Animation SwiftUI

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.cgColor
particlesLayer.emitterShape = .circle
particlesLayer.emitterPosition = CGPoint(x: 0.0, y: 0.0)
particlesLayer.emitterSize = CGSize(width: 1648.0, height: 1112.0)
particlesLayer.emitterMode = .surface
particlesLayer.renderMode = .oldestLast
}

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

let image1 = UIImage(named: "summer")?.cgImage
let cell1 = CAEmitterCell()
cell1.contents = image1
cell1.name = "Snow"
cell1.birthRate = 92.0
cell1.lifetime = 20.0
cell1.velocity = 59.0
cell1.velocityRange = -15.0
cell1.xAcceleration = 5.0
cell1.yAcceleration = 40.0
cell1.emissionRange = 180.0 * (.pi / 180.0)
cell1.spin = -28.6 * (.pi / 180.0)
cell1.spinRange = 57.2 * (.pi / 180.0)
cell1.scale = 0.06
cell1.scaleRange = 0.3
cell1.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 birthRate property sets how many particles to create every second.
• The lifetime property sets how long each particle should live, in seconds.
• The velocity property sets the base movement speed for each particle.
• The velocityRange property sets how much velocity variation there can be.
• The spinRange property sets how much spin variation there can be between particles.
• The scale property sets how large particles should be, where 1.0 is full size.
• The scaleRange property sets how much size variation there can be between particles.
• The color property sets the color to be applied to each particle.
• The alphaSpeed property sets how fast particles should be faded out (or in) over their lifetime.
• The contents property assigns a CGImage 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 !💚