Learn how to Animate Gradients in SwiftUI

I lately acquired a query from a reader about methods to animate gradient or create an animated gradient background utilizing SwiftUI. The SwiftUI framework gives quite a lot of built-in elements corresponding to LinearGradient and AngularGradient for builders to render a gradient. And, SwiftUI additionally makes it very straightforward to create animation utilizing the .animation modifier. The query is how we will mix the gradient part and the .animation modifier to create animated gradients?

On this tutorial, we are going to focus on three approaches to implement an animated gradient together with:

1. Animate the gradient by altering the beginning and finish level
2. Animate the gradient utilizing the .hueRotation modifier
3. Animate the gradient utilizing AnimatableModifier

I take advantage of Xcode 13 (beta) to put in writing this tutorial, however the code must also work on Xcode 12.

Animate gradients by altering the beginning and finish level

First, let’s begin with a easy linear gradient. Assuming you’ve created a SwiftUI challenge in Xcode, you possibly can insert the next code in ContentView:

This creates a gradient of purple and yellow from the top-left nook to the bottom-right nook.

What I wish to do subsequent is to animate the gradient colour by altering the worth of the beginning and finish factors. When the animation begins, the beginning level will change from top-left nook to bottom-left nook, whereas the top level will change from bottom-right nook to top-right nook. To implement the animation, let’s declare a state variable to carry the standing of the animation:

For the LinearGradient view, replace the code like this:

When the view seems, we begin the animation to render the change of begin & finish level. For demo objective, we simply use the linear animation and set it to run repeatedly.

Now within the preview pane, run the demo to see the animated gradient.

The identical method can apply to different gradients like RadialGradient. You’ll be able to modify the code like under to attempt it out:

Animate gradients utilizing Hue Rotation

In contrast to the primary method, this method creates an animated gradient by making use of modifications to the hue rotation angle. SwiftUI has a built-in modifier referred to as .hueRotation for shifting all the colours in a view primarily based on the angle you specify.

For instance, when you connect the .hueRotation modifier to the linear gradient and shift the angle by 45 levels like this:

The gradient colour might be adjusted accordingly as proven within the determine under.

As it’s possible you’ll discover, by animating the change of the hue rotation angle, we will additionally create an animated gradient. Assuming you already declared the animateGradient state variable, you possibly can modify the .hueRotation modifier like this:

After we toggle the state variable to true, SwiftUI will animate the change of the hue rotation angle and render the gradient animation.

Animate gradients utilizing AnimatableModifier

Let’s say, your view initially shows a gradient of purple and yellow from prime to backside. You wish to change the gradient colour to a different set of colour. How are you going to animate the change?

If that you must this sort of gradient animation, this method will suit you however it wants extra works than the opposite two approaches we simply mentioned.

In Swift, you possibly can outline a gradient utilizing the Gradient struct. Right here is an instance:

SwiftUI can’t robotically animate the gradient change from one set of colours to a different set of colour. Now we have to create our personal implementation by adopting the AnimatableModifier protocol. If you’re new to the protocol, we’ve an in-depth dialogue in our Mastering SwiftUI e-book.

Now let’s create a struct referred to as AnimatableGradientModifier which adopts the AnimatableModifier protocol to animate the gradient change:

This struct takes within the preliminary gradient (i.e. fromGradient) and the goal gradient (i.e. toGradient) as enter parameters. The progress variable retains monitor of the change of gradient. The preliminary worth is ready to 0. When the worth is ready to 1, this implies the gradient colour utterly modifications to the colour set of toGradient.

I discussed earlier than that it’s our accountability to have our personal implementation for the colour change. Within the code above, we created a perform named colorMixer (ref: because of SwiftUI-lab) to compute the ensuing colour primarily based on fromColor, toColor, and the given progress.

Because the progress worth modifications over time, the physique half creates the LinearGradient view utilizing the computed colours.

That is how we animate the change from one set of gradient colour to a different set. For comfort functions, create a view extension to use the AnimatableGradientModifier:

Now you possibly can replace ContentView like this to make use of the animatableGradient modifier:

I attempted to run the app within the preview pane however it didn’t render the animation correctly. To check the gradient animation, you higher use the iPhone simulator.