在web页中,通过雪碧图(sprite)及css控制,可以很方便的实现序列帧动画,之前我们也做过简单介绍。
如何使用css结合序列图(sprite),为你的网页丰富动效
其实,在微信/百度/支付宝这些小程序中也可以实现,并且实现方式,思路和web页中也基本一致。
在小程序中有时会实现这种比较复杂的动画,如果直接使用gif图会因图片太大影响加载和内存,使用计时器的方法实现动画会影响性能。
所以利用css3动画animation的steps功能和css变量来实现。不需要其他小程序组件
依然还是先制作雪碧图,除了之前介绍的通过各种软件来制作,这里我们给大家介绍一个更方便的方法,如果有了动效组图,用这个网站就可以生成,点击下方链接便可以访问
接下来就是在小程序中如何应用和调用了,这里只做简单介绍
动画组件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:动画执行时长;
结合实际场景可以在自己的追格小程序中调试
-
【重要通知】追格小程序更新提示因uni组件更新,追格小程序部分模块样式出现异常。我们已定位问题并正优化中,给您带来不便敬请谅解。感谢支持与理解!追格团队将持续努力,优化产品体验,期待更快与您相见。
-
微信小程序打开任意公众号文章 wx.openOfficialAccountArticlewx.openOfficialAccountArticle是微信小程序通过小程序打开任意公众号文章api,不包括临时链接等异常状态下的公众号文章,必须有点击行为才能调用成功。
-
追格小程序V2.5.0更新发布追格小程序V2.5.0版本的更新,我们没给大家添太多新花样,主要是把“内功”练好了。我们认真检查了上一版里那些组件之间的小摩擦,一点点地调整、优化,搞定了超过40多个小地方。这样一来,小程序跑起来就更顺畅了,大家用起来也会感觉更舒服、更顺手。这次虽然没大张旗鼓,但确实是让产品站得更稳、更可靠了。
-
2024年国庆放假通知追格2024年国庆节放假有关事宜通知如下
-
追格小程序V2.5.8更新发布追格小程序是一款采用积木式理念的微信小程序构建框架,它巧妙融合了Uniapp与WordPress技术,打造出一个开源且无加密限制的开发环境。
-
WordPress导航主题小站点评 V2.0.0更新发布自定义广告、色彩导航等功能追格小站点评主题是一个互联网创新产品分享与点评导航主题。用户在这发掘和发布有趣的产品(网址、小程序、APP),为喜欢的点赞与点评。响应式布局,专业版自带前端会员中心(用户认证、发布、个人主页、消息等),并支持微信扫码登录。
暂无评论,抢个沙发...