分析uni-app菊花loading的纯CSS绘制

2021-12-07 03:58:42

背景

继上拉加载——本着刨根问底的精神，挖了挖引用的uni-load-more组件，其实现比较容易理解，要说核心点，非CSS绘制的loading莫属了。小小的动画图，用到时直接引用就好了，不不不，千万不要这么想，所谓书到用时方恨少，可不是随口一说便成了千古名句的，没准哪天你就遇上了相关知识点，即使有万能度娘，也不能让你拥有灵活运用的能力——自我激励结束，接下来分析绘制过程吧。

知识点

1. @keyframes规则

通过该规则可以创建动画，实现从一套样式逐渐变化成另一套样式；

亦能够多次改变样式，以百分比规定改变的时间，关键字from和to相当于0%和100%，可以理解为动画中的帧画面

2. animation属性

用来控制动画的外观，同时将动画与选择器绑定

语法：animation: name duration timing-function delay iteration-count direction fill-mode play-state;

常用属性值：

name=@keyframes创建的关键帧名字
duration=完成一轮动画需要的时间
timing-function=动画显示的方式，可填值为：
linear：匀速，ease：低速-加快-变慢，ease-in：低速开始，ease-out：低速结束，ease-in-out：低速开始和结束，cubic-bezier(n,n,n,n)：自定义速度，n为0-1间的值，默认为ease
delay=延迟启动时间，单位为秒（s）或者毫秒（ms），默认为0
若是为负值，则跳过定义时间启动动画

iteration-count=执行时间，默认为1，infinite为无限次

其他三个属性了解即可，不算常用：
direction 属性定义是否循环交替反向播放动画
fill-mode 属性规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式
play-state属性指定动画是否正在运行或已暂停

3. transform属性

应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等，此案例用到2D旋转rotate函数，指定角度即可旋转

4. transform-origin属性

用法：transform-origin: x-axis y-axis z-axis;

可以更改转换元素的位置，相当于旋转中心的位置，默认为50% 50% 0

思路

若用绘画工具，应当是以下步骤去绘制，我们按照这个思路，用CSS将它实现。

1. 绘制旋转基图

定义标签，给所有的短杠赋予uni-load-view_wrapper样式
将短杠样式的定位position设置为绝对定位absolute，以便控制每一根短杠的位置
给短杠进行rotate旋转，并对每根短杠位置进行设置，制造出中空感

2. 旋转基图

将基图放在单独标签中，为一组，并设置（复制基图所在标签）其他两组标签，由于绝对定位，三组图形是重合的
对其中两组标签分别进行30度和60度旋转，达到图③的效果

3. 添加渐变动画效果

十二根短杠都由高饱和到低饱和的过程（改变每根短杠的透明度），且每根的饱和程度均等差递减（动画延迟），所以：

使用@keyframes规则创建动画load，通过form和to关键字（这是和0％到100％相同），实现透明度的降低
用动画延迟animation-delay来控制每根短杠开始动画的时间，实现不同的饱和度
给每根短杠uni-load-view_wrapper加上动画，animation: load .96s ease infinite，参数分别是动画名称、持续时间、显示方式、执行次数

代码

出自Hello uni-app项目模板中的uni-load-more

<template>
	<view class="uni-load-more">
		<view class="uni-load-more__img">
			<view class="load1 load">
				<view :style="{ background: color }" class="uni-load-view_wrapper" />
				<view :style="{ background: color }" class="uni-load-view_wrapper" />
				<view :style="{ background: color }" class="uni-load-view_wrapper" />
				<view :style="{ background: color }" class="uni-load-view_wrapper" />
			</view>
			<view class="load2 load">
				<view :style="{ background: color }" class="uni-load-view_wrapper" />
				<view :style="{ background: color }" class="uni-load-view_wrapper" />
				<view :style="{ background: color }" class="uni-load-view_wrapper" />
				<view :style="{ background: color }" class="uni-load-view_wrapper" />
			</view>
			<view class="load3 load">
				<view :style="{ background: color }" class="uni-load-view_wrapper" />
				<view :style="{ background: color }" class="uni-load-view_wrapper" />
				<view :style="{ background: color }" class="uni-load-view_wrapper" />
				<view :style="{ background: color }" class="uni-load-view_wrapper" />
			</view>
		</view>
	</view>
</template>
<style>
	@charset "UTF-8";

	.uni-load-more {
		display: flex;
		flex-direction: row;
		height: 80upx;
		align-items: center;
		justify-content: center
	}

	.uni-load-more__img {
		position: relative;
		height: 24px;
		width: 24px;
		margin-right: 10px;
	}

	.uni-load-more__img>.load {
		position: absolute
	}

	.uni-load-more__img>.load .uni-load-view_wrapper {
		width: 6px;
		height: 2px;
		background: #999;
		position: absolute;
		opacity: .2; 
		transform-origin: 50%;
		animation: load .96s ease infinite
	}

	.uni-load-more__img>.load .uni-load-view_wrapper:nth-child(1) {
		transform: rotate(90deg);
		top: 2px;
		left: 9px
	}

	.uni-load-more__img>.load .uni-load-view_wrapper:nth-child(2) {
		transform: rotate(180deg);
		top: 11px;
		right: 0
	}

	.uni-load-more__img>.load .uni-load-view_wrapper:nth-child(3) {
		transform: rotate(270deg);
		bottom: 2px;
		left: 9px
	}

	.uni-load-more__img>.load .uni-load-view_wrapper:nth-child(4) {
		top: 11px;
		left: 0
	}

	.load1,
	.load2,
	.load3 {
		height: 24px;
		width: 24px
	}

	.load2 {
		transform: rotate(30deg)
	}

	.load3 {
		transform: rotate(60deg)
	}

	.load1 .uni-load-view_wrapper:nth-child(1) {
		animation-delay: 0s
	}

	.load2 .uni-load-view_wrapper:nth-child(1) {
		animation-delay: 80ms
	}

	.load3 .uni-load-view_wrapper:nth-child(1) {
		animation-delay: .16s
	}

	.load1 .uni-load-view_wrapper:nth-child(2) {
		animation-delay: .24s
	}

	.load2 .uni-load-view_wrapper:nth-child(2) {
		animation-delay: .32s
	}

	.load3 .uni-load-view_wrapper:nth-child(2) {
		animation-delay: .40s
	}

	.load1 .uni-load-view_wrapper:nth-child(3) {
		animation-delay: .48s
	}

	.load2 .uni-load-view_wrapper:nth-child(3) {
		animation-delay: .56s
	}

	.load3 .uni-load-view_wrapper:nth-child(3) {
		animation-delay: .64s
	}

	.load1 .uni-load-view_wrapper:nth-child(4) {
		animation-delay: .72s
	}

	.load2 .uni-load-view_wrapper:nth-child(4) {
		animation-delay: .8s
	}

	.load3 .uni-load-view_wrapper:nth-child(4) {
		animation-delay: .88s
	}

	@-webkit-keyframes load {
		0% {
			opacity: 1
		}

		100% {
			opacity: .2
		}
	}
</style>

总结

掌握CSS动画的运用可以为页面添彩不少，分析至细节目的就是为了能够灵活运用，每天进步一点点，加油吧！