Methods to Animate Gradients in SwiftUI

I lately bought a query from a reader about easy methods to animate gradient or create an animated gradient background utilizing SwiftUI. The SwiftUI framework supplies a variety of built-in parts resembling 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 are able to mix the gradient part and the .animation modifier to create animated gradients?

On this tutorial, we are going to talk about 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 exploit 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 venture 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 need to do subsequent is to animate the gradient coloration 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 approach can apply to different gradients like RadialGradient. You’ll be able to modify the code like beneath to attempt it out:

Animate gradients utilizing Hue Rotation

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

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

The gradient coloration will probably be adjusted accordingly as proven within the determine beneath.

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

Once 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 need to change the gradient coloration to a different set of coloration. How will you animate the change?

If you could this sort of gradient animation, this strategy 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 mechanically animate the gradient change from one set of colours to a different set of coloration. We’ve got to create our personal implementation by adopting the AnimatableModifier protocol. In case you are new to the protocol, we’ve an in-depth dialogue in our Mastering SwiftUI e-book.

Now let’s create a struct known 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 observe of the change of gradient. The preliminary worth is ready to 0. When the worth is ready to 1, this implies the gradient coloration utterly adjustments 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 operate named colorMixer (ref: due to SwiftUI-lab) to compute the ensuing coloration primarily based on fromColor, toColor, and the given progress.

Because the progress worth adjustments 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 coloration 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.