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


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 相关文章推荐
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
Dec 04 Javascript
事件绑定之小测试  onclick && addEventListener
Jul 31 Javascript
JS数组的赋值介绍
Mar 10 Javascript
jQuery常用且重要方法汇总
Jul 13 Javascript
JQuery的attr 与 val区别
Jun 12 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
Dec 14 Javascript
详解Vue.js 2.0 如何使用axios
Apr 21 Javascript
Node.js npm命令运行node.js脚本的方法
Oct 10 Javascript
vue-cli和v-charts实现可视化图表过程解析
Oct 08 Javascript
JS数组方法shift()、unshift()用法实例分析
Jan 18 Javascript
Vue时间轴 vue-light-timeline的用法说明
Oct 29 Javascript
vue iview 隐藏Table组件里的某一列操作
Nov 13 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
建站常用13种PHP开源CMS比较
2009/08/23 PHP
使用PHP接收POST数据,解析json数据
2013/06/28 PHP
PHP删除数组中特定元素的两种方法
2013/07/02 PHP
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
JavaScript获取GridView中用户点击控件的行号,列号
2009/04/14 Javascript
js以对象为索引的关联数组
2010/07/04 Javascript
JavaScript全局函数使用简单说明
2011/03/11 Javascript
jQuery中wrapAll()方法用法实例
2015/01/16 Javascript
JS日期格式化之javascript Date format
2015/10/01 Javascript
JS创建对象几种不同方法详解
2016/03/01 Javascript
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
JS 实现 ajax 异步浏览器兼容问题
2017/01/21 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
vue2笔记 — vue-router路由懒加载的实现
2017/03/03 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
2017/04/22 Javascript
jQuery实现的form转json经典示例
2017/10/10 jQuery
JavaScript实现精美个性导航栏筋斗云效果
2017/10/29 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
2018/09/11 Javascript
node基于async/await对mysql进行封装
2019/06/20 Javascript
vue实现绑定事件的方法实例代码详解
2019/06/20 Javascript
Sublime Text3 配置 NodeJs 环境的方法
2020/05/20 NodeJs
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
python绘制铅球的运行轨迹代码分享
2017/11/14 Python
Python利用递归实现文件的复制方法
2018/10/27 Python
关于tf.reverse_sequence()简述
2020/01/20 Python
python入门之井字棋小游戏
2020/03/05 Python
python3.8.3安装教程及环境配置的详细教程(64-bit)
2020/11/28 Python
银行类自荐信
2014/02/04 职场文书
大学老师推荐信
2014/02/25 职场文书
电子装配专业毕业生求职信
2014/04/23 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
竞选大队干部演讲稿
2014/09/11 职场文书
2015年先进个人自荐书
2015/03/24 职场文书
教师求职自荐信
2015/03/26 职场文书
图书借阅制度范本
2015/08/06 职场文书
浅谈python中的多态
2021/06/15 Python