分析uni-app菊花loading的純CSS繪制

背景

繼上拉加載——本着刨根問底的精神，挖了挖引用的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動畫的運用可以為頁面添彩不少，分析至細節目的就是為了能夠靈活運用，每天進步一點點，加油吧！