更新记录

1.0.7(2019-12-04)

init


平台兼容性

lottie-miniprogram

lottie 动画库适配微信小程序的版本,

lottie 的相关介绍与动画生成方法等请参考 官方说明

目前在uni-app中仅支持微信小程序,且依赖小程序基础库版本 >= 2.8.0 的环境

插件使用

  1. HBuilderX 引入

下载或导入示例获取插件

    import lottie from '@/common/lottie-miniprogram.js'
  1. npm 安装
  • 如果是 HBuilderX 创建的工程,需要先执行 npm init

    npm init -y   // 初始化项目
  • npm 安装插件

    npm install --save lottie-miniprogram
  1. 传入 canvas 对象用于适配
<canvas id="canvas" type="2d" style="display: inline-block; width: 300px; height: 300px;"></canvas>
    import lottie from '@/common/lottie-miniprogram.js'
    //  import lottie from 'lottie-miniprogram'
    export default {
        onReady() {
            uni.createSelectorQuery().select('#canvas').node(res => {
              const canvas = res.node
              lottie.setup(canvas)
            }).exec()
        }
    }
  1. 使用 lottie 接口
    lottie.setup(canvas)
    lottie.loadAnimation({
      ...
    })

接口

目前提供两个接口:

lottie.setup(canvas)

需要在任何 lottie 接口调用之前调用,传入 canvas 对象

lottie.loadAnimation(options)

与原来的 loadAnimation 有些不同,支持的参数有:

  • loop
  • autoplay
  • animationData
  • path (只支持网络地址)
  • rendererSettings.context (必填)

说明

  • 本项目以 npm 的方式依赖原 lottie-web 项目,若原项目有新版本,可直接改变依赖的版本号。
  • 本项目依赖小程序基础库 2.8.0 里性能更好的 canvas 实现,由于还有些小问题没有正式开放,但目前用在此处暂无发现问题。
  • 由于小程序本身不支持动态执行脚本,因此 lottieexpression 功能也是不支持的。

隐私、权限声明

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

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

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

许可协议

MIT协议

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