如何在微信小程序里使用Lottie动画库

先看效果图：

前言：

微信小程序的lottie动画库是按照lottie-web动画库改造而来。参考lottie-web：https://github.com/airbnb/lottie-web，以及官方文档：http://airbnb.io/lottie/#/

目前我们要用到的是http://airbnb.io/lottie/#/web

调用lottie.loadAnimation（）启动动画。它采用以下形式将对象作为唯一参数：

animationData：具有导出的动画数据的对象。
path：动画对象的相对路径。（animationData和path是互斥的）
loop：true/false
autoplay：true / false，准备就绪后将立即开始播放
name：动画名称，以备将来参考
renderer：‘svg’/‘canvas’/'html’设置渲染器
container：在其上呈现动画的dom元素

它返回您可以通过播放，暂停，setSpeed等控制的动画实例。

lottie.loadAnimation({container: element, // the dom element that will contain the animationrenderer: 'svg',loop: true,autoplay: true,path: 'data.json' // the path to the animation json
});

以上为web端的使用场景，那么我们如何在小程序中使用呢？

通过 npm 安装：

npm install --save lottie-miniprogram
npm init

传入 canvas 对象用于适配

<view style="text-align: center;"><canvas id="lottie_demo" type="2d" style="display: inline-block; width: 300px; height: 300px;" /><button bindtap="init" style="width: 300px;">初始化</button><button bindtap="play" style="width: 300px;">播放</button><button bindtap="pause" style="width: 300px;">暂停</button>
</view>

使用lottie接口。

const app = getApp()
import lottie from 'lottie-miniprogram'Page({data: {},// 初始化加载动画init() {if (this.inited) {return}wx.createSelectorQuery().selectAll('#lottie_demo').node(res => {const canvas = res[0].nodeconst context = canvas.getContext('2d')canvas.width = 300canvas.height = 300lottie.setup(canvas)this.ani = lottie.loadAnimation({loop: true,autoplay: true,animationData: require('../json/data.js'),rendererSettings: {context,},})this.inited = true}).exec()},play() {this.ani.play()},pause() {this.ani.pause()},
})

目前微信小程序只提供了两个接口。

lottie.setup(canvas)

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

lottie.loadAnimation(options)**

与原来的 loadAnimation 有些不同，支持的参数有：

*   loop // 循环播放
*   autoplay //自动播放
*   animationData // 动画数据
*   path //（只支持网络地址）
*   rendererSettings.context //（必填）

json/data.js为找设计小姐姐要的Lottie动画json数据。我们这边需要将该json改为js。
即开头需要加上module.exports=，当然Lottie官方也收集了很多的动画资源：https://lottiefiles.com/

module.exports={xxxxxx}

代码片段如下：

https://developers.weixin.qq.com/s/Ah3fGQmz7VjE

如何在微信小程序里使用Lottie动画库相关推荐

微信小程序里的block
1 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性. 2 因为wx:if是一个控制属性,需要将它添加到一个标签上.如果要一次性判断多个组件标签,可以使用标签将多个组件包 ...
微信小程序上传图片到html,在微信小程序里上传图片
在微信小程序里上传图片. 上传图片 JS//index.js Page({ data:{ tempFilePaths:[], uploadLinks:[], }, uploadImg() { var ...
页面加载成功后调用_在微信小程序里实现图片预加载组件
网页中的图片预加载我们知道在 Web 页面中实现图片的预加载其实很简单,通常的做法是在 JS 中使用 Image 对象即可,代码大致如下 var image = new Image() image. ...
mfc cimage加载显示图片_在微信小程序里实现图片预加载组件
网页中的图片预加载我们知道在 Web 页面中实现图片的预加载其实很简单,通常的做法是在 JS 中使用 Image 对象即可,代码大致如下 var image = new Image() image. ...
记一次在Taro开发的微信小程序中使用lottie动画的经验
前景提要最近在做公司项目的时候,看到移动端开发用的小图标有动态效果,非常好玩了解到是使用lottie进行实现的,这个东西以前有看到过对应的插件库,但是一直没有时间做研究,趁着这个五一就抽一天时间,去 ...
微信小程序里使用weui的正确打开方式
自己写微信小程序,发现有weui这样的东西.第一次使用,网上搜到到用法是这样的: 到https://weui.io/#input查看例子,右键查看源码,然后再对照界面和源码使用. 但是这样看到的源码是 ...
在微信小程序里引入Vant Weapp组件库详细步骤
1. 新建一个文件夹. 2. 使用微信开发者工具选择一个模板(这里以javaScript 基础模板为例) 选择完模板之后如下: 2. 右键打开终端:按如下步骤执行命令. ① npm init 解释 ...
微信答题小程序开发，怎么制作用于考试的小程序，微信小程序军人条令考试，微信小程序里给员工学习考试
很多单位都有定期或者不定期的知识测试或者技能考核的要求,用来考量员工的学习效果或者技能掌握程度. 以前大都是在纸面或者电脑上进行,不是太方便. 现在随着智能手机和微信的普及,越来越多的企业开始在微信上 ...
在微信小程序里自动获得当前手机所在的经纬度并转换成地址
效果:我在手机上打开微信小程序,自动显示出我当前所在的地理位置: 具体步骤: 1. 使用微信jssdk提供的getLocation API拿到经纬度: 2. 调用高德地图的api使用经纬度去换取地址的 ...