uniapp开发微信小程序使用lottie动画和SVGA动画

755 阅读1分钟

使用lottie动画踩坑记录

lottie的小程序包是lottie-miniprogram

一、

  • 如上图中,我们在data中声明一个lottie变量,去承接 lottie动画的实例,这里我们需要把整个lottie动画提取成一个组件,这样的话,这个lottie实例是绑定在组件的this上的,就不会出现一种循环引用的错
        Converting circular structure to JSON
    --> starting at object with constructor 'AnimationItem'
    |     property 'renderer' -> object with constructor 'CanvasRenderer'
    --- property 'animationItem' closes the circle
    
    
  • 如果不提组件全部都写在一个vue文件内部的话就会抛上面的错误,需要声明一个常量来承接这个lottie实例

二、

  • 当设计提供的json动画的json文件内含有上面的类似的js代码字符串的时候,由于在小程序中是没有eval的,所以会抛错eval is not a function

  • 我这边的解决办法是,直接删除相关代码,发现对动画没有影响(也可以让设计师重新提供)

小程序的lottie只支持两个接口 lottie.setup(canvas) lottie.loadAnimation(options),很多自定义的功能是无法实现的

使用SVGA动画踩坑记录

  • 首先小程序是有相关的包的svgaplayer-weapp,直接通过npm下载即可
  • 也可以下载svgaplayer.weapp.js文件,本地引入,同样的效果
  • github上说是可以使用svga.min.js,使用的时候,有抛错问题,具体是啥记不太清了,优先使用svgaplayer-weapp