使用SVG动画创建Android启动画面

问题描述 投票：0回答：2

我正在使用 Xamarin.Forms 开发一个应用程序，我正在尝试将启动屏幕插入我的 Android 项目。

我找到了一些创建带有背景颜色和静态 png 图像的启动屏幕的教程，但我想使用我的 svg 动画作为启动屏幕。我以为我可以按照静态图像教程并将 png 图像替换为 svg 动画，但它不起作用。这是我到目前为止所拥有的：

开

SplashActivity.cs
：

[Activity(Label = "SplashActivity", Theme = "@style/Theme.Splash", MainLauncher = true, NoHistory = true)]
    public class SplashActivity : Activity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            // Create your application here
        }

        protected override void OnResume()
        {
            base.OnResume();
            Task startupWork = new Task(() => { SimulateStartup(); });
            startupWork.Start();
        }

        async void SimulateStartup()
        {
            await Task.Delay(5000);
            StartActivity(new Intent(Application.Context, typeof(MainActivity)));
        }
    }

开

MainActivity.cs
：

// I only changed the MainLauncher property to false
[Activity(Label = "MyApp", Icon = "@mipmap/icon", Theme = "@style/MainTheme", MainLauncher = false, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize )]
    public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
    {
        ...
    }

在 

styles.xml
（在 Xamarin.Android 项目中）：

<style name="Theme.Splash" parent="android:Theme">
    <item name="android:windowBackground">@drawable/desenhando5s</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowFullscreen">true</item>
    <item name="colorPrimaryDark">#004632</item>
  </style>

当我运行该应用程序时，它仅显示黑屏作为启动屏幕，然后一如既往地显示我的登录页面。 谁能告诉我必须做什么才能将动画设置为启动屏幕？

（仅供参考：如果有人想知道，我使用 SVGator 创建了动画）

svg xamarin.forms xamarin.android splash-screen
2个回答
1
投票

您可以使用 

FFImageLoading
将 svg 图像加载到 
SplashActivity
中，而不是在 
styles.xml
中设置它。

启动画面：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FFImageLoading.Views.ImageViewAsync
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>

代码：

protected override void OnCreate(Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);

        // Create your application here

        SetContentView(Resource.Layout.layout5);

        var filePath = "check";
        var imageView = FindViewById<ImageView>(Resource.Id.imageView);
        ImageService.Instance.LoadCompiledResource(filePath).WithCustomDataResolver(new SvgDataResolver(64, 0, true)).Into(imageView);
    }
    protected override void OnResume()
    {
        base.OnResume();
        Task startupWork = new Task(() => { SimulateStartup(); });
        startupWork.Start();
    }
    async void SimulateStartup()
    {
        await Task.Delay(5000);
        StartActivity(new Intent(Application.Context, typeof(MainActivity)));
    }

更新：

请检查屏幕截图。 .svg 图像位于 

drawable
文件夹中。布局5是布局文件夹中的启动屏幕。

0
投票

要使用 androidsplash API 为 Splash 图标和启动屏幕设置动画，您必须在 xml 中使用 

animated-vector
标签来绘制。

<<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:width="288dp"
        android:height="288dp"
        android:viewportWidth="288"
        android:viewportHeight="288">
        <group
            android:name="rotationGroup"
            android:pivotX="150"
            android:pivotY="150"
            android:scaleX="0.5"
            android:scaleY="0.5">
            <path
                android:fillColor="#535353"
                android:fillType="nonZero"
                android:pathData="M133,53.14L44.09,53.14L44.09,142.09L74.43,142.09L54.86,236.2L100.04,236.2L132.86,140.51C132.94,140.27 132.98,140.01 132.98,139.75ZM133,53.14"
                android:strokeColor="#00000000" />
            <path
                android:fillColor="#423C3C"
                android:fillType="nonZero"
                android:pathData="M94.52,125.35L71.46,236.2L54.86,236.2L74.43,142.09L44.09,142.09L44.09,53.14L61.5,53.14L61.5,123C61.5,123.63 61.75,124.22 62.18,124.66C62.63,125.1 63.22,125.35 63.84,125.35ZM94.52,125.35"
                android:strokeColor="#00000000" />
            <path
                android:fillColor="#535353"
                android:fillType="nonZero"
                android:pathData="M236.23,53.14L147.35,53.14L147.35,142.09L177.69,142.09L158.07,236.19L203.25,236.19L236.07,140.51C236.15,140.27 236.2,140.01 236.2,139.75ZM236.23,53.14"
                android:strokeColor="#00000000" />
            <path
                android:fillColor="#423C3C"
                android:fillType="nonZero"
                android:pathData="M197.76,125.35L174.7,236.2L158.07,236.2L177.65,142.1L147.35,142.1L147.35,53.14L164.76,53.14L164.76,123C164.76,123.63 165.01,124.22 165.45,124.66C165.89,125.1 166.48,125.35 167.11,125.35ZM197.76,125.35"
                android:strokeColor="#00000000" />
            <path
                android:fillColor="#00000000"
                android:pathData="M133,53.14L44.09,53.14L44.09,142.09L74.43,142.09L54.86,236.2L100.04,236.2L132.86,140.51C132.94,140.27 132.98,140.01 132.98,139.75ZM133,53.14"
                android:strokeWidth="5.69"
                android:strokeColor="#121331"
                android:strokeLineCap="round"
                android:strokeLineJoin="round" />
            <path
                android:fillColor="#00000000"
                android:pathData="M236.23,53.14L147.35,53.14L147.35,142.09L177.69,142.09L158.07,236.19L203.25,236.19L236.07,140.51C236.15,140.27 236.2,140.01 236.2,139.75ZM236.23,53.14"
                android:strokeWidth="5.69"
                android:strokeColor="#121331"
                android:strokeLineCap="round"
                android:strokeLineJoin="round" />
        </group>
    </vector>
