Animations in MAUI

Seamless map refreshing using Animations.

Since we released ThinkGeo 14 on May 1st, we’ve had a series of posts to show off all the new features. Last week’s post went over the new Quickstart Guide and Debugging Tips.

Today we will dive into Animations and how you can use them to make your map come alive. These animations can be used on any map refresh event and can make smooth transitions like the Navigation Sample shown here. To see this sample in action, just clone our HowDoI samples from here and run the project in Visual Studio.

MAUI Animations

In ThinkGeo MAUI, all map refresh actions can be customized by setting the AnimationSettings on the MapView’s DefaultAnimationSettings property.

If you need to customize the animation for individual refresh, recenter or zoom actions, take a look at the ZoomToAsync, ZoomToExtentAsync, CenterAtAsync and PanAsync functions.

To see each of these in action, you can download the HowDoI samples here and check out the following samples under Map Navigation:

• Vehicle Navigation

• Zoom to Extents

• Zoom to the Black Hole

In addition to the samples, we’ll also do a brief walkthrough with code samples below.

Animations Walkthrough

In the example below, we demonstrate how to set a default animation for the entire MapView. This will control all default map refresh actions for the map (unless overridden later in a Zoom, Center or Pan call). An example of setting this property is below:

  
        //set the DefaultAnimationSettings to manage map refresh actions.
        MapView.DefaultAnimationSettings = new AnimationSettings
        {
            Type = MapAnimationType.DrawWithAnimation,  //Can also be set to DrawAfterAnimation.
            Length = 1000,  // duration of the animation in milliseconds.  Default is 150 and 0 specifies no animation.
            Easing = Easing.Linear   //CubicInOut is default.   
        };
  

the example value above will produce a very smooth animation like the one shown in the Navigation Sample. The AnimationSettings class has 3 properties:

• Type - This is set to a valuel of the MapAnimationType enum. Your options are DrawWithAnimation or DrawAfterAnimation.

• Length - This is simply the duration of the animation in milliseconds.

• Easing - This uses the Microsoft.MAUI Easing enum and can be set to many different values. CubicInOut is the default.

By changing these 3 properties, you can create any Animation you want.

These animations can also be specified when calling individual Zoom, Center and Pan functions. The code below shows you how to set an animation when calling the ZoomToExtentAsync function, but the same can also be used on the ZoomToAsync, CenterAtAsync and PanAsync functions.

  
    try
    {
        await MapView.ZoomToExtentAsync(centerPoint, scale, 0, new AnimationSettings { Length = 3000, Type = MapAnimationType.DrawWithAnimation }, cancellationToken: cancellationToken);
    }
    catch (TaskCanceledException)
    {
        break;
    }
  

The snippet above shows how to zoom to a given extent while doing a 3-second animation during the map drawing.

Check Back Soon

Check back next week when we explore Dynamic Rendering!

If you have any additional questions on ThinkGeo UI for .NET MAUI, please email sales@thinkgeo.com or schedule a meeting to talk in person.

About ThinkGeo

We are a GIS software company founded in 2004 and located in Frisco, TX. Our clients are in more than 40 industries including agriculture, energy, transportation, government, engineering, IT, and defense.

We pride ourselves on our excellent service and transparency. ThinkGeo offers a variety of products and services to meet almost any GIS application need. We can even help you develop your next project - anywhere from a few hours of consulting to outsourcing an entire project. To learn more, email us at sales@thinkgeo.com, or call us direct at 1-214-449-0330.