微信小程序实现自定义加载图标功能
更新时间：2018年07月19日 09:27:04 作者：Rattenking
这篇文章主要介绍了微信小程序实现自定义加载图标功能，非常不错具有一定的参考借鉴价值，需要的朋友参考下吧
效果图
实现思路
1.首先通过HTML+CSS实现加载动画的静态效果；
2.根据需求给每个动画设计不同的动画效果。
例如第一个加载图标的静态绘制
1、首先确定动画的盒子宽高；
2、设置盒子中每一个长方形的宽高以及定位（注意：此处需要将长方形的旋转中心点移动到长方形的右侧边终点，方便后期以该点旋转。）；
3、通过长方形盒子的伪元素，设置显示的长方形背景和宽高，同时进行定位。
4、由于在第二步的时候，已经将旋转中心移动，此处我们直接对每一个盒子中长方形进行旋转（注意：旋转角度 = 360 / 盒子中长方形个数）。
.circle-line{
width: 100px;
height: 100px;
display: inline-block;
position: relative;
}
.circle-line text{
display: block;
width: 50%;
height: 5px;
opacity: .7;
position: absolute;
top: calc(50% - 2.5px);
left: 0px;
transform-origin: center right;
}
.circle-line text::before{
content: '';
display: block;
width: 15px;
height: 5px;
position: absolute;
top: 0;
right: 10px;
background-color: blue;
}
.circle-line text:nth-child(1){
transform: rotate(0deg);
}
.circle-line text:nth-child(2){
transform: rotate(45deg);
}
.circle-line text:nth-child(3){
transform: rotate(90deg);
}
.circle-line text:nth-child(4){
transform: rotate(135deg);
}
.circle-line text:nth-child(5){
transform: rotate(180deg);
}
.circle-line text:nth-child(6){
transform: rotate(225deg);
}
.circle-line text:nth-child(7){
transform: rotate(270deg);
}
.circle-line text:nth-child(8){
transform: rotate(315deg);
}
动画制作
观察发现动画只是针对每个长方形的透明度进行改变，所以动画采用从0.05到0.9的透明度循环改变。
@keyframes circle {
0%{
opacity: 0.05;
}
100%{
opacity: 0.9;
}
}
进行动画绑定
.circle-line text{
animation: circle 1.5s linear infinite;
}
动画绑定完成，发现所有的整个图标一起显示消失，那么也就是缺少了对单个个体的动画处理，延迟动画时间，使其依次渐变。
单个动画处理
.circle-line text:nth-child(1){
animation-delay: 0.2s;
}
.circle-line text:nth-child(2){
animation-delay: 0.4s;
}
.circle-line text:nth-child(3){
animation-delay: 0.6s;
}
.circle-line text:nth-child(4){
animation-delay: 0.8s;
}
.circle-line text:nth-child(5){
animation-delay: 1s;
}
.circle-line text:nth-child(6){
animation-delay: 1.2s;
}
.circle-line text:nth-child(7){
animation-delay: 1.4s;
}
.circle-line text:nth-child(8){
animation-delay: 1.6s;
}
注意：单个动画延迟的时间必须超过动画执行的总时间，防止一个动画执行完成后的卡顿。
总结
以上所述是小编给大家介绍的微信小程序实现自定义加载图标功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要为大家详细介绍了JavaScript实现网页跨年倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
这篇文章主要介绍了JavaScript面向对象之七大基本原则,结合实例形式详细分析了JavaScript面向对象七大基本原则,包括单一职责、开闭原则、里氏替换、依赖倒置、接口隔离、迪米特法则及组合/聚合复用原则,需要的朋友可以参考下2020-05-05
最近一直在看《javascript权威指南 第五版》，变量作用域这一章，看得真的有点累。不过，收获还是多多。2011-09-09
在JavaScript中Click事件是一种常见的用户交互事件,表示用户在网页上点击某个元素的动作,这篇文章主要给大家介绍了关于Javascript中点击(click)事件的三种写法,需要的朋友可以参考下2024-06-06
今天的项目中碰到了一个乱码问题，从JS里传URL到服务器，URL中有中文参数，服务器里读出的中文参数来的全是“？”，查了网上JS编码相关资料得以解决。2009-09-09
一些柱形图在数据量比较多的时候,横向排列受到挤压,导致柱形图,变的非常细,影响整体的效果,下面这篇文章主要给大家介绍了关于echarts柱状堆叠图(图例和x轴都是动态的)的相关资料,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了JS实现的文字间歇循环滚动效果,涉及javascript结合时间函数定时触发实现页面元素动态操作相关技巧,需要的朋友可以参考下2018-02-02
JavaScript encodeURI 和encodeURIComponent
encodeURI和encodeURIComponet函数都是javascript中用来对URI进行编码，将相关参数转换成UTF-8编码格式的数据。URI在进行定位跳转时，参数里面的中文、日文等非ASCII编码都会进行编码转换2015-12-12
zTree插件之单选下拉菜单实例代码。需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
这篇文章主要介绍了分享15个JavaScript的重要数组方法，数组方法的重要一点是有些是可变的，有些是不可变的。在决定针对特定问题使用哪种方法时，务必牢记，下文就来分享重要数组方法，需要的小伙伴可以参考一下2022-05-05
最新评论