请注意,本文编写于 549 天前,最后修改于 549 天前,其中某些信息可能已经过时。
源码地址
https://github.com/ymzcode/taro-lottie-animation
演示(真机预览,非调试模式)
https://www.douyin.com/user/self?modal_id=7212990412485578039
介绍
整个项目是Taro的一个vue3默认模板,封装了一个简单即用的lottie组件。组件在components
,只需要复制src/components/lottie-animation/
中的文件。
只实现了h5和微信小程序,微信小程序依赖lottie-miniprogram
,h5依赖lottie-web
,可根据需要调整。
使用
参数 | 说明 | 默认值 |
---|---|---|
domId | 用于生产动画dom节点,需确保唯一不可重复! | 无 |
path | 动画jso文件的网络地址 | 无 |
width | 容器的宽,数字类型单位px,组件会使用pxTransform进行转化 | 300 |
height | 容器的高,同上 | 300 |
weWidth | 指定后只影响微信canvas的宽,width失效 | 无 |
weHeight | 指定后只影响微信canvas的高,height失效 | 无 |
loop | 动画是否循环 | false |
autoplay | 动画是否自动播放 | false |
request | 只影响微信,原理是使用request请求path网络地址,拿到json数据使用animationData加载动画 | false |
animationData | 使用本地数据加载动画(避免配置微信小程序的安全域名) | 无 |
stopDefaultInit | 是否阻止默认的初始化调用(详见lottie4的演示) | false |
补充说明
- 程序利用taro的【统一接口的多端文件】这一特性实现。
- h5渲染方式为svg,微信渲染方式为canvas
- 因为组件依赖lottie-web和lottie-miniprogram,强烈建议先阅读lottie-web的文档,以便理解和继续更改本组件
- 最后,本组件用来提供一个思路,之前遇到一些使用问题一一解决之后,弄出来一个小组件,欢迎再自行修改。
问题
以下问题主要针对微信小程序
问题1:微信小程序开发工具可以正常显示加载,但手机预览不能正常显示,打开调试后又能正常显示并且控制台没有报错
- 需要检查path的域名是否配置到微信后台合法域名中
问题2: 页面卡顿
这个问题本人暂时还没有遇到,想到的可能原因如下:
- 需要检查动画的销毁是否正确执行,避免累加动画。
- 需要避免同一时间使用过多的canvas,或者过大的lottie文件。
- 如需使用应考虑改为gif或者使用其他方式。
1 条评论
你写得非常清晰明了,让我很容易理解你的观点。