更新记录

0.0.1（2025-10-09）

✨ 首次发布

平台兼容性

uni-app(4.73)

uni-app x(4.72)

lime-lottie Lottie动画组件

一款Lottie动画组件，提供丰富的API接口，可以满足各种动画播放需求，兼容WEB、微信小程序、安卓、IOS、鸿蒙。

插件依赖：lime-shared

文档链接

📚 组件详细文档请访问以下站点：

• Lottie组件文档 - 站点1
• Lottie组件文档 - 站点2
• Lottie组件文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-lottie
2. 导入后可能需要重新编译项目
3. 在页面中使用l-lottie组件

代码演示

基础用法

最简单的Lottie动画组件用法，只需要设置动画路径即可。

<l-lottie l-style="height:200px" src="https://example.com/animation.json"></l-lottie>

通过 ref 调用组件方法

通过 ref 可以直接调用组件暴露的方法来控制动画。

<view style="height:200px">
    <l-lottie ref="lottieRef" src="https://example.com/animation.json"></l-lottie>
</view>
<button @click="play">播放</button>
<button @click="pause">暂停</button>
<button @click="destroy">销毁</button>

import type { LimeLottie } from '@/uni_modules/lime-lottie';
const lottieRef = ref<LLottieComponentPublicInstance | null>(null);

const play = () => {
  lottieRef.value?.play();
};

const pause = () => {
  lottieRef.value?.pause();
};

const destroy = () => {
  lottieRef.value?.destroy();
};

动态加载动画

使用 loadAnimation 方法动态加载动画并获取 LimeLottie 实例。

<view style="height:200px">
    <l-lottie ref="lottieRef"></l-lottie>
</view>
<button @click="loadAndPlay">加载并播放</button>

import type { LimeLottie } from '@/uni_modules/lime-lottie';
const lottieRef = ref<LLottieComponentPublicInstance | null>(null);

const loadAndPlay = async () => {
  if (lottieRef.value == null) return;

  // 动态加载动画
  const lottie = await lottieRef.value.loadAnimation('https://example.com/animation.json');

  // 使用 LimeLottie 实例的方法
  lottie.setSpeed(2);
  lottie.play();
};

通过 loaded 事件动态加载

通过 loaded 事件获取 loadAnimation 函数，实现动态加载。

<view style="height:200px">
    <l-lottie @loaded="onLoaded"></l-lottie>
</view>
<button @click="loadAnimation1">加载动画1</button>
<button @click="loadAnimation2">加载动画2</button>

import type { LimeLottie } from '@/uni_modules/lime-lottie';
// Object 在uniappx是UTSJSONObject
type LoadAnimationFn = (url: string | UTSJSONObject) => Promise<LimeLottie>;

const loadAnimationFn = ref<LoadAnimationFn | null>(null);

const onLoaded = (loadAnimation: LoadAnimationFn) => {
  loadAnimationFn.value = loadAnimation;
};

const loadAnimation1 = async () => {
  if (!loadAnimationFn.value) return;
  const lottie = await loadAnimationFn.value('https://example.com/animation1.json');
  lottie.play();
};

const loadAnimation2 = async () => {
  if (!loadAnimationFn.value) return;
  const lottie = await loadAnimationFn.value('https://example.com/animation2.json');
  lottie.play();
};

自定义动画属性

设置动画的循环、自动播放和速度。

<template>
  <l-lottie 
    src="https://example.com/animation.json" 
    :loop="true" 
    :autoplay="true"
    :speed="1.5"
  ></l-lottie>
</template>

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-lottie/components/l-lottie -->
<l-lottie />

插件标签说明

API文档

Props 属性说明

Events 事件

组件方法（通过 ref 调用）

通过 ref 可以调用组件实例的以下方法：

LimeLottie 实例方法

通过 loadAnimation 方法或 ready 事件可以获取 LimeLottie 实例，实例提供以下方法：

AnimationEventName 可选值：

• enterFrame - 每帧触发(未实现)
• loopComplete - 循环完成时触发
• complete - 动画完成时触发
• segmentStart - 片段开始时触发
• destroy - 销毁时触发

AnimationDirection 可选值：

• 1 - 正向播放
• -1 - 反向播放

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助