Search code examples
.netmauimaui-blazormaui-windows

how to splash animation on .net maui 6


how i can do a splash animation on .net maui? I'm trying this: https://developer.android.com/develop/ui/views/launch/splash-screen and i get error: APT2230 root element must be . and if i'm add the resources. i'm getting another error: APT2000 unknown resource type 'animated-vector'.

this my style.xml

`

<?xml version="1.0" encoding="utf-8" ?>
<resources >
    <style name="MyAppTheme" parent="Maui.SplashTheme">
      <item name="android:statusBarColor">@color/abc_background_cache_hint_selector_material_dark</item>
      <item name="android:windowContentOverlay">@null</item>
      <item name="android:windowSplashScreenAnimatedIcon">@drawable/avd_anim</item>
      <item name="android:windowSplashScreenIconBackgroundColor">@android:color/black</item>
    </style>
</resources>

and this the avd_anim.xml for the animation

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector
            android:name="vector"
            android:width="96dp"
            android:height="96dp"
            android:viewportWidth="96"
            android:viewportHeight="96">
            <path
                android:name="path"
                android:pathData="M 36 64.8 L 19.2 48 L 13.6 53.6 L 36 76 L 84 28 L 78.4 22.4 Z"
                android:fillColor="#00d910"
                android:strokeWidth="1"
                android:strokeLineCap="square"
                android:strokeLineJoin="round"
                android:fillType="evenOdd"/>
        </vector>
    </aapt:attr>
    <target android:name="path">
        <aapt:attr name="android:animation">
            <set>
                <objectAnimator
                    android:propertyName="pathData"
                    android:startOffset="200"
                    android:duration="100"
                    android:valueFrom="M 36 64.8 L 19.2 48 L 13.6 53.6 L 36 76 L 84 28 L 78.4 22.4 Z"
                    android:valueTo="M 36 64.8 L 19.2 48 L 13.6 53.6 L 36 76 L 84 28 L 78.4 22.4 Z"
                    android:valueType="pathType"
                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
                <objectAnimator
                    android:propertyName="pathData"
                    android:startOffset="100"
                    android:duration="100"
                    android:valueFrom="M 36 64.8 L 19.2 48 L 13.6 53.6 L 36 76 L 84 28 L 78.4 22.4 Z"
                    android:valueTo="M 36 64.8 L 19.2 48 L 13.6 53.6 L 36 76 L 84 28 L 78.4 22.4 Z"
                    android:valueType="pathType"
                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
                <objectAnimator
                    android:propertyName="pathData"
                    android:duration="1000"
                    android:valueFrom="M 36 64.8 L 78.4 22.4 L 84 28 L 36 76 L 13.6 53.6 L 19.2 48 L 36 64.8"
                    android:valueTo="M 36 64.8 L 19.2 48 L 13.6 53.6 L 36 76 L 84 28 L 78.4 22.4 L 36 64.8"
                    android:valueType="pathType"
                    android:interpolator="@android:anim/anticipate_interpolator"/>
            </set>
        </aapt:attr>
    </target>
</animated-vector>


Solution

  • Currently, if you want to custom the Splash screen , you can the drag an image with a gradient background as you want into the Resources\Splash folder of the project, and then change the image size by setting BaseSize like below:

    <MauiSplashScreen Include="Resources\Splash\yourspalshscreen.svg" BaseSize="256,256"/>
    

    And there is a known issue about this problem, microsoft have moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release.

    You can follow up this issue by link [Enhancement] MauiSplashScreen Video / Animation Support.

    For more information, check document: Add a splash screen to a .NET MAUI app project.