</aapt:attr>

<target android:name="rotationGroup">
    <aapt:attr name="android:animation">
        <set>
            <objectAnimator
                android:duration="600"
                android:propertyName="rotation"
                android:repeatCount="1"
                android:repeatMode="reverse"
                android:valueFrom="0"
                android:valueTo="30"/>
        </set>
    </aapt:attr>
</target>
>

确保根据需要将路径数据和其他属性替换为您的特定值。

让我解释一下：

这是我们用于绘制的标签

animated-vector
。

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt">

您可能会注意到您的图标图像看起来太大并且超出了初始图标的大小。要解决此问题，您需要

group
矢量路径，然后设置pivotX、pivotY、scaleX和scaleY值。

 <<aapt:attr name="android:drawable">
    <vector
        android:width="288dp"
        android:height="288dp"
        android:viewportWidth="288"
        android:viewportHeight="288">
        <group
            android:name="rotationGroup"
            android:pivotX="150"
            android:pivotY="150"
            android:scaleX="0.5"
            android:scaleY="0.5">
            
            <path
                android:fillColor="#535353"
                android:fillType="nonZero"
                android:pathData="M133,53.14L44.09,53.14L44.09,142.09L74.43,142.09L54.86,236.2L100.04,236.2L132.86,140.51C132.94,140.27 132.98,140.01 132.98,139.75ZM133,53.14"
                android:strokeColor="#00000000" />
            <!-- Additional path data here -->
        </group>
    </vector>
</aapt:attr>>

现在您已经设置了启动图标，让我解释一下如何在启动屏幕启动时为该 SVG 图标设置动画。为此，您需要使用 ObjectAnimator。确保定位与用于对路径数据进行分组的同一组。

 <target android:name="rotationGroup">
    <aapt:attr name="android:animation">
        <set>
            <objectAnimator
                android:duration="600"
                android:propertyName="rotation"
                android:repeatCount="1"
                android:repeatMode="reverse"
                android:valueFrom="0"
                android:valueTo="30"/>
        </set>
    </aapt:attr>
</target>

首先，在setContentView之上启动installSplashScreen()。要为图标和启动屏幕设置动画，请使用 

.setKeepOnScreenCondition
，要在启动屏幕退出时设置动画，请使用 
splashScreen.setOnExitAnimationListener
:

class MainActivity : AppCompatActivity() {


@RequiresApi(Build.VERSION_CODES.S)
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    installSplashScreen()
    setContentView(R.layout.activity_on_boarding)

    //Handling Splash Screen Duration and animation
    var keepSplashOnScreen = true
    val delay = 2000L
    installSplashScreen().setKeepOnScreenCondition { keepSplashOnScreen }
    Handler(Looper.getMainLooper()).postDelayed({ keepSplashOnScreen = false }, delay)

    splashScreen.setOnExitAnimationListener { splashScreenView ->
        val slideLeft = ObjectAnimator.ofFloat(
            splashScreenView, View.TRANSLATION_X, 0f, -splashScreenView.height.toFloat()
        )
        slideLeft.interpolator = AnticipateInterpolator()
        slideLeft.duration = 500L
        slideLeft.doOnEnd { splashScreenView.remove() }
        slideLeft.start()
    }
}

}

确保根据您的要求调整延迟和向左滑动的持续时间。你还可以使用其他类型的动画，例如slideUp、slideRight等

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.