热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

这篇文章主要介绍了微信小程序实现自定义加载图标功能,非常不错具有一定的参考借鉴价值,需要的朋友参考下吧

效果图

这里写图片描述

实现思路

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;
}

注意:单个动画延迟的时间必须超过动画执行的总时间,防止一个动画执行完成后的卡顿。

总结

以上所述是小编给大家介绍的微信小程序实现自定义加载图标功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!


推荐阅读
  • 【Linux进阶指南】第一阶段第三课:体验与部署Ubuntu系统
    在正式踏上Linux学习之旅之前,本课程将引导你深入体验和部署Ubuntu系统。通过详细的操作步骤和实践演练,你将掌握Ubuntu的基本安装、配置及常用命令,为后续的进阶学习打下坚实的基础。此外,课程还将介绍如何解决常见问题和优化系统性能,帮助你更加高效地使用Ubuntu。 ... [详细]
  • 如何撰写PHP电商项目的实战经验? ... [详细]
  • wxParse 0.3:微信小程序中的高级 HTML 和 Markdown 富文本解析器,全面支持多级嵌套与 Emoji 表情
    wxParse 0.3 是一款专为微信小程序设计的高级富文本解析器,支持 HTML 和 Markdown 转换为 WXML 可视化格式。该组件不仅能够处理复杂的多级嵌套结构,还全面支持 Emoji 表情,极大地提升了内容展示的多样性和用户体验。 ... [详细]
  • 概率与期望动态规划的深入探讨与应用分析
    本文深入探讨了概率与期望动态规划的基本原理及其在实际问题中的应用。概率是指某一事件发生的可能性大小,用P(A)表示。若某一事件的所有可能结果共有n种,且每种结果出现的概率相等,而事件A包含其中的m种结果,则该事件的概率P(A)为m/n。例如,在投掷骰子的情况下,如果事件A定义为掷出偶数点,由于共有3种偶数点(2、4、6),而总共有6种可能的结果,因此P(A)为1/2。文章进一步分析了概率与期望动态规划在复杂场景下的建模方法和求解策略,并通过具体实例展示了其在决策优化和风险管理中的应用价值。 ... [详细]
  • TypeScript 实战分享:Google 工程师深度解析 TypeScript 开发经验与心得
    TypeScript 实战分享:Google 工程师深度解析 TypeScript 开发经验与心得 ... [详细]
  • 1. 设置用户密码:使用 `slappasswd` 工具生成加密密码,确保账户安全。具体步骤如下:输入命令 `slappasswd -s NewPassword`,系统将提示重新输入新密码,并生成加密后的哈希值 {SSHA}xxxxxxxxxxxxxxxxx。2. 编写配置文件:编辑 `vildapus` 配置文件,添加必要的用户账户信息,以确保新用户能够顺利登录系统。 ... [详细]
  • 虚拟机网络设置与数据库远程连接优化指南
    本文针对个人计算机上虚拟机网络配置与数据库远程连接的问题,提供了一套详细的优化指南。在探讨远程数据库访问前,需确保网络配置正确,特别是桥接模式的设置。通过合理的网络配置,可以有效解决因虚拟机或网络问题导致的连接失败,提升远程访问的稳定性和效率。 ... [详细]
  • 本文详细介绍了 Windows API 中的按钮控件及其应用实例。主要功能包括:1. `CheckDlgButton` 用于更改对话框中按钮的选中状态;2. `CheckRadioButton` 用于设置单选按钮的选中状态。此外,还探讨了按钮控件在实际开发中的多种应用场景,帮助开发者更好地理解和使用这些功能。 ... [详细]
  • 在学习LVM(逻辑卷管理)技术的过程中,我对MD(多设备)、DM(设备映射器)以及逻辑设备和RAID的实现有了深入的理解。LVM2架构主要由DM主模块及其多个子模块组成,其中linear子模块用于创建线性设备,类似于简单的磁盘分区拼接。此外,还探讨了其他子模块如striped、mirror等在提高性能和数据冗余方面的应用。通过实际操作,我掌握了LVM的基本配置和管理方法,能够灵活应对不同存储需求。 ... [详细]
  • 在处理带有CSS覆盖层的图像时,如果希望图像从底部向上滑动并居中显示,可以通过调整定位属性和变换效果来实现。本文将探讨常见的CSS层叠定位问题,并提供相应的解决方案,帮助开发者更好地控制元素的布局和动画效果。 ... [详细]
  • 采购订单条件类型配置的开发流程详解
    为了满足采购业务的需求,需开发新的价格类型。首先,在SPRO配置中定位到相应的配置节点,创建新的条件类型“ZMM00”。接着,创建定价过程“ZMM003”。具体步骤包括:1. 配置条件类型;2. 设置定价过程。此外,还需确保新条件类型与现有系统中的其他模块兼容,以保证整体业务流程的顺畅运行。 ... [详细]
  • 如何在CAD阅图软件中将PDF文件高效转换为CAD格式?
    如何在CAD阅图软件中将PDF文件高效转换为CAD格式? ... [详细]
  • 在HDU 1166敌军布阵问题中,通过运用线段树数据结构,可以高效地计算指定区间的敌军数量。该算法不仅能够在限定的时间和内存条件下快速求解,还能够灵活应对动态变化的战场局势,为实时决策提供支持。 ... [详细]
  • 如何设置域名默认301重定向至www前缀
    在进行域名默认301重定向至www前缀的操作前,确保你已经拥有一个有效的域名,并且该域名已正确解析到外部主机地址,能够正常访问网站。本文主要针对IIS 7及以上版本的用户,IIS 7之前的版本不适用。我们将详细介绍如何通过IIS管理器配置301重定向,确保所有请求都能自动跳转到带有www前缀的URL,从而提升网站的SEO效果和用户体验。 ... [详细]
  • 为了向用户提供虚拟应用程序,通常会在基础架构中部署StoreFront或Web Interface。为了确保安全的远程访问,通常需要在DMZ中配置Secure Gateway或Access Gateway。本文详细对比了这两种界面工具的功能特性,包括用户管理、安全性、性能优化等方面,为企业选择合适的解决方案提供了全面的参考。 ... [详细]
author-avatar
书友53099678
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有