在微信小程序中有时会用到比较复杂的动画，如果直接使用gif图会因图片太大影响加载和内存，使用计时器的方法实现动画会影响性能；所以利用css3动画animation的steps功能和css变量来实现。
首先将序列帧动画图片合成一张图，可以使用下面的工具：
合成“雪碧图”工具（https://www.toptal.com/developers/css/sprite-generator）
动画组件index.wxml代码：
<view class="frame_wrap"
style="background-image: url({{url}});
--width:{{width}}rpx;
--height:{{height}}rpx;
--count:{{count}};
--duration:{{duration}};"></view>
url：组件引用传入图片的链接（网络链接）；
width：组件引用传入动画显示的宽；
height：组件引用传入动画显示的高；
count：图片的数量；
duration：动画执行时长；
具体实现代码片段（https://developers.weixin.qq.com/s/6hCJAumQ78iG）
网友评论