[英]Lottie animation not showing at all
My import:我的进口:
implementation "com.airbnb.android:lottie:3.2.2"
In my splash_layout:在我的 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"/>
In SplashActivity:在 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();
(...)
}
My image folder is in src/main/res/assets/demo.我的图像文件夹在 src/main/res/assets/demo 中。 The logo_android.json file is in src/main/assets
logo_android.json 文件位于 src/main/assets
This way, the animation does not show at all.这样,animation 根本不显示。 Not a single image is displayed.
没有显示单个图像。 How can I get the animation working?
如何让 animation 工作?
In case it matters, the JSON file looks something like this:如果它很重要,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},(...)
Solved it.解决了。
In case it can help someone, you have to put the images in src/main/assets/images如果它可以帮助某人,您必须将图像放在 src/main/assets/images
For anyone using Expo SDK V44 (React Native V0.64.3), lottie-react-native V5.0.1 and lottie-ios V3.2.3.对于使用 Expo SDK V44(React Native V0.64.3)、lottie-react-native V5.0.1 和 lottie-ios V3.2.3 的任何人。 What I have found that works is to call the
.play()
method on the ref from the LottieView
, on mount of the component.我发现有效的是在挂载组件时从
LottieView
的 ref 上调用.play()
方法。 I referenced this from the official Expo Lottie documentation: https://docs.expo.dev/versions/latest/sdk/lottie/ .我从官方 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 }}
/>
);
Hope I managed to help someone!希望我能帮助别人!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.