As a general guide, an easing ending with the In suffix will start the animation slowly and speed up as it comes to a finish. An easing ending with the Out suffix will start off quickly and slow down towards the end.

Complex Animations

.NET MAUI provides the Animation class. This enables you to define complex animation sequences. In fact, the prebuilt animations that you covered in the “Basic Animations” section are built using this class inside the .NET MAUI code. Using this class, it is possible to animate any visual property of a VisualElement; for example, you can animate a change in

BackgroundColor or TextColor.

The Animation class provides the ability to define simple animations through to really quite complex animations. Take a quick look at how the ScaleTo animation can be implemented to understand what the class offers.

Recreating the ScaleTo Animation

You can also animate the scale of your AddWidgetFrame control with the following:

public void ScaleTo()

247

Chapter 8 Advanced UI Concepts

{

var animation = new Animation(v => AddWidgetFrame.Scale = v, 0, 1);

animation.Commit(AddWidgetFrame, "ScaleTo");

}

When creating an instance of the Animation class, you provide the following parameter:

v => AddWidgetFrame.Scale = v

This is the callback parameter and it allows you to define what property is set during the animation.

The next parameter is start. This is the starting value that will be passed into the callback lambda you defined in the first parameter. In your example, you set it to 0, meaning the AddWidgetFrame control will not be visible because it has a scale of 0.

The final parameter you pass in is end. This is the resulting value that will be passed into the callback lambda.

The animation will only begin when you call the Commit method. This method also allows you to define how long it should take as well as how often to call the callback parameter you defined.

animation.Commit(AddWidgetFrame, "ScaleTo", length: 2000);

This code shows the simplest type of animation you can create within .NET MAUI. It is entirely possible to create much more complex animations. To achieve this, you need to create an animation and then add child animations in order to define the changes for each property and different sequences in the animation.

248

Chapter 8 Advanced UI Concepts

Creating a Rubber Band Animation

As an example on how to build a complex animation, I would like to show you one of my favorite animations, the rubber band animation. This animation simulates the VisualElement being pulled horizontally, letting go, and then bouncing back to its original shape just like a rubber band would. Figure 8-3 shows what it would look like, albeit in motion.

Figure 8-3.  The distinguishing frames from the animation you will be building

Let’s build the animation with the Animation class using the understanding you gained in the previous section.

public void Rubberband(VisualElement view)

{

var animation = new Animation();

animation.Add(0.00, 0.30, new Animation(v => view.ScaleX = v, 1.00, 1.25)); animation.Add(0.00, 0.30, new Animation(v => view.ScaleY = v, 1.00, 0.75));

249

Chapter 8 Advanced UI Concepts

animation.Add(0.30, 0.40, new Animation(v => view.ScaleX = v, 1.25, 0.75)); animation.Add(0.30, 0.40, new Animation(v => view.ScaleY = v, 0.75, 1.25));

animation.Add(0.40, 0.50, new Animation(v => view.ScaleX = v, 0.75, 1.15)); animation.Add(0.40, 0.50, new Animation(v => view.ScaleY = v, 1.25, 0.85));

animation.Add(0.50, 0.65, new Animation(v => view.ScaleX = v, 1.15, 0.95)); animation.Add(0.50, 0.65, new Animation(v => view.ScaleY = v, 0.85, 1.05));

animation.Add(0.65, 0.75, new Animation(v => view.ScaleX = v, 0.95, 1.05)); animation.Add(0.65, 0.75, new Animation(v => view.ScaleY = v, 1.05, 0.95));

animation.Add(0.75, 1.00, new Animation(v => view.ScaleX = v, 1.05, 1.00)); animation.Add(0.75, 1.00, new Animation(v => view.ScaleY = v, 0.95, 1.00));

animation.Commit(view, "RubberbandAnimation", length: 2000);

}

Yes, I know this looks quite different to the previous animation you built. Let’s deconstruct the parts that feel unfamiliar.

animation.Add(0.00, 0.30, new Animation(v => view.ScaleX = v, 1.00, 1.25));

animation.Add(0.00, 0.30, new Animation(v => view.ScaleY = v, 1.00, 0.75));

250

Chapter 8 Advanced UI Concepts

The two lines above define the first transition in your animation. You see that the ScaleX property will change from 1.00 (100%) to 1.25 (125%) and the ScaleY property will change from 1.00 (100%) to 0.75% (75%) of the control’s current size. This provides the appearance that the view is being stretched. The key new part for you is the use of the Add method and the first two parameters. This allows you to add the animation defined

as the third parameter as a child of the animation it is being added to. The result is that when you Commit the main animation, all of the child animations will be executed based on the sequence you defined in these two first parameters. Let’s cover what these parameters mean.

The first parameter is the beginAt parameter. This determines when the child animation being added will begin during the overall animation sequence. So, in the example of your first line, you define 0.00, meaning it will begin as soon as the animation starts.

The second parameter is the finishAt parameter. This determines when the child being added will finish during the overall animation sequence. So, in the example of your first line, you define 0.30, meaning it will end 30% into the animation sequence.

Both the beginAt and finishAt parameters should be supplied as a value between 0 and 1 and considered a percentage in the overall animation sequence. You will also notice that I tend to include the decimal places even when they are 0; this really makes it easier to read the animation sequence as it ensures that all of the code is indented in the same way.

Finally, you call the Commit method as before to begin the animation sequence.

251