记一次在Taro开发的微信小程序中使用lottie动画的经验
前景提要最近在做公司项目的时候,看到移动端开发用的小图标有动态效果,非常好玩了解到是使用lottie进行实现的,这个东西以前有看到过对应的插件库,但是一直没有时间做研究,趁着这个五一就抽一天时间,去图书馆借了一本讲AE的书,跟着网上的教程加入了一个lottie动画到小程序中去。在此分享一下,希望各位大佬有更好的处理方式可以一起沟通交流。lottie相关库相关库:[lottie-web](https
前景提要
最近在做公司项目的时候,看到移动端开发用的小图标有动态效果,非常好玩了解到是使用lottie进行实现的,这个东西以前有看到过对应的插件库,但是一直没有时间做研究,趁着这个五一就抽一天时间,去图书馆借了一本讲AE的书,跟着网上的教程加入了一个lottie动画到小程序中去。在此分享一下,希望各位大佬有更好的处理方式可以一起沟通交流。
lottie相关库
相关库:
[lottie-web](https://github.com/airbnb/lottie-web)
[lottie-miniprogram](https://github.com/wechat-miniprogram/lottie-miniprogram)
[犸良](https://design.alipay.com/emotion)
lottie-web是airbnb开发的用于在web,ios,android端使用lottie动画的开源库,在AE中进行设计后的动画通过安装在AE中的Bodymovin插件导出对应的json,就可以根据官方文档在使用此库的位置使用动画。
lottie-miniprogram官方小程序文档中提供的用于在小程序中使用的lottie库。
犸良。蚂蚁设计服务平台,如果不具备AE开发能力,没有相关的开发资源,可以通过此平台,快速创建使用一些简单通用的lottie动画。
小程序实现
<!-- 在小程序中通过canvas进行lottie元素的绘制 -->
<canvas id="c1" type="2d" style="display: inline-block; width: 300px; height: 300px;"></canvas>
// lottie-miniprogram插件中提供的小程序代码实现片段
wx.createSelectorQuery().selectAll('#c1').node(res => {
const canvas = res[0].node
const context = canvas.getContext('2d')
canvas.width = 300
canvas.height = 300
lottie.setup(canvas)
this.ani = lottie.loadAnimation({
loop: true,
autoplay: true,
animationData: require('../json/catrim.js'),
rendererSettings: {
context,
},
})
this._inited = true; // 用于控制当前
}).exec()
Taro实现
注意事项:
- 因为小程序中不支持预加载lottie图像(didShow的时候不能动态让canvas加载lottie动画,需要进行对应的事件操作之后再进行加载,所以这里使用一个Icon进行遮罩),预加载之前显示这个Icon,动画加载完成之后开始执行的时候取消,这个Icon最好能取到动画的首帧图,或者是处于lottie动画某个关键帧的图片,根据场景来确定。
- Taro中不需要通过单独在内部设置canvas的width和height,来设置lottie动画的dpr,Taro中的Canvas组件会自动进行适配。
<View>
<AtIcon value="heart-2" size="20" color="#ccc" />
<Canvas id=“canvas” type="2d" />
</View>
Taro.createSelectorQuery().select('#canvas').node((res: any) => {
const canvas = res.node;
const context = canvas.getContext('2d');
lottie.setup(canvas);
likeBtn = lottie.loadAnimation({
rendererSettings: {
context
},
loop: false,
autoplay: false,
animationData: require('./like.json')
});
}).exec()
遇到的问题
- lottie动画在微信小程序中不能初始就渲染,目前只能采用另一个元素来提前占位的方式。
- 在Taro构建的小程序中,比如点赞功能,可能存在多次点击频繁切换lottie动画的播放和停止的状态,可能导致动画显示的状态不一致,这里目前我使用防抖函数来进行处理,在单位时间之内不能频繁点击切换来进行处理。
更新2021-5-13
解决问题1. 初始不能直接进行渲染,可以设置一个定时器,等待页面渲染完成之后,可以正常进行元素的渲染。
如果有同行有更好的处理方式,希望能一起分享,虚心求教。
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)