矩形 LottieAnimation 显示为带有填充空间的正方形答案

【问题标题】：Rectangular LottieAnimation is displayed as a square with padding spaces矩形 LottieAnimation 显示为带有填充空间的正方形
【发布时间】：2022-10-06 17:14:58
【问题描述】：

我正在使用 jetpack compose 和 LottieAnimationView 来显示我的动画，它有长方形形状（参见image 中的灰色框）。但是，动画显示为在 Y 轴/高度上生成大量空白填充空间的正方形（参见image 中的红色矩形）。

如果我硬编码一个高度值 (.height(50.dp))，我可以删除填充空间，但这不是可取的。

如何仅显示动画本身并避免将其显示为正方形的这些空白填充空间？我想把它保持在一个矩形。

动画本身没有任何问题，因为它看起来很好预览它。

这是代码的sn-p：

            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(horizontal = dimensionResource(10dp),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                val composition by rememberLottieComposition(
                    LottieCompositionSpec.RawRes(R.raw.anim)
                )
                Card {
                    LottieAnimation(
                        modifier = Modifier.wrapContentHeight(),
                        composition = composition,
                        iterations = LottieConstants.IterateForever,
                    )
                }

【问题讨论】：

你应该发布你的 R.raw.anim
整个动画文件？宽度是：750，高度：400 如果有帮助的话。

标签： android kotlin android-jetpack-compose lottie

【解决方案1】：

我找到了一个解决方案，使用纵横比来计算宽度和高度：

        val width = composition?.bounds?.width()?.toFloat() ?: 1F
        val height = composition?.bounds?.height()?.toFloat() ?: 1F
        LottieAnimation(
            modifier = Modifier
                .aspectRatio(width / height),
            composition = composition,
            iterations = LottieConstants.IterateForever,
        )

【讨论】：