如何繪制一個圓圓的loading圈
小程序里需要一個像下面的loading，原生的沒有闰集，引入別的組件庫又太大沽讹，所有決定自己寫個愿汰。
1. 基本原理
分析一下波势，實現(xiàn)原理是首先畫出8個小圓圈曹动，然后用css3的動畫控制小圓圈的透明度變化少办。分別設(shè)置小圓圈動畫開始時間介劫，就可以實現(xiàn)了绳军。 按照這樣是思路實現(xiàn)的時候發(fā)現(xiàn)效果并不理想哄褒，首先是小圓圈的位置兴猩，其次是動畫延遲時間饲梭。俗話說授人予魚不如授人予漁乘盖。那就逐個探討一下其中技巧。
2. 定位設(shè)置
布局的實現(xiàn)原理是父元素設(shè)置為position: relative, 每個圓圈設(shè)置樣式為position: absolute; left: xx; top: xx; right: xx; bottom: xx憔涉。 通過給left/right/top/bottom設(shè)置不同的值將其均勻的分布在一個圓圈上订框。
html代碼如下:
<view class="q-loading-dot-warp">
<view class="dot dot1"></view>
<view class="dot dot2"></view>
<view class="dot dot3"></view>
<view class="dot dot4"></view>
<view class="dot dot5"></view>
<view class="dot dot6"></view>
<view class="dot dot7"></view>
<view class="dot dot8"></view>
</view>
說起來簡單，但是給它們賦值的時候沒有經(jīng)驗兜叨，第一次用理科生的思維簡單將圓三等分計算坐標(biāo)穿扳，往往8個圓圈就圍成了一個菱形/正方形。国旷。矛物。就像下面這樣
3. 位置設(shè)置技巧
后來在簡書上看到 同學(xué)po的文章 css3實現(xiàn)18中l(wèi)oading效果， 按照J(rèn)Rd3的代碼確實可以實現(xiàn)很好看的效果跪但，但是當(dāng)我想換一換loading圓圈大小的時候履羞，樣式就崩了，經(jīng)過分析屡久，他們的坐標(biāo)是存在某種數(shù)學(xué)關(guān)系的忆首，如下圖所示，在豎直或橫線上的坐標(biāo)可通過50%定位被环，斜線上的坐標(biāo)如圖中所示糙及，其中w是矩形的寬高或者說是8個小圓圈所圍成的大園的半徑。
公式推導(dǎo)如下:
具體css代碼如下:
$width: 64px;
$height: 64px;
$dotWidth: 10px;
$dotHeight: 10px;
$radius: 5px;
$offset: 9.37px;
@function getLeft( $x ) {
@return ($width/4)*$x;
}
@function getTop( $y ) {
@return ($height/4)*$y;
}
@keyframes changeOpacity {
from { opacity: 1; }
to { opacity: .2; }
}
.q-loading {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
.q-loading-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, .5);
}
.q-loading-content {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: $width;
height: $height;
z-index: 2;
}
.dot {
width: 10px;
height: 10px;
position: absolute;
background-color: #0033cc;
border-radius: 50% 50%;
opacity: 1;
animation: changeOpacity 1.04s ease infinite;
}
.dot1 {
left: 0;
top: 50%;
margin-top: -$radius;
animation-delay: 0.13s;
}
.dot2 {
left: $offset;
top: $offset;
animation-delay: 0.26s;
}
.dot3 {
left: 50%;
top: 0;
margin-left: -$radius;
animation-delay: 0.39s;
}
.dot4 {
top: $offset;
right: $offset;
animation-delay: 0.52s;
}
.dot5 {
right: 0;
top: 50%;
margin-top: -$radius;
animation-delay: 0.65s;
}
.dot6 {
right: $offset;
bottom: $offset;
animation-delay: 0.78s;
}
.dot7 {
bottom: 0;
left: 50%;
margin-left: -$radius;
animation-delay: 0.91s;
}
.dot8 {
bottom: $offset;
left: $offset;
animation-delay: 1.04s;
}
}
代碼使用scss定義了大圓和小圓圈的半徑蛤售，不管改成多大只需要更改變量丁鹉，下面樣式無需改變妒潭。
通過這個公式計算的看起來就很像圓形了
4. 動畫時間設(shè)置
假設(shè)動畫持續(xù)時間為 t， 圓圈個數(shù)為 c, 某個小圓圈的位置為 i (比如上面 i 取 1~8)揣钦，那么小圈相繼啟動的時間為 i * t/c
