Lottie 动画根本没有显示答案

【问题标题】：Lottie animation not showing at allLottie 动画根本没有显示
【发布时间】：2019-11-20 12:05:32
【问题描述】：

我的导入：

implementation "com.airbnb.android:lottie:3.2.2"

在我的 splash_layout 中：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">

<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/splash"/>

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/animation_view"
    android:layout_width="100dp"
    android:layout_height="100dp"
    app:lottie_fileName="logo_android.json"
    app:lottie_loop="true"
    app:lottie_autoPlay="true"
    app:lottie_imageAssetsFolder="demo"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"/>

在 SplashActivity 中：

private LottieAnimationView animationView;
(...)
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.splash_layout);
    animationView=findViewById(R.id.animation_view);
    animationView.playAnimation();
(...)
}

我的图片文件夹在 src/main/res/assets/demo。 logo_android.json 文件位于 src/main/assets

这样，动画根本不显示。没有显示单个图像。如何让动画正常工作？

如果重要的话，JSON 文件看起来像这样：

{"v":"5.5.8","fr":25,"ip":0,"op":400,"w":800,"h":400,"nm":"logo_android","ddd":0,"assets":[{"id":"image_0","w":396,"h":51,"u":"images/","p":"img_0.png","e":0},{"id":"image_1","w":122,"h":215,"u":"images/","p":"img_1.png","e":0},(...)

【问题讨论】：

如果你已经在xml中指定了，你就不需要从代码中调用它。
我在代码中没有它，但由于它不起作用，我将它添加到代码中尝试，但也没有用...
不会是您的 json 文件中的问题吗？请尝试使用 LottieFiles.com 的一些内容
乐天动画网站上正在播放动画吗？如果是，请尝试包装内容的高度和宽度
已经尝试过包装内容

标签： android lottie

【解决方案1】：

解决了。

如果它可以帮助某人，您必须将图像放在 src/main/assets/images 中

【讨论】：

【解决方案2】：

适用于使用 Expo SDK V44 (React Native V0.64.3)、lottie-react-native V5.0.1 和 lottie-ios V3.2.3 的任何人。我发现有效的是在安装组件时从LottieView 的引用上调用.play() 方法。我从 Expo Lottie 官方文档中引用了这一点：https://docs.expo.dev/versions/latest/sdk/lottie/。

const animationRef = useRef<LottieView | null>(); // The <> is for TypeScript, but can be removed for JavaScript

  useEffect(() => {
    animationRef.current?.play();
  }, []);

  return (
    <LottieView
      ref={(animation) => {
        animationRef.current = animation;
      }}
      source={require("../path_to_animation_folder)}
      autoPlay
      loop
      style={{ width, height }}
    />
  );

希望我能帮助到别人！

【讨论】：

感谢您帮助我，与 expo 不同，您的示例使用了功能组件。
很高兴我能帮上忙！

【解决方案3】：

设法让它工作：

if(lottieTest.getFrame() == lottieTest.getMaxFrame()) {
   lottieTest.setFrame(1);
}

请参考this。

【讨论】：