如何小程序中css3实现序列帧动画

在web页中，通过雪碧图（sprite）及css控制，可以很方便的实现序列帧动画，之前我们也做过简单介绍。

如何使用css结合序列图（sprite），为你的网页丰富动效

其实，在微信/百度/支付宝这些小程序中也可以实现，并且实现方式，思路和web页中也基本一致。

在小程序中有时会实现这种比较复杂的动画，如果直接使用gif图会因图片太大影响加载和内存，使用计时器的方法实现动画会影响性能。

所以利用css3动画animation的steps功能和css变量来实现。不需要其他小程序组件

依然还是先制作雪碧图，除了之前介绍的通过各种软件来制作，这里我们给大家介绍一个更方便的方法，如果有了动效组图，用这个网站就可以生成，点击下方链接便可以访问

CSS Sprites Generator

接下来就是在小程序中如何应用和调用了，这里只做简单介绍

动画组件animation.wxml代码：

<view class="act_sprite" 
style="background-image: url({{url}});
--width:{{width}}rpx;
--height:{{height}}rpx;
--count:{{count}};
--duration:{{duration}};"></view>

这里的style中各变量对应如下

url：组件引用传入图片的链接（要实用网络链接，不能用相对地址）；

width：组件引用传入动画显示的宽；

height：组件引用传入动画显示的高；

count：图片的数量；

duration：动画执行时长；

结合实际场景可以在自己的追格小程序中调试