Creating beautiful animations in SwiftUI is a rewarding process, and today, I'll walk you through how to create a simple Snowfall animation using SwiftUI. This guide will show how to animate falling snowflakes with different sizes, colors, and motion, all while leveraging SwiftUI's powerful animation capabilities.

Implementation Goals

• Create animated snowflakes with random properties.
• Continuously animate snowflakes falling from the top to the bottom of the screen.
• Customize snowflake appearance, including size, color, and falling speed.

Approach

The snowfall animation involves generating multiple snowflakes that randomly differ in size, color, and position. Each snowflake will have a unique path and will fall continuously from the top of the screen to the bottom.

Core Code

The key to creating the snowfall effect lies in the SnowflakeView struct. Each snowflake is given random properties for size, position, and animation speed, and it moves from the top of the screen downwards.

struct SnowflakeView: View {
    @State private var flakeYPosition: CGFloat = -100
    private let flakeSize: CGFloat = CGFloat.random(in: 18...40)
    private let flakeColor: Color = Color(
        red: Double.random(in: 0.6...1),
        green: Double.random(in: 0.7...1),
        blue: Double.random(in: 1...1),
        opacity: Double.random(in: 0.4...0.7)
    )
    private let animationDuration: Double = Double.random(in: 5...12)
    private let flakeXPosition: CGFloat = CGFloat.random(in: 0...UIScreen.main.bounds.width)

    var body: some View {
        Text("❄️")
            .font(.system(size: flakeSize))
            .foregroundColor(flakeColor)
            .position(x: flakeXPosition, y: flakeYPosition)
            .onAppear {
                withAnimation(Animation.linear(duration: animationDuration).repeatForever(autoreverses: false)) {
                    flakeYPosition = UIScreen.main.bounds.height + 50
                }
            }
    }
}

Explanation

• Random Properties: Each snowflake is assigned a random size, color, position, and falling speed, making the scene look more natural.
• Animation: Using SwiftUI's withAnimation and repeatForever, the snowflakes continuously fall from the top of the screen.
• Reusable View: The SnowflakeView struct allows easy creation of multiple snowflakes with just a simple loop.

Implementation Screen

Complete Source Code

The full code and explanation can be found in the GitHub repository linked below.

Thank You!

Feel free to check out the code and experiment with the animations. Happy coding!