使用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