Lottie动画填充

Question

我有一个问题想问一下有使用lottie json文件经验的人。由于我对lottie不是很熟悉，所以可能会缺少一些显而易见的知识。当我将我的动画渲染到视图中时，动画对象会被放置在视图的中心位置，如下图所示：

 _____________________________________________
|                                             |
|        [animated object]                    |
|_____________________________________________|

有没有一种方法可以修改json文件，使动画对象适应整个视图，像这样：

     _____________________________________________
    |                                             |
    | [a n i m a t e d         o b j e c t s     ]|
    |_____________________________________________|

我尝试在xml中设置视图如下：

android:scaleType="centerCrop"
android:adjustViewBounds="true"

但它没有起作用
我还尝试设置更大的比例：

app:lottie_scale="2" 

但是我没有成功。感谢您的时间！

- Madalin

Answer 1

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

      <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animationView"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:scaleType="fitXY"
        app:lottie_autoPlay="true"
        android:padding="10dp"
        app:lottie_loop="true"
        app:lottie_rawRes="@raw/your_json_file_here"/></RelativeLayout>

试试这段代码，它是有效的。

- Shiva Kanumala

Answer 2

把它当作其他视图来对待，然后使用setPadding进行编程。

LottieAnimationView btnHeart;

btnHeart.setPadding(-150, -150, -150, -150);

- Stha Sandes

Answer 3

我知道这是一个老问题，但我遇到了类似的问题：许多Lottie动画有很大的边距，很难正确放置它们。此外，边距的空间对于应用程序来说是一种浪费（例如，我无法将元素放在动画对象附近，因为边距是动画的一部分）。

我知道使用Adobe After Effects和其他工具编辑文件是可能的，但我不想为了几个Lottie动画而支付许可证费用以去除边距。

我在LottieFiles规范中进行了一些调查，并通过计算动画中每个帧的边界框来解决了这个问题。一旦为整个动画计算出边界框，就可以使用预合成层更新Lottie动画，该层被调整以确保在动画中显示的部分是对应于边界框的窗口。使用此方法不会修改形状，仍然可以在其他软件（如Adobe After Effects）中编辑动画。

预合成层是一个 Lottie 图层，它可以从资源列表中渲染对象。 资源列表包含其他可以作为独立动画的对象。 关键是预合成层可以进行平移、缩放等操作。

我创建了一个工具来裁剪 Lottie 动画的边距，并允许您下载它以在您的网站或应用程序中使用。该工具可在https://dealfonso.github.io/simplelottieplayer/lottietrimmer.html获取。

该工具将创建动画的现有图层放入一个资源对象中：

animation["assets"].push({
  "id": "legacy-animation",
  "layers": animation["layers"]
})

然后将动画设置为包含一个新的预合成层，该层引用先前的动画：

animation["layers"] = [
{
    "ty": 0,  // This is the precomposition layer type
    "nm": "Precomposition Layer",
    "refId": "legacy-animation",  // Refers to the asset created before
    "ks": {
      // The next parameter translates the animation to put the top-left corner of the window
      "p": { "a": 0, "k": [ -boundingBoxMinX, -boundingBoxMinY ]},
      /** other settings that can be used to manipulate the animation but are not needed for our purpose and are set to the default according to the specification of the Lottie files*/
      ...
    },
  }
];
// And now adjust the size of the bounding box
animation["w"] = boundingBoxMaxX - boundingBoxMinX;
animation["h"] = boundingBoxMaxY - boundingBoxMinY;

整个实现可在https://github.com/dealfonso/simplelottieplayer找到。

- Carlos

Answer 4

使用 "LottieDrawable" 和 "LottieComposition"，可以轻松地设置比例。以下代码对我来说是100％有效的。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">

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

</LinearLayout>

以及Java方面

LottieAnimationView animationView = findViewById(R.id.animation_view);

LottieDrawable drawable = new LottieDrawable();

    LottieComposition.Factory.fromAssetFileName(this, "anim_1.json",(composition -> {
        drawable.setComposition(composition);
        drawable.playAnimation();
        drawable.setScale(3);
        animationView.setImageDrawable(drawable);

    }));

- Mahamudul Hasan

---

你使用的是哪个版本？这对我似乎不起作用。 - Android_K.Doe

我也是，没有setScale。我正在使用com.airbnb.android:lottie:5.1.0。 - thecr0w