Lottie动画有很大的填充。如何通过去除填充来调整动画大小以适应视图。

Question

我有一个Lottie动画文件，但是当我将它放入视图中时，由于文件内部填充的原因，它变得太小了。因此，我已经在xml中使用了lottie_scale属性，并且根据一些资源，如这个，也使用了LottieComposition，但都没有成功。

是否有任何解决方案？

- Ali Has

---

我花了很长时间搜索这样的东西，但我只得到了另一个动画或自己制作的建议。 - Steve Moretz

Answer 1

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

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

XML:

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

以编程方式：

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

- Ali Has

---

2.5 对我有效。 - Tehleel Mir

或者，你可以尝试使用我的Lottie动画边框去除应用程序来去除填充，并在适当的比例上使用它。你可以在https://dealfonso.github.io/simplelottieplayer/lottietrimmer.html找到它。 - Carlos

Answer 2

Flutter

使用OverflowBox小部件进行尝试

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

- Mod

---

这对我有效。在父SizedBox中给出小部件所需的高度，然后在子OverflowBox中调整lottie的高度。还可以尝试在Lottie.asset小部件中使用fit参数。BoxFit.fill对我完美地起作用。 - Deepak Joshi

我看到你在Flutter中使用Lottie动画。我需要去掉边距才能正确放置动画。我分享了我是如何在这个答案中做到的：[https://dev59.com/XFUK5IYBdhLWcg3wmxCw#75607662] - Carlos

Answer 3

编辑：
由于我之前提供的解决方案并不适用于所有遇到这个问题的人，所以我决定修改我的答案，采用更普遍（经过尝试和测试）的方法来解决它，即使用缩放：

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

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

- Edgar

---

这对我不起作用，但是答案是android:scaleX="5" android:scaleY="5"它有效。 - dicarlomagnus

Answer 4

在Jetpack Compose中

 LottieAnimation(
               composition = composition,
               iterations = LottieConstants.IterateForever,
               modifier = Modifier
               .requiredHeight(30.dp)
               .requiredWidth(30.dp).scale(2f,2f),
 )

- Mehrdad

Answer 5

对于React Native，应用resizeMode: "center"对我来说解决了这个问题。

 <Lottie
      source={require('../../../assets/lottie/set-lock.json')}
      autoPlay
      loop
      autoSize
      resizeMode='center' // this fixes lottie padding
      style={{width: 258}}
    />

- Waqas Ali

Answer 6

我曾经遇到同样的问题，但是找不到一个好的答案。为了让它正常工作，我使用了负边距。虽然不太美观，但可以作为一个快速解决方案。

  <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%',
  },
}

- Satoe Sakuma

---

OP正在使用Android本地开发，而不是React Native。 - not my real name