Create animations in .NET MAUI for a disco atmosphere
But the mood remains a little dull, and I promised you a disco atmosphere at the very beginning of this course! So today we’re going to learn how to use .NET MAUI animations to set the dance floor on fire.
Now it’s time to put on your sunglasses, because there will be flashes everywhere! 🪩
Setting up the spotlights
As you can see, I want it to look like we’re in a nightclub. So to start with, we’re going to add a few spotlights to the upper part of the screen, which is represented by our Grid TopLayout
.
Ideally, you’d want to place spotlights all over the place, in different sizes and colors… And this is clearly about parameters of an object! So we’re going to define a new dedicated class: Spotlight
.
Start by creating a new Components folder in the project. Then add a new Spotlight.cs file in this folder with the following content:
Filename:Spotlight.cs
|
|
As you can see, this class takes the following 4 properties as parameters:
the spotlight color (
color
),its size (
size
),and then, its horizontal (
positionX
) and vertical position (positionY
).
By the way, did you notice that Spotlight
inherits from BoxView? Remember, we already have used this object to verify the components arrangement of the MusicPlayerView.
CornerRadius
property, just as we did with the play button! To do this, the CornerRadius
value must be half the requested size (size
).Precisely, let’s see how the size and position of the Spotlight
have been defined:
Filename:Spotlight.cs
|
|
With the SetLayoutBounds() method, we apply the requested position and size to our Spotlight (this
), passing it a Rect object. This is a structure representing the coordinates of our component, as well as its dimensions.
Finally, the SetLayoutFlags() method is used to take this position into account proportionally:
|
|
In short, the Spotlight’s size will be set in absolute values, but its coordinates will be passed in proportional values. However, these methods can only work on elements contained in an AbsoluteLayout.
TopLayout
acts as the main container, while the projectors are added to an intermediate AbsoluteLayout component.Indeed, this component also lets you align elements, but in a much freer way. That’s why you need coordinates! So you can easily place the objects wherever you like.
Spotlight
class! Now all we need to do is define an AbsoluteLayout, add a few Spotlight to it, and attach the whole thing to the TopLayout
.To do this, we declare a new InitDanceFloor() method in the MusicPlayerView:
Filename:MusicPlayerView.cs
|
|
Then call this method from the View constructor:
Filename:MusicPlayerView.cs
|
|
And finally, for this to work, we need to modify the declaration of TopLayout
so that it is no longer immutable:
Filename:MusicPlayerView.cs
|
|
Tadam! Here’s how it looks:
What do you mean, you’re disappointed?! 🙊
I know, it’s not super convincing… yet! So let’s move on to the next part to get a better visual.
Enhance visuals for greater realism
Until now, all we had to do to paint our visual elements was define a color and the magic would happen in the background. Now, however, there are different coloring techniques that can help us achieve a better visual effect: these are called Brushes.
For example, we’ll use RadialGradientBrush to apply a nice radial gradient:
Filename:Spotlight.cs
|
|
In concrete terms, we defined a color gradient from the center of the Spotlight to its edges, using two GradientStops:
With the instruction
GradientStop(color, 0)
, the center of the Spotlight (0
) is first painted with the requested color (color
),Next,
GradientStop(Colors.Transparent, 1)
is used to gradient towards total transparency (Colors.Transparent
) at the Spotlight circumference (1
).
And thanks to the transparency effect, the black background of the TopLayout
will appear.
Color
property when using the Background
property.Filename:Spotlight.cs
|
|
This code adds a shadow to the Spotlight that is both colored and blurred:
It’s the
Radius
property that gives this blurred effect, accentuated according to the object’s size (size / 2
),And the shadow is painted with a full color, thanks to the use of SolidColorBrush.
Let’s see again how it looks like:
Better there, isn’t it? 🙂
But these new adjustments contrast a little bit with the BottomLayout
, and the Grid should be made less opaque.
Opacity
property?BottomLayout
would become transparent! This means we wouldn’t be able to see our controls, and that wouldn’t be practical.Instead, we’ll change its color by adding a little transparency, like this:
Filename:MusicPlayerView.cs
|
|
See, it’s still the same color! But it now contains 40% transparency, thanks to the WithAlpha() method.
And here’s the result!
Well, it’s all very nice, but still very static. What we need is a little madness, some animation! Just in time, we’ll be discovering animations in .NET MAUI right after this.
It’s the time to Disco
In this part, we’ll look at how to bring a little dynamism to our spotlights. After all, what we want is a real nightclub atmosphere 🙂
To do this, we’re going to modify the Spotlight class to make our projectors blink, a bit like flashbulbs, you know? We’ll use a fade animation to gradually make our spotlights appear and disappear on the screen.
Let’s get to work! Start by applying the following modifications:
Filename:Spotlight.cs
|
|
First of all, we’ve added a new parameter: animationLength
. This defines the length of time (in milliseconds) over which the animation will repeat in a loop.
We’ve also taken the opportunity to add a few properties that we’ll be using a little later. Among them is SpotlightAnimation
, which contains the definition of the Spotlight animation.
Precisely, let’s add a new method to the Spotlight class to define this animation:
Filename:Spotlight.cs
|
|
It’s a bit technical, but not complicated. I’ll explain! 🤓
The SpotlightAnimation
property is a custom animation composed of two underlying animations:
A fade-in that gradually changes the Spotlight’s opacity from 0 to 1, throughout the first half of the animation:
{ 0, 0.5, fadeInAnimation }
,And an outgoing fade, which does exactly the opposite throughout the second half of the animation:
{ 0.5, 1, fadeOutAnimation }
.
As for the Easing.CubicOut
option, it’s just a stylish effect to make the animation slow down quickly after it has started.
StartAnimation();
instruction. This will trigger execution of the freshly initialized animation.Here’s its definition:
Filename:Spotlight.cs
|
|
As you can see, it’s the Commit() method that launches the animation defined above. Breaking down the parameters passed to Commit, we have:
An animation name (
AnimationName
), set arbitrarily by a constant,An execution length (
AnimationLength
), passed as a parameter to the Spotlight class constructor,And a repeat mode (
repeat: () => true
), to loop the animation indefinitely.
Take a moment to assimilate all these new changes!
Filename:MusicPlayerView.cs
|
|
We simply defined a different animation time to make each of our spotlights unique.
Quickly rebuild the project to see the results!
Tadaaaam! Sounds like the real thing, what do you think?
We’ll see you right after!
The final touch
Hang in there! We’re going to tackle a few more small improvements and that’ll be the end of this tutorial.
Let’s start by looking at how to stop a running animation. To do this, go back to the Spotlight class and add the new following method:
Filename:Spotlight.cs
|
|
All we need to do is call the AbortAnimation() method to cancel a running animation, using its name (AnimationName
). Remember, this is one of the parameters we passed to the Commit() method!
Let’s begin by modifying the Spotlight
class:
Filename:Spotlight.cs
|
|
To avoid code repetition, we’ve added a new bindableMediaElement
parameter of type MediaElement. In fact, we’re going to pass our MusicPlayer
component to the initialization of each Spotlight for animation setup purposes.
We’ll now modify the SetAnimation() method to apply the new animation execution conditions:
Filename:Spotlight.cs
|
|
Now that we have access to our MediaElement, we’ve applied the Data Binding technique to the CurrentState
property so that the animation is :
Started when music is playing,
Or stopped if it’s paused.
And as always, don’t forget to adapt Spotlight initialization in the InitDanceFloor() method, like this:
Filename:MusicPlayerView.cs
|
|
Here, we’ve simply switched the MusicPlayer
to Spotlight initialization, so that each projector can be switched on and off as the music plays.
I trust you’ll check that it’s working properly before we add the final touches. Yes, our dance floor is still short of passionate dancers!
Start by downloading the following two new images in .svg format:
The first shows large speakers (speakers.svg),
And the other, our famous dancers (joyful_dancers.svg).
Dance_Floor_-_Images.zip Once you’ve unpacked the .zip file, add the images to the Resources/Images folder.
TopLayout
as follows:
|
|
With the Add() method, we add all our objects one after the other to the single cell that makes up the Grid TopLayout
.
As a result, the elements will stack on top of each other! That’s exactly what we’re aiming for, to create a true sense of depth:
In the background are our projectors (
spotlights
),Then the loud speakers,
And finally, our dancers come to the foreground.
Come on, let’s relaunch the app!
I hope you’re happy with the result. In any case, congratulations on your work so far! 🤓
Conclusion
This post brings us to the end of this course, a total of 2h30 of reading which I hope you’ve enjoyed and will inspire you with lots of ideas. And thank you for your loyalty if you’ve taken the whole course! If you have a moment, drop me a comment or send me an e-mail to let me know what you thought about it.
By the way, if you want to have fun going further (and I heartily encourage you to! 🙂 ), you can try generating the projectors completely randomly. You can always compare your solution with mine by looking directly at the final project code!
Align the brightness of the spotlights with the volume of the music,
Adjust their animation speed to the tempo of the songs,
Regenerate all the spotlights when you change songs, etc.
I’d love to see your creativity at work, so if you can, share a link to your GitHub repo with me in the comments!
And that’s all for today. See you soon for new tutorials! 👋
More articles in the series: