json Lottie动画填充

unftdfkk  于 2023-03-04  发布在  其他
关注(0)|答案(4)|浏览(175)

我有一个问题想问那些有使用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"

但我没有成功谢谢你抽出时间!

tuwxkamq

tuwxkamq1#

<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>

试试这个代码,很管用

fhity93d

fhity93d2#

只需像对待其他视图一样对待它,并以编程方式使用setPadding。

LottieAnimationView btnHeart;

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

gstyhher3#

使用“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);

    }));
vof42yt1

vof42yt14#

我知道这是一个老问题,但我也面临过类似的问题:许多Lottie动画都有很大的边距,很难正确放置它们。而且,边距的空间对应用程序来说是一种浪费(Eidogg,我不能在动画对象附近放置元素,因为边距是动画的一部分)。
我知道编辑文件使用Adobe后效应和其他工具是可能的,但我不想支付许可证,以消除利润为几个洛蒂动画。
我在specification of LottieFiles中做了一些调查,通过计算动画中每一帧的边界框,解决了这个问题。一旦计算了整个动画的边界框,就使用预合成层更新Lottie动画,其被调整以确保动画中示出的部分是对应于边界框的窗口。使用此方法不会修改形状,并且仍然可以在其他软件(如Adobe After Effects)中编辑动画。
预合成层是渲染资源列表中对象的Lottie层,资源列表中包含其他对象,这些对象可以是自包含的动画,关键是预合成层可以进行平移、缩放等操作。
我创建了一个工具,可以修剪Lottie动画的边距,并允许您下载它以在Web或应用程序中使用。
该工具将创建动画的现有层放入资源对象:

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上提供

相关问题