更新记录

0.1.2(2023-12-08)

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

0.1.0(2023-11-24)

基础功能


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
×

<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协议

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