在uni-app中使用lottie-web来展示Lottie动画

 效果图

1. 安装并引入lottie-web库

首先，你需要在uni-app项目中安装lottie-web库。你可以通过npm或yarn进行安装：

npm install lottie-web

或者

yarn add lottie-web

2. 准备Lottie动画的JSON文件并添加到项目中

将Lottie动画的JSON文件添加到你的uni-app项目的静态资源目录下，比如：

3. 使用lottie-web的API来加载并播放Lottie动画

在uni-app中创建一个容器来承载Lottie动画，给容器设定一个id，然后将Lottie动画的JSON文件路径传递给lottie-web的loadAnimation方法。以下是一个示例代码：

<template><view class="content"><view id="lottieContainer" style="width: 100vw; height: 100vh; position: absolute;"></view><image class="logo" src="/static/logo.png"></image><view class="text-area"><text class="title">{{title}}</text></view></view>
</template><script>import Lottie from 'lottie-web'export default {data() {return {title: 'uni-app'}},mounted() {Lottie.loadAnimation({container: document.getElementById('lottieContainer'), // 通过设置的“id”获取到动画的容器renderer: 'svg',loop: true, // 是否循环autoplay: true, // 是否自动播放path: '/static/lottie/success-animation.json'});},}
</script>