android - 在 Flutter 应用程序中使用 Lottie 动画的原生 android 启动画面

Question

我在 After Effects 中制作了启动画面 Logo 的动画，希望我只将 LottieAnimationView 添加到 native 启动画面的背景层列表，但它不起作用。

我不想要带有计时器的虚假启动画面。我真的只是想在应用程序初始化时显示这个动画，所以我没有为此创建 Flutter 小部件。

Lottie 动画如何显示在图层列表中？是否可以？是否可以在不需要 Android View 的情况下完成(因为我真的从来没有搞砸过它)？

这是我尝试过的:

<item>
    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:lottie_fileName="logo.json"
        app:lottie_loop="true"
        app:lottie_autoPlay="true" />
</item> 

Answer 1

AbedElaziz Shehadeh explained how to do this on Medium 2020 年 12 月 8 日:

1. Start by adding Lottie dependency to your project's build.gradle file found at /android/app/ (I added constraint layout dependency aswell).

   dependencies {
       ...
       implementation "com.airbnb.android:lottie:3.5.0"
       implementation "com.android.support.constraint:constraint-layout:2.0.4"
       ...
   }
   

2. In AndroidManifest.xml remove meta data tag with the name io.flutter.embedding.android.SplashScreenDrawable and replaceLaunchTheme under activity tag with NormalTheme so your file will look like the following:

   <manifest xmlns:android="http://schemas.android.com/apk/res/android"
         package="com.abedelazizshe.flutter_lottie_splash_app">
         <!-- io.flutter.app.FlutterApplication is an android.app.Application that calls FlutterMain.startInitialization(this); in its onCreate method. In most cases you can leave this as-is, but you if you want to provide additional functionality it is fine to subclass or reimplement FlutterApplication and put your custom class here. -->
         <application
             android:name="io.flutter.app.FlutterApplication"
             android:label="flutter_lottie_splash_app"
             android:icon="@mipmap/ic_launcher">
             <activity
                 android:name=".MainActivity"
                 android:launchMode="singleTop"
                 android:theme="@style/NormalTheme"
                android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
                 android:hardwareAccelerated="true"
                 android:windowSoftInputMode="adjustResize">
                 <!-- Specifies an Android theme to apply to this Activity as soon as the Android process has started. This theme is visible to the user while the Flutter UI initializes. After that, this theme continues to determine the Window background behind the Flutter UI. -->
                 <meta-data
                   android:name="io.flutter.embedding.android.NormalTheme"
                   android:resource="@style/NormalTheme"
                   />
                 <intent-filter>
                     <action android:name="android.intent.action.MAIN"/>
                     <category android:name="android.intent.category.LAUNCHER"/>
                 </intent-filter>
             </activity>
             <!-- Don't delete the meta-data below.
                  This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
             <meta-data
                 android:name="flutterEmbedding"
                 android:value="2" />
         </application>
   </manifest>
   

   You can remove LaunchTheme from /android/app/res/values/styles.xml asyou will not need it any more.

3. Create a raw directory under /android/app/res/values and copy the .json file, whether you created your own or downloaded a free sample from the link above. In this tutorial, it’s named splash_screen.json.

4. In order to use the .json file and display the animation view, we need to create a splash view class with its layout. Under /android/app/res, create a new directory called layout (if it does not exist) and then create a new resource file called splash_view.xml. Open the XML file and ensure it looks like the following:

   <?xml version="1.0" encoding="utf-8"?>
   <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:layout_width="match_parent"
       android:layout_height="match_parent">
   
       <com.airbnb.lottie.LottieAnimationView
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintStart_toStartOf="parent"
           app:layout_constraintTop_toTopOf="parent"
           app:lottie_autoPlay="true"
           app:lottie_rawRes="@raw/splash_screen"
           app:lottie_loop="false"
           app:lottie_speed="1.00" />
   
   </androidx.constraintlayout.widget.ConstraintLayout>
   

For this demo, I set the animation to auto play, with a speed of 1.0.And I don’t want it to loop. You can play with the different values asyou wish. The most important part is app:lottie_rawRes that indicateswe want to use the json file we added in raw directory. Now, we needto create the splash view class. You can do that by going to/android/app/src/main/kotlin/YOUR-PACKAGE-NAME/ and create a newkotlin class. Call it SplashView then ensure it looks like the following:

import android.content.Context
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import io.flutter.embedding.android.SplashScreen

class SplashView : SplashScreen {
    override fun createSplashView(context: Context, savedInstanceState: Bundle?): View? =
            LayoutInflater.from(context).inflate(R.layout.splash_view, null, false)

    override fun transitionToFlutter(onTransitionComplete: Runnable) {
        onTransitionComplete.run()
    }
}

As you can see, this view is inflatting splash_view layout. The finalstep is to let MainActivity know about our custom splash view.

5. Go to /android/app/src/main/kotlin/YOUR-PACKAGE-NAME/ and click on MainActivity.kt. FlutterActivity provides a method calledprovideSplashScreen and we just need to implement it as follows:

   import io.flutter.embedding.android.FlutterActivity
   import io.flutter.embedding.android.SplashScreen
   
   class MainActivity: FlutterActivity() {
       override fun provideSplashScreen(): SplashScreen? = SplashView()
   }
   

The project directory should look like this now:

That's all for Android. Just run the app and you should see the animated screen at app launch.