LimeLottie Lottie动画组件

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

🔧 插件依赖：lime-shared

⚠️ 注意事项：在uni-app鸿蒙模拟器上，较大的Lottie文件可能会导致卡死现象，真机未进行测试。

文档链接

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

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

安装方法

1. 在uni-app 中搜索并导入lime-lottie
2. 导入后可能需要重新编译项目
3. 在页面中使用l-lottie组件
4. 微信小程序和web需要安装依赖：

微信小程序

npm install lottie-miniprogram --save

WEB

npm install lottie-web --save

代码演示

基础用法

最简单的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 />

插件标签说明

标签名	说明
l-lottie	组件标签

Vue2使用说明

本插件使用了composition-api，如需在Vue2项目中使用，请按照官方教程配置。

关键配置代码（在main.js中添加）：

// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

API文档

Props 属性说明

属性名	说明	类型	默认值
src	动画资源路径	string	-
frames	动画数据（JSON格式）	Object	-
loop	是否循环播放	boolean	false
autoplay	是否自动播放	boolean	false
speed	播放速度	number	1
direction	播放方向（1为正向，-1为反向）	number	1
lStyle	自定义样式	string | object	-

Events 事件

事件名	说明	回调参数
loaded	组件挂载完成时触发，返回 loadAnimation 函数	loadAnimation: Function
ready	动画实例创建完成时触发，返回 LimeLottie 实例	lottie: LimeLottie
complete	动画播放完成时触发	-
error	动画加载或播放出错时触发	error: Error

组件方法（通过 ref 调用）

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

方法名	说明	参数	返回值
loadAnimation	加载动画并返回 LimeLottie 实例	url: string | Object	Promise<LimeLottie>
play	播放当前动画	-	-
pause	暂停当前动画	-	-
destroy	销毁当前动画实例	-	-

LimeLottie 实例方法

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

方法名	说明	参数
play	播放动画	-
stop	停止动画	-
pause	暂停动画	-
destroy	销毁动画实例	-
setSpeed	设置播放速度	speed: number
setDirection	设置播放方向	direction: AnimationDirection
goToAndPlay	跳转到指定位置并播放	value: number, isFrame?: boolean
goToAndStop	跳转到指定位置并停止	value: number, isFrame?: boolean
addEventListener	添加事件监听	name: AnimationEventName, callback: AnimationEventCallback
removeEventListener	移除事件监听	name: AnimationEventName, callback: AnimationEventCallback

AnimationEventName 可选值：

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

AnimationDirection 可选值：

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

支持与赞赏

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

支付宝赞助	微信赞助

源代码

组件源码