如何繪制一個圓圓的loading圈

小程序里需要一個像下面的loading，原生的沒有，引入別的組件庫又太大，所有決定自己寫個。

1.基本原理

動態(tài)的實現(xiàn)原理是給8個小圓圈設(shè)置透明度由大變小的動畫，每個圓圈設(shè)置不同的動畫啟動時間。布局的實現(xiàn)原理是父元素設(shè)置為position: relative, 每個圓圈設(shè)置樣式為position: absolute; left: xx; top: xx; right: xx; bottom: xx。 通過給left/right/top/bottom設(shè)置不同的值將其均勻的分布在一個圓圈上。html代碼如下:

 view >
說起來簡單，但是給它們賦值的時候沒有經(jīng)驗，第一次用理科生的思維簡單將圓三等分計算坐標，往往8個圓圈就圍成了一個菱形/正方形。。。就像下面這樣
2. 位置設(shè)置技巧
后來看到 同學(xué)po的文章css3實現(xiàn)10中l(wèi)oading效果， 按照JRd3的代碼確實可以實現(xiàn)很好看的效果，但是當(dāng)我想換一換loading圓圈大小的時候，樣式就崩了，經(jīng)過分析，他們的坐標是存在某種數(shù)學(xué)關(guān)系的，如下圖所示，在豎直或橫線上的坐標可通過50%定位，斜線上的坐標如圖中所示，其中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定義了大圓和小圓圈的半徑，不管改成多大只需要更改變量，下面樣式無需改變。
通過這個公式計算的看起來就很像圓形了
3.動畫時間設(shè)置
假設(shè)動畫持續(xù)時間為 t， 圓圈個數(shù)為 c, 某個小圓圈的位置為 i (比如上面 i 取 1~8)，那么小圈相繼啟動的時間為 i * t/c
相關(guān)推薦：
圖片懶加載imgLazyLoading.js詳解
巧用ajax請求服務(wù)器加載數(shù)據(jù)列表時提示loading的方法
微信小程序loading組件如何載入動畫方法教程
以上就是css3繪制一個圓圓的loading轉(zhuǎn)圈動畫實例分享的詳細內(nèi)容，html教程        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。