更新记录

0.1.2(2023-12-08) 下载此版本

  1. 修复微信小程序无法播放的问题
  2. 更新插件小程序支持范围

0.1.0(2023-11-24) 下载此版本

基础功能


平台兼容性

uni-app

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
× - - -
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
- - - - - - -

其他

多语言 暗黑模式 宽屏模式
× ×

<zui-animator />

Lottie 动画图标

Lottie 是一个由 Airbnb 开源的移动端动画解决方案,在项目中引入 lottie 将给应用带来不一样的生命力

快速开始

0. 安装依赖

复制代码npm install lottie-web
# 或者
yarn add lottie-web

1. 引入组件, 并指定动画数据

复制代码<zui-animator :frames="lottieJsonData" />

如果需要在微信小程序中运行,请先安装 lottie-miniprogram 依赖

参数

prop: string

width: number | string

动画宽度

默认: 48

height: number | string

动画高度

默认: 48

frames: object

动画帧数据, JSON

loop: boolean

循环播放

默认: true

autoplay: boolean

自动播放

默认: true

speed: number

播放速度

默认: 1

方法

支持 lottie-web 标准方法。

  • play()
  • stop()
  • pause()
  • setLocationHref(locationHref)
  • setSpeed(speed)
  • gotoAndStop(value, isFrame)
  • gotoAndPlay(value, isFrame)
  • setDirection(direction)
  • playSegments(segments, forceFlag)
  • setSubframe(flag)

具体使用说明参照:https://www.npmjs.com/package/lottie-web#usage

🍓 支持

如果组件对您有帮助,请不吝打赏。肥宅快乐水🥤是创作动力!🥤🥤🥤

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议
iis***@163.com

2025-03-10

不支持钉钉你乱勾什么?浪费人时间,评论区全是运行异常你倒是勾了个全

543***@qq.com

2024-11-30

QQ小程序无法运行啊,报Unhandled promise rejection TypeError: Cannot read properties of undefined (reading '$el'),这个是H5中的方法吧

redstoone

2024-06-05

web端可以显示,android手机端不显示

dci797

2024-04-07

web端可以查看,app不显示

738***@qq.com

2024-04-01

引入之后没有任何效果,是空白

mjy***@163.com

2024-01-24

这个不支持app使用吗? android手机端运行播放不了呢

HelloWord1955

2024-01-06

并不支持SVGA

Gozi 2024-01-06

需要用工具转成lottie格式

122***@qq.com

2023-12-08

小程序会导致这个报错 H5能运行 Cannot read property '$el' of undefined

Gozi 2023-12-08

已支持在小程序中播放, 需要先安装依赖: lottie-miniprogram

Gozi

2023-11-24

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问