详细解析:uni-app|vue组件实现的科技感loading纯CSS动效

 

前言

本人是一枚并不安分守己的后端程序猿,一直对前端开发“垂涎三尺”,所以,一有机会就会“不务正业”一番。最近,发现了一个非常好的学习资料,于是乎,我的老毛病又犯了,经过一段时间的研究,终于,把这些技能“收入囊中”。但是,本人觉得,这么好的前端学习资料,如果被我“中饱私囊”了,实在是太可惜了。所以呢,我就花了一点时间,为大家解析一下这些炫酷的技能。这篇文章,解析的是一个loading加载的动效,纯CSS的哦。


一、效果展示及思路分析

1.效果展示

2.思路分析

 

 

我们可以将该动效拆成两部分来理解:

第一部分 圆形图标以及图标中的进度文字百分比、第二部分 围绕圆形图标转动的圆弧

废话不多说,直接上代码!!

二、实现步骤

1.准备工作

在正式开始写代码之前,需要先下载相应的IDE,以及进行必要的配置工作。

  • 下载Hbuilder X
  • 新建uni-app项目
  • 在pages文件夹下创建home文件夹,在此文件夹下创建home.vue文件
  • 修改配置文件pages.json,设置新创建的home.vue文件为应用启动项
  • 项目根目录下新建components文件夹,在此文件夹下创建CircleLoading.vue自定义组件文件
uni-app项目目录结构

 

pages.json配置文件中新增home为应用启动页

 

ok,搞定以上准备工作后,我们就可以开始敲代码了。

2.代码实现

(1)首先,为了演示方便,我们需要在home.vue应用启动页中添加一个布局,如图

 

<style scoped>
	.home{
		display: grid;
		grid-template-columns: repeat(2,1fr);
		grid-template-rows: repeat(3,1fr);
		height: 100vh;
		justify-items: center;
		align-items: center;
		max-width: 800px;
		margin: 0,auto;
	}
	.home>view{
		transform: scale(1.5);
	}
</style>

 (2)引入创建好的自定义vue组件,并注册到当前页面中

<script>
	import CricleLoading from '@/components/CircleLoading.vue'
	export default {
		components:{
			CricleLoading
		}
	}
</script>

(3) 在当前页面中使用自定义vue组件

注意:在使用自定义组件时,需要在最外层再包裹一个view标签,这样做的目的是为了避免在home.vue页面中元素使用了transform样式以后,在自定义vue组件页面样式中元素z-index样式无效的问题。(这个坑,我已经爬过了!o(╥﹏╥)o 大家就不要再往里跳了!放心!这次分享的动效中没有这个坑,大家安心的继续敲代码吧!)

<template>
	<view class="home">
		<view><CircleLoading></CircleLoading></view>
	</view>
</template>

home.vue完整代码

<template>
	<view class="home">
		<view><CircleLoading></CircleLoading></view>
	</view>
</template>

<script>
	import CricleLoading from '@/components/CircleLoading.vue'
	export default {
		components:{
			CricleLoading
		}
	}
</script>

<style scoped>
	.home{
		display: grid;
		grid-template-columns: repeat(2,1fr);
		grid-template-rows: repeat(3,1fr);
		height: 100vh;
		justify-items: center;
		align-items: center;
		max-width: 800px;
		margin: 0,auto;
	}
	.home>view{
		transform: scale(1.5);
	}
</style>

 (4)编写自定义vue组件CircleLoading.vue

说明:样式代码并没有考虑浏览器兼容问题,本代码的测试环境是谷歌浏览器。

  • 在模版代码块中,添加uni-app提供的view组件元素(类似于HTML中的div)并设置class属性为circle-loading(嗯,你没有看错,就只有这么一个view组件元素,通过CSS样式就能实现文章开头演示的动效!别着急,继续往下看......)
<template>
	<view class="circle-loading">20%</view>
</template>
  • 设置view元素的样式
.circle-loading{
        /*设置相对定位,作为绝对定位元素的父容器*/
		position: relative;

        /*弹性布局,容器内元素水平垂直居中*/
		display: flex;
		justify-content: center;
		align-items: center;

        /*将元素边框样式设置成轨道演示*/
		border: 4px solid rgb(184,187,191);
		border-radius: 100%;
		width: 40px;
		height: 40px;

        /*设置进度文本样式*/
		font-size: 12px;
		font-weight: bold;
		color: rgb(172,28,177);

        /*设置元素的外层和内层阴影样式*/
		box-shadow: 0 1px 2px 1px rgba(0,0,0,0.2),
			inset 0 1px 2px 1px rgba(0,0,0,0.2);
	}

说明:用到的知识点有“相对定位和绝对定位”、“弹性布局”、border-radius以及box-shadow,如果对这些知识点不是太了解的话,可以去翻一下资料,不难。这里我就不再做过多的解释了。(我第一次看到这些样式代码时,表示也是一脸懵B,没有办法,“不务正业”嘛,还是要付出一定代价地。还好,我还有一点点前端基础,学起来也比较快,终于让我把这段代码搞定!)

  • 利用CSS:before选择器,创建伪元素

分析:创建的这个伪元素实际上和view元素是一样大小的,只不过它们重叠了而已。这个时候,我们只设置了伪元素的上边框的颜色,所以就做出了我们想要的样式。如图:

view元素

 

伪元素

 

重叠效果

 

 

.circle-loading::before{
		content: '';
        /*绝对定位元素*/
		position: absolute;

        /*设置元素的位置*/
		left: 50%;
		top: 50%;
		margin-left: -24px;
		margin-top: -24px;
        
        /*设置元素的样式*/
		display: block;
        /*这里把元素的边框设置为透明色*/
		border: 4px solid transparent;
		border-radius: 100%;
        /*只有顶部的边框有颜色*/
		border-top-color: rgb(172,28,191);
		width: 40px;
		height: 40px;

        /*为元素添加动效*/
		animation: circle 2s ease infinite;
	}
  • 给伪元素添加CSS3动效

说明:伪元素中添加的animation属性与@keyframes一起使用,从而实现不同的动画效果,0%表示开始动画,100%表示结束动画,当然我们还可以在中间设置新的关键帧,例如:在0%和100%中间再设置一个50%

@keyframes rotatel{
		0%{
			transform: rotate(0deg);
		}
		100%{
			transform: rotate(360deg);
		}
	}

总结

哎呀,打了这么半天的字,终于把这个动效的实现过程给大家讲完了,怎么样?做出来的效果还不错吧!那么,就让我们简单来总结下这篇文件的知识点。

  • uni-app项目中如何设置应用启动页,如何创建自定义vue组件以及如何在应用启动页中使用自定义vue组件
  • 编写自定义vue组件中用到了“相对定位于绝对定位”、“弹性布局”、border-radius以及box-shadow
  • 添加CSS3动效时用到的animation属性以及@keyframes规则

以上就是本文中用到的知识点,说一个题外话哈,小凡觉得,这个动效除了以上的知识点以外,最重要的还是如何拆分这个动效,从而来实现它,这个才是最关键的,剩下的就是把拆分的功能做出来就OK了。(嘿嘿,其实后端的很多功能也是这么个思路!突然感觉,我怎么这么优秀呢!咳咳......不小心说出了心声,大家就当没看见我前面的字好了!(*^▽^*))

如果喜欢小凡的这篇文章,记得点赞、收藏和分享哦!也欢迎大家在评论区留言。

扫描二维码关注我的公众号,可以第一时间收到我的更新信息哦!

 相关文章推荐

 

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页