微信小程序实现自定义加载图标功能


Posted in Javascript onJuly 19, 2018

效果图

微信小程序实现自定义加载图标功能

实现思路

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 相关文章推荐
jQuery(非HTML5)可编辑表格实现代码
Dec 11 Javascript
jQuery事件绑定和委托实例
Nov 25 Javascript
node.js中的fs.exists方法使用说明
Dec 17 Javascript
JavaScript匿名函数之模仿块级作用域
Dec 12 Javascript
深入理解$.each和$(selector).each
May 15 Javascript
简单谈谈ES6的六个小特性
Nov 18 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
Mar 02 Javascript
Vue.js实例方法之生命周期详解
Jul 03 Javascript
JavaScript异步上传图片文件的实例代码
Jul 04 Javascript
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
Js实现复选框的全选、全不选反选功能代码实例
Feb 28 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
Nov 03 Javascript
Angular5集成eventbus的示例代码
Jul 19 #Javascript
微信小程序实现弹出菜单
Jul 19 #Javascript
微信小程序实现之手势锁功能实例代码
Jul 19 #Javascript
React组件重构之嵌套+继承及高阶组件详解
Jul 19 #Javascript
微信小程序实现折叠展开效果
Jul 19 #Javascript
详解Angularjs 自定义指令中的数据绑定
Jul 19 #Javascript
微信小程序实现天气预报功能
Jul 18 #Javascript
You might like
如何用PHP来实现一个动态Web服务器
2015/07/29 PHP
自定义min版smarty模板引擎MinSmarty.class.php文件及用法
2016/05/20 PHP
PHP三种方式实现链式操作详解
2017/01/21 PHP
jQuery 开天辟地入门篇一
2009/12/09 Javascript
jQuery 数据缓存模块进化史详细介绍
2012/11/19 Javascript
javascript ie6兼容position:fixed实现思路
2013/04/01 Javascript
jQuery阻止同类型事件小结
2013/04/19 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
2014/03/12 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
2014/10/17 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
2016/01/19 Javascript
如何判断Javascript对象是否存在的简单实例
2016/05/18 Javascript
jquery html动态添加的元素绑定事件详解
2016/05/24 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
2016/12/28 Javascript
angularjs实现多张图片上传并预览功能
2017/02/24 Javascript
完美解决input[type=number]无法显示非数字字符的问题
2017/02/28 Javascript
微信小程序定位当前城市的方法
2018/07/19 Javascript
JS实现排行榜文字向上滚动轮播效果
2019/11/26 Javascript
JS实现音乐钢琴特效
2020/01/06 Javascript
如何实现echarts markline标签名显示自己想要的
2020/07/20 Javascript
Openlayers绘制聚合标注
2020/09/28 Javascript
用Python展示动态规则法用以解决重叠子问题的示例
2015/04/02 Python
浅析Git版本控制器使用
2017/12/10 Python
Python实现读取SQLServer数据并插入到MongoDB数据库的方法示例
2018/06/09 Python
Django之富文本(获取内容,设置内容方式)
2020/05/21 Python
Python实现Word文档转换Markdown的示例
2020/12/22 Python
python利用appium实现手机APP自动化的示例
2021/01/26 Python
世界上最大的街头服饰网站:Karmaloop
2017/02/04 全球购物
什么是smarty? Smarty的优点是什么?
2013/08/11 面试题
简述安装Slackware Linux系统的过程
2012/01/12 面试题
幼教简历自我评价
2014/01/28 职场文书
餐饮总经理岗位职责
2014/03/07 职场文书
房产代理公证处委托书
2014/04/04 职场文书
申论倡议书范文
2014/05/13 职场文书
2015年高校辅导员工作总结
2015/04/20 职场文书
Golang流模式之grpc的四种数据流
2022/04/13 Golang
Grafana可视化监控系统结合SpringBoot使用
2022/04/19 Redis