来拜、Boss直播交互说明

简介

lottie是Airbnb公司开发的一款用于移动端动效的设计库。
适用于Android、iOS、macOS、react-native、vue、html等平台和框架。
支付宝已经全面使用这个工具以实现大规模级别的动效管理和运营。
微信小程序使用lotttie实现动效可方便开发者节省大量的动效实现时间，设计师也可以方便的通过AE的动效插件实现更复杂的动效效果。

基本原理

设计师使用AE导出动效元素的运动路径，格式为json，

微信开发者官网对lottie的实现介绍

https://developers.weixin.qq.com/miniprogram/dev/extended/utils/lottie.html

实现

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

npm install --save lottie-miniprogram

传入 canvas 对象用于适配

<canvas id="canvas" type="2d"></canvas>
import lottie from 'lottie-miniprogram'
Page({
  onReady() {
    wx.createSelectorQuery().select('#canvas').node(res => {
      const canvas = res.node
      lottie.setup(canvas)
    }).exec()
  }
})

使用 lottie 接口

lottie.setup(canvas)
lottie.loadAnimation({
  ...
})
接口

动效交互效果案例