Lottie 动画有很大的填充。如何通过删除填充来调整动画到视图的大小答案

【问题标题】：Lottie animation has large padding. How to resize the animation to the view, by removing the paddingLottie 动画有很大的填充。如何通过删除填充来调整动画到视图的大小
【发布时间】：2019-02-14 17:32:58
【问题描述】：

我有一个 lottie 动画文件，当我将它放在视图中时，由于文件的内部填充，它变得太小了。所以我在 xml 中使用了 lottie_scale 属性，并且还使用了一些资源中提到的 LottieComposition，例如this，但没有一个成功。

有什么解决办法吗？

【问题讨论】：

我花了很长时间寻找这样的东西，我得到的只是获得另一个动画或自己制作。

标签： android android-animation lottie

【解决方案1】：

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

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

XML：

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

以编程方式：

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

【讨论】：

【解决方案2】：

尝试使用OverflowBox 小部件

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

【讨论】：

【解决方案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"/>

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

【讨论】：

这对我不起作用，但回答 android:scaleX="5" android:scaleY="5" 它正在工作

【解决方案4】：

我遇到了同样的问题，找不到很好的答案，但为了让它发挥作用，我使用了负边距。这很丑陋，但可以作为快速修复。

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

【讨论】：

OP 使用的是 Android 原生开发，而不是 React Native。