Json动图使用

Json动图使用

1- npm install --save lottie-miniprogram  附网址：https://www.npmjs.com/package/lottie-miniprogram

2- html结构

<canvas id="canvas" type="2d"></canvas>

3- js 文件

uniap开发：

因为获取dom元素，所以要在mounted生命周期中

uni

    .createSelectorQuery()

    .select("#canvas")

    .node((res) => {

      const canvas = res.node;

      lottie.setup(canvas);

      lottie.loadAnimation({

        loop: true,

        autoplay: true,

        animationData: smileTiger,

        rendererSettings: {

          context: canvas.getContext("2d"),

        },

      });

    })

    .exec();

Wx小程序

wx

    .createSelectorQuery()

    .select("#canvas")

    .node((res) => {

      const canvas = res.node;

      lottie.setup(canvas);

      lottie.loadAnimation({

        loop: true,

        autoplay: true,

        animationData: smileTiger（你引入的json文件）,

        rendererSettings: {

          context: canvas.getContext("2d"),

        },

      });

    })

    .exec();

代码附图

附图效果