Lottie 动画具有较大的填充。如何通过删除填充将动画调整为视图

Question

我有一个 lottie 动画文件，当我将它放在视图中时，由于文件的内部填充，它变得太小了。因此，我在 xml 中使用了 lottie_scale 属性，并且在等资源中也使用了 LottieComposition，但 none 是成功的。

有什么解决办法吗？

Answer 1

我遇到了同样的问题，找不到很好的答案，但为了让它正常工作，我使用了负边距。它很难看，但可以作为快速修复。

  <LottieView
    style={styles.checkAnimation}
    source={require('<path to json>')}
    autoPlay
    loop={false}
    speed={2}
    autoSize
    resizeMode="cover"
  />

const styles = {
  checkAnimation: {
    position: 'absolute',
    width: '150%',
    height: '115%',
    marginLeft: '-17%',
    marginTop: '-7%',
  },
}

Answer 2

编辑：
由于我之前提供的解决方案并不适用于所有遇到该问题的人，因此我决定将我的答案更改为更通用（经过试验和测试）的解决方法，即使用 scale:

<com.airbnb.lottie.LottieAnimationView
            android:id="@+id/my_animation"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:scaleX="5"
            android:scaleY="5"
            app:lottie_fileName="animation.json"
            app:lottie_autoPlay="false"/>

这里的android:scaleX="5"是关键。

旧答案

我最近遇到了同样的问题，我求助于使用负填充，这增加了视图内动画项目的大小

<com.airbnb.lottie.LottieAnimationView
            android:id="@+id/my_animation"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:padding="-10dp"
            app:lottie_fileName="animation.json"
            app:lottie_autoPlay="false"/>

增加或减少填充值以获得所需的动画大小。

Answer 3

我认为现在有两个“半”解决方案：

在 Adobe After Effects 上安装 Bodymovin，然后导入动画并将其比例设置为例如500%.
不是通过 Lottie 比例缩放 Lottie 动画视图，而是通过使用 ScaleX、ScaleY：

XML:

android:scaleX="5"
android:scaleY="5"

以编程方式：

view.setScaleX(5f);
view.setScaleY(5f);

Answer 4

尝试使用 OverflowBox 小部件

SizedBox(
   height: 120,
   child: OverflowBox(
    minHeight: 170,
    maxHeight: 170,
    child: Lottie.asset('assets/json/box.json'),
  ),
),

Lottie 动画具有较大的填充。如何通过删除填充将动画调整为视图

Lottie animation has large padding. How to resize the animation to the view, by removing the padding

android

android-animation

lottie

旧答案