Remaking Weather

Starting with clouds

We’re going to pull apart then rebuild the user interface from the Weather app that shipped with iOS 15 onwards. The app itself is remarkably big, but we’re going to cherry pick all the interesting bits – starting with clouds…

Creating a day/night cycle

One of the most beautiful parts of the Weather app is the way it smoothly transitions between day and night – it doesn’t just go from black to blue, but instead mimics both sunrise and sunset, smoothly animating between the two. In this tutorial we’re going to recreate that same effect in our own app.

Tinting our clouds

Now that we have a working day/night cycle, we’re going to follow that up with a subtle but beautiful effect: we’ll dynamically tint our clouds so they glow with sunrise and sunset, and look darker at night time.

Drawing a star field

At night the weather app usually shows stars, although if you live in my town chances are they are usually obscured by clouds! These stars aren’t as simple as you might think, so we need to get a bit creative…

Rendering rain and snow, part 1

One of the most fascinating and beautiful effects in the Weather app is the use of rain and snow: some particles that fall gracefully, and some that pile up on the user interface. Building this means taking your Canvas skill up a notch, so let’s get into it…

Rendering rain and snow, part 2

Now that our Weather app supports both rain and snow, we can progress onto an even more advanced effect: making those weather particles appear to interact with the rest of our user interface! This uses a fun trick, but it takes a little thinking…

Animating lightning bolts

It’s time for us to build one of the most eye-catching effects in the weather app: the fantastic bolts of lightning that arc down, fork off randomly, and really add some drama to stormy days. This is going to be good…

Bringing the sun out

Okay, so the lightning effect took a lot of work, but now we’re on to something much easier: adding some sunshine. This is place ripe for experimentation, but we can get something good with remarkably little work.

Adding a meteor shower

Large parts of Apple’s Weather app is about bringing little sparks of joy to an otherwise very serious, fact-driven experience, but none more so than the random little meteors that fly by on starry nights. They move so fast so you might be tempted to skip over them, but I think it’s definitely worth exploring and having some fun with!