在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:动画执行时长;
结合实际场景可以在自己的追格小程序中调试
-
追格小站点评WordPress主题 V1.5.5 更新产品集排序功能追格小站点评主题是一个互联网创新产品分享与点评导航主题。用户在这发掘和发布有趣的产品(网址、小程序、APP),为喜欢的点赞与点评。
-
追格小程序 V2.3.0更新发布商家名片模块等功能追格小程序是一个积木式小程序搭建框架,基于Uniapp+WordPress开发的微信小程序,代码免费开源不加密且支持二开,安装追格相应扩展模块(模块支持按需购买),简单配置即可快速搭建不限于圈子社区、知识付费、活动报名、资讯等类型小程序。
-
追格WordPress资讯小程序更新发布V1.6.0专为内容/资源下载场景设计,一站式解决内容和流量变现难题的WordPress资讯小程序。
-
配色新选择:小站点评色彩导航重磅发布追格小站点评主题中特别增设了"色彩导航"栏目。这一新栏目不仅集合了丰富的配色方案、渐变色,还特别融入了中国传统的色彩元素,并提供了颜色码转换工具等实用功能
-
追格企业官网主题 更新发布产品、新闻动态排序等功能追格企业官网主题(专业版)由追格开发的一款WordPress主题模板,专为企业建站和追格企业官网小程序PC配套而设计,功能集产品与服务、经典案例、新闻动态、留言反馈、公司简介、联系我们等模块,简单易用,无需懂代码。
-
追格企业官网主题(多语版)用户中心上线,未来功能更值得期待追格企业官网(多语言版)近日推出了全新的用户中心,为用户带来了更加便捷和个性化的服务体验。这个用户中心支持传统的用户名和密码注册方式,同时也提供了便捷的微信扫码登录选项,让你轻松登录。在这里,你可以轻松修改个人资料、更新密码。
暂无评论,抢个沙发...