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


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 相关文章推荐
利用js获取服务器时间的两个简单方法
Jan 08 Javascript
jquery Moblie入门—hello world的示例代码学习
Jan 08 Javascript
jQuery操作DOM之获取表单控件的值
Jan 23 Javascript
node.js 使用ejs模板引擎时后缀换成.html
Apr 22 Javascript
jQuery遮罩层效果实例分析
Jan 14 Javascript
JS组件Bootstrap Select2使用方法解析
May 30 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
Sep 15 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
Oct 29 Javascript
Angular5中调用第三方js插件的方法
Feb 26 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
Aug 22 Javascript
在vue中使用vue-echarts-v3的实例代码
Sep 13 Javascript
浅谈Vue中render中的h箭头函数
Nov 07 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
用libtemplate实现静态网页生成
2006/10/09 PHP
实用函数2
2007/11/08 PHP
PHP使用逆波兰式计算工资的方法
2015/07/29 PHP
详解php命令注入攻击
2019/04/06 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
JS控制表格隔行变色
2006/06/26 Javascript
javascript AutoScroller 函数类
2009/05/29 Javascript
很棒的学习jQuery的12个网站推荐
2011/04/28 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
2013/04/08 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
2014/07/21 Javascript
js生成验证码并直接在前端判断
2015/05/15 Javascript
Backbone.js的一些使用技巧
2015/07/01 Javascript
在js中做数字字符串补0(js补零)
2017/03/25 Javascript
Vue关于数据绑定出错解决办法
2017/05/15 Javascript
AngularJs 禁止模板缓存的方法
2017/11/28 Javascript
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
2019/04/22 Javascript
webpack中如何加载静态文件的方法步骤
2019/05/18 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
2019/08/26 Javascript
python批量制作雷达图的实现方法
2016/07/26 Python
python 遍历目录(包括子目录)下所有文件的实例
2018/07/11 Python
python使用wxpy实现微信消息防撤回脚本
2019/04/29 Python
django的ORM操作 删除和编辑实现详解
2019/07/24 Python
浅谈ROC曲线的最佳阈值如何选取
2020/02/28 Python
英国领先的电子、技术和办公用品购物网站:Ebuyer
2018/04/04 全球购物
TripAdvisor斯洛伐克:阅读评论、比较价格和酒店预订
2018/04/25 全球购物
波兰最大的度假胜地和城市公寓租赁运营商:Sun & Snow
2018/10/18 全球购物
Hotels.com英国:全球领先的酒店住宿提供商
2019/01/24 全球购物
Molly Bracken法国电子商店:法国女性时尚品牌
2019/07/24 全球购物
材料专业毕业生求职信
2014/02/26 职场文书
绩效工资实施方案
2014/03/15 职场文书
创建无烟单位实施方案
2014/03/29 职场文书
《青蛙看海》教学反思
2014/04/23 职场文书
校园新闻广播稿5篇
2014/10/10 职场文书
中学校园广播稿
2015/08/18 职场文书
原生JS实现分页
2022/04/19 Javascript