Animations

DIPS delivers a set of animated images that you can use in your app. The animations are located in the mobile design tokens repository.

Usage

The animations are available for you to use with SKLottieView from SkiaSharp.Extended.UI.Maui:

XAML Shared:

<skia:SKLottieView 
    Source="{dui:Animations saved}" 
    HeightRequest="{dui:Sizes size_25}" 
    WidthRequest="{dui:Sizes size_25}"
/>               

Tips and tricks

Detect animation completed

To know when an animation has completed, subscribe to SKLottieView.PropertyChanged. Inspect the PropertyChangedEventArgs to know that IsCompleted property changed. If it changes, it will be completed when IsCompleted is true.

Turn it off

If you do not use our animations and are worried your app including animations that are not needed, you can turn it off by setting the following property in your .csproj:

<PropertyGroup>
    <DIPSIncludeAnimations>False</DIPSIncludeAnimations>
</PropertyGroup>