【经验分享】支付宝小程序lottie动画尝鲜

简介：

Lottie 是一个用于 Web 和 iOS 的移动库，可使用 Bodymovin 解析以 JSON 格式导出的 Adobe After Effects 动画，并将其本地呈现在移动设备上。以下为 Lottie 动画库适配小程序的方法。

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

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

支付宝小程序已将loadAnimation等方法封装到lottie组件里，通过参数的方式传入。

官方文档及FAQ参考：https://opendocs.alipay.com/mini/component/lottie

下面我们将实操一个简单的lottie动画：

先看效果图：

<lottie autoplay="{{autoplay}}" id="lottieId" path="{{path}}" repeatCount="{{repeatCount}}" placeholder="{{placeholder}}" />
<button onTap="handleStart">开始</button>
<button onTap="handlePause">暂停</button>

Page({
  data: {
    autoplay: false, // 是否自动播放
    path: 'https://qiniu-web.qtshe.com/20200922data.json', // lottie动画数据源
    placeholder: 'https://qiniu-image.qtshe.com/default.png', // 版本过低时显示的缺省图
    optimize: true, // 允许低版本使用降级方案
    repeatCount: -1 // 是否重复播放，负数表示无限播放
  }
});

经过实践下来 比较喜欢的是直接将设计小姐姐给的 data.json 使用path参数传入的方式。

设计小姐姐给的json文件需要放到https://design.alipay.com/lolita 进行检测，查看兼容性问题，具体就不赘述了，官方文档已经列出来了。

目前lottie组件提供了几个操作动画的实例方法：

首先我们需要在onReady里获取lottie组件实例： my.createLottieContext(elementId);

这个获取实例的方法官方文档没写，所以在尝试获取实例的时候踩过比较多的坑，已反馈给官方文档童鞋，现在应该已经更新了。

onReady() {
  this.lottieContext = my.createLottieContext('lottieId');
},
// 开始播放
handleStart() {
  this.lottieContext.play()
},
// 暂停播放
handlePause() {
  this.lottieContext.pause()
}

然后我们就可实现 点击暂停以及点击播放的操作了。

至于djangoId的使用方式：

设计小姐姐提供的 Lottie 动画可能会带有目录 images/，里面保存的是一些静态图片。我们需要将images静态资源文件以及data.json文件统一压缩成zip文件，通过djangoId的方式引入。

目前有三种解决方案，推荐以下两种：

1. 整体压缩为 Zip 文件，将 Zip 的路径放在 djangoId 参数里。
2. 将图片资源转成 base64 内链在 JSON 文件里，这样 JSON 路径放在 path 参数里。（https://qiniu-web.qtshe.com/20200922data.json）

最后实践的代码片段如下（访问可查看效果）：

https://pen.mini-code.com/s/ad1d4a04-3c0b-45ec-9117-52bb225bffb8