微信小程序通过lottie库实现json动画-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序通过lottie库实现json动画。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

通过npm安装Lottie库（注意微信小程序使用lottie-miniprogram，vue项目使用 lottie-web）

npm install --save lottie-miniprogram

把ui提供的json文件动画改成js文件并通过module.exports导出文件
在页面wxml文件创建一个canvas标签来存放动画（注意这里canvas需要包裹在view标签中并设置 style="width: 100%;height: 100%;）

<view style="width:750rpx;height:660rpx">
  <canvas id="lottie-demo" type="2d"  style="width: 100%;height: 100%;"></canvas>
</view>

在页面ts文件中使用动画
json动画模糊问题处理（需要把像素比率计算进去，完美解决）文章来源地址https://www.toymoban.com/news/detail-516022.html

const width = res[0].width

    const height = res[0].height

    const canvas = res[0].node

    const ctx = canvas.getContext('2d')

    const dpr = wx.getSystemInfoSync().pixelRatio

    canvas.width = width * dpr

    canvas.height = height * dpr

    ctx.scale(dpr, dpr)

lottie封装函数

import lottie from 'lottie-miniprogram'
/**
 * @function json动画方法
 * @param {*} id canvas的id选择器
 * @param {*} width canvas的宽
 * @param {*} height canvas的高
 * @param {*} context this指向的对象
 * @param {*} loop 是否循环播放
 * @param {*} autoplay 是否立即播放
 * @author 徐声
 */
export function jsonAnimation ({
  context,
  id,
  width,
  height,
  path,
  loop = true,
  autoplay = true
}) {
  wx.createSelectorQuery()
    .in(context)
    .select(id)
    .node((res) => {
      const canvas = res.node
      const lottieContext = canvas.getContext('2d')
      const dpr = wxp.getSystemInfoSync().pixelRatio
      canvas.width = width * dpr
      canvas.height = height * dpr
      lottieContext.scale(dpr, dpr)
      lottie.setup(canvas)
      // context.lottieAnimation =
      lottie.loadAnimation({
        loop: loop,
        autoplay: autoplay,
        animationData: path,
        rendererSettings: {
          context: lottieContext
        }
      })
    })
    .exec()
}

到了这里，关于微信小程序通过lottie库实现json动画的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！