1. lottie json 文件注意事项

• lottie文件版本建议使用5.7及以下，否则可能会出现真机不显示/显示出错的问题
• lottie文件导出需要勾选 Convert expressions to keyframes 将表达式转为关键帧，因为小程序里不支持使用 eval 等动态执行脚本的能力。
• 小程序中使用 lottie 动画 | 踩坑经验分享
• lottie在线预览

yarn add lottie-miniprogram

uniapp

<script lang="ts" setup>
import lottie from 'lottie-miniprogram';
import { onMounted, getCurrentInstance } from 'vue'
import lottieJson from '@/static/lottie/lottie.json'

const _this = getCurrentInstance()!;

const Size = {
  width:300,
  height:300
}
const init = async () => {
  // 组件下需要通过组件实例使用
  _this.ctx.createSelectorQuery()// wx.createSelectorQuery()
    .select('#lottie')
    .node(async res => {
      const canvas = res.node;
      const context = canvas.getContext('2d');

      // 处理真机显示模糊
      const dpr = wx.getSystemInfoSync().pixelRatio;
      canvas.width = Size.width * dpr;
      canvas.height = Size.height * dpr;
      context.scale(dpr, dpr);

      lottie.setup(canvas);
      const ani = lottie.loadAnimation({
        loop: true,
        autoplay: true,
        animationData: lottieJson,
        rendererSettings: {
          context
        }
      });
      // 播放部分动画
      // ani.addEventListener("DOMLoaded", () => {
      //   ani.playSegments([0, 50], true);
      // });
    })
    .exec();
}

onMounted(async () => {
  init()
})
</script>
<template>
  <view class="lottie-view">
    <canvas
      id="lottie"
      type="2d"
      class="lottie"
    />
  </view>
</template>