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

fox/ 2023年07月14日/ 小程序/ 浏览 2638

在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:动画执行时长;


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

发表评论

暂无评论,抢个沙发...

客服 工单