完整启动画面的 Lottie 动画不占用全屏

Posted 2023-04-18

【中文标题】完整启动画面的 Lottie 动画不占用全屏

【英文标题】：Lottie animation for full splash screen not taking full screen

【发布时间】：2020-12-24 21:30:36

【问题描述】：

我必须在 android 中使用 lottie 动画来制作启动画面。我已经使用 match parent 作为宽度和高度。但它向我展示了屏幕边缘的一些填充，如附图所示。如果我使用 scaletype 作为 fitXY 那么它的图像在某些设备上被拉伸。如何为所有设备分辨率使用 lottie 动画文件，或者我需要询问我们的设计师更改文件吗？

<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_
android:layout_
android:background="@color/retention_bg_welcome_color">

<com.airbnb.lottie.LottieAnimationView
    android:layout_
    android:layout_
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:lottie_autoPlay="true"
    app:lottie_fileName="test_lottie.json"
    android:adjustViewBounds="true"
    app:lottie_loop="true"
    app:lottie_speed="0.8" />
</androidx.constraintlayout.widget.ConstraintLayout>

【问题讨论】：

你为什么放 android:adjustViewBounds="true" ？

请尝试使用 lottie 视图而不是 layout_ 来放置 layout_ 和 layout_height。它应该强制约束布局计算正确的大小

@LenaBru 之前就是这样。高度/宽度均为 0dp。我改变了这些只是为了检查。有人提到在某处添加 android:adjustViewBounds="true"。仍然在边缘填充

您肯定填充来自 lottie 视图而不是 lottie 视图的父级？还是父母的父母？

是的，我确信当我尝试放置一些虚拟视图并为其添加颜色时。我在想我们是否需要对 json 文件进行一些更改。单个 json 文件会支持所有屏幕分辨率吗？

【参考方案1】：

android:scaleType="centerCrop" 为我解决了这个问题：

完整的 XML：

<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/home_splash"
android:layout_
android:layout_
android:fitsSystemWindows="true"
android:gravity="center_horizontal">

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/animation_view"
    android:layout_
    android:layout_
    android:duplicateParentState="true"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:lottie_autoPlay="true"
    app:lottie_fileName="test.json"
    app:lottie_loop="false"
    android:scaleType="centerCrop"
    tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout>

【讨论】：

效果很好。谢谢。

【参考方案2】：

  /**
   * Disable the extraScale mode in @link #draw(Canvas) function when scaleType is FitXY. It doesn't affect the rendering with other scaleTypes.
   *
   * <p>When there are 2 animation layout side by side, the default extra scale mode might leave 1 pixel not drawn between 2 animation, and
   * disabling the extraScale mode can fix this problem</p>
   *
   * <b>Attention:</b> Disable the extra scale mode can downgrade the performance and may lead to larger memory footprint. Please only disable this
   * mode when using animation with a reasonable dimension (smaller than screen size).
   *
   * @see LottieDrawable#drawWithNewAspectRatio(Canvas)
   */
  public void disableExtraScaleModeInFitXY() 
    lottieDrawable.disableExtraScaleModeInFitXY();
  

【讨论】：

为此我需要使用 scaleType 作为 fitXY。然后动画可能会在更高分辨率的设备上显示为拉伸。

【参考方案3】：

在你的活动中使用它

requestWindowFeature(Window.FEATURE_NO_TITLE);
    getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
        WindowManager.LayoutParams.FLAG_FULLSCREEN);

【讨论】：

感谢您的回复。但这对我不起作用。

【参考方案4】：

将android:scaleType属性添加到com.airbnb.lottie.LottieAnimationView

<com.airbnb.lottie.LottieAnimationView
  android:id="@+id/lottieView"
  android:layout_
  android:layout_
  android:scaleType="centerCrop" // fitXY or centerCrop will resolve the aspect issue
  app:lottie_autoPlay="true"
  app:lottie_loop="false"
  app:lottie_rawRes="@raw/splash" />

【讨论】：

这只是重复 Carsten 5 月 26 日的回答。