创新互联小程序教程：微信小程序工具库类·lottie

lottie-miniprogram

lottie 动画库适配小程序的版本。

在西塞山等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供成都做网站、网站建设 网站设计制作按需网站建设,公司网站建设,企业网站建设,成都品牌网站建设,营销型网站,成都外贸网站建设,西塞山网站建设费用合理。

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

依赖小程序基础库版本 >= 2.8.0 的环境

使用

可参考该代码片段：https://developers.weixin.qq.com/s/2TYvm9mJ75bF。大致步骤如下：

1. 通过 npm 安装：

npm install --save lottie-miniprogram

1. 传入 canvas 对象用于适配

import lottie from 'lottie-miniprogram'

Page({
  onReady() {
    wx.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 实现，由于还有些小问题没有正式开放，但目前用在此处暂无发现问题。
• 由于小程序本身不支持动态执行脚本，因此 lottie 的 expression 功能也是不支持的。

当前名称：创新互联小程序教程：微信小程序工具库类·lottie
标题路径：http://www.hantingmc.com/qtweb/news17/481867.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联