我用純 CSS 實(shí)現(xiàn)了一個(gè)冒泡排序動(dòng)畫

作者：前端新世界 2024-03-13 08:21:53

開發(fā) 前端

如果你在Codepen上操作代碼，那么在移動(dòng)設(shè)備上，最后幾個(gè)動(dòng)畫可能無法播放，顯示為空白；而在PC上，CPU風(fēng)扇可能會(huì)轉(zhuǎn)起來！

想象一下，如果你在面試中被問到，“你能實(shí)現(xiàn)冒泡排序嗎”？

你自信滿滿地回答面試官，“當(dāng)然，你想問的是用JavaScript還是CSS呢？”。

大佬風(fēng)范迎面而來。

你可能會(huì)嗤之以鼻，這有啥好炫耀的呢，“沒有面試官會(huì)對(duì)實(shí)現(xiàn)一個(gè)模擬冒泡排序的動(dòng)畫印象深刻，好吧?”。

你說的沒錯(cuò)！

但是，如果我們創(chuàng)建的這個(gè)冒泡排序算法...是通過純CSS實(shí)現(xiàn)的...且額外添加可視化效果呢？

是不是瞬間就感覺高大上了呢？

所以，千萬不要錯(cuò)過今天這篇文章！

演示

說明：:root元素頂部有5個(gè)值：

:root{
    --val1: 12;
    --val2: 16;
    --val3: 9;
    --val4: 14;
    --val5: 7;

這就是我們今天要演示的未排序的數(shù)組！

以上數(shù)組等同于：[12,16,9,14,7]。

你可以隨意更改這些值（0到20之間的任何值皆可），然后在Codepen UI中按下run，即可為你排序！

圖片

注意：如果你在Codepen上操作代碼，那么在移動(dòng)設(shè)備上，最后幾個(gè)動(dòng)畫可能無法播放，顯示為空白；而在PC上，CPU風(fēng)扇可能會(huì)轉(zhuǎn)起來！

計(jì)算太多的限制就是這樣......我不確定是因?yàn)閮?nèi)存不足還是什么，但這毫無疑問突破了CSS的極限！

代碼如下：

:root{
    --val1: 12;
    --val2: 16;
    --val3: 9;
    --val4: 11;
    --val5: 7;
    
    --max-val: 20;
    
        
    --arr1s0: var(--val1);
    --arr2s0: var(--val2);
    --arr3s0: var(--val3);
    --arr4s0: var(--val4);
    --arr5s0: var(--val5);
    
    /* step 1 - check 1 and 2*/
    --is-1-greater-2-step-1: Min(1, Max(var(--arr1s0) - var(--arr2s0), 0));
    --is-2-greater-1-step-1: (1 - var(--is-1-greater-2-step-1));
  
    --arr1s1: calc(var(--is-2-greater-1-step-1) * var(--arr1s0) + var(--is-1-greater-2-step-1) * var(--arr2s0));
    --arr2s1: calc(var(--is-1-greater-2-step-1) * var(--arr1s0) + var(--is-2-greater-1-step-1) * var(--arr2s0)); 
    --arr3s1: var(--arr3s0);
    --arr4s1: var(--arr4s0);
    --arr5s1: var(--arr5s0);
    
    /* step 2 - check 2 and 3*/
    --is-2-greater-3-step-2: Min(1, Max(var(--arr2s1) - var(--arr3s1), 0));
    --is-3-greater-2-step-2: (1 - var(--is-2-greater-3-step-2));
  
    --arr1s2: var(--arr1s1);
    --arr2s2: calc(var(--is-3-greater-2-step-2) * var(--arr2s1) + var(--is-2-greater-3-step-2) * var(--arr3s1));
    --arr3s2: calc(var(--is-2-greater-3-step-2) * var(--arr2s1) + var(--is-3-greater-2-step-2) * var(--arr3s1)); 
    --arr4s2: var(--arr4s1);
    --arr5s2: var(--arr5s1);
    
    /* step 3 - check 3 and 4*/
    --is-3-greater-4-step-3: Min(1, Max(var(--arr3s2) - var(--arr4s2), 0));
    --is-4-greater-3-step-3: (1 - var(--is-3-greater-4-step-3));
  
    --arr1s3: var(--arr1s2);
    --arr2s3: var(--arr2s2);
    --arr3s3: calc(var(--is-4-greater-3-step-3) * var(--arr3s2) + var(--is-3-greater-4-step-3) * var(--arr4s2));
    --arr4s3: calc(var(--is-3-greater-4-step-3) * var(--arr3s2) + var(--is-4-greater-3-step-3) * var(--arr4s2)); 
    --arr5s3: var(--arr5s2);
    
    /* step 4 - check 4 and 5*/
    --is-4-greater-5-step-4: Min(1, Max(var(--arr4s3) - var(--arr5s3), 0));
    --is-5-greater-4-step-4: (1 - var(--is-4-greater-5-step-4));
  
    --arr1s4: var(--arr1s3);
    --arr2s4: var(--arr2s3);
    --arr3s4: var(--arr3s3);
    --arr4s4: calc(var(--is-5-greater-4-step-4) * var(--arr4s3) + var(--is-4-greater-5-step-4) * var(--arr5s3));
    --arr5s4: calc(var(--is-4-greater-5-step-4) * var(--arr4s3) + var(--is-5-greater-4-step-4) * var(--arr5s3)); 
    
    
    
    /* step 5 - check 1 and 2*/
    --is-1-greater-2-step-5: Min(1, Max(var(--arr1s4) - var(--arr2s4), 0));
    --is-2-greater-1-step-5: (1 - var(--is-1-greater-2-step-5));
  
    --arr1s5: calc(var(--is-2-greater-1-step-5) * var(--arr1s4) + var(--is-1-greater-2-step-5) * var(--arr2s4));
    --arr2s5: calc(var(--is-1-greater-2-step-5) * var(--arr1s4) + var(--is-2-greater-1-step-5) * var(--arr2s4)); 
    --arr3s5: var(--arr3s4);
    --arr4s5: var(--arr4s4);
    --arr5s5: var(--arr5s4);
    
    
    
    
    /* step 6 - check 2 and 3*/
    --is-2-greater-3-step-6: Min(1, Max(calc(var(--arr2s5) - var(--arr3s5)), 0));
    --is-3-greater-2-step-6: calc(1 - var(--is-2-greater-3-step-6));
  
    --arr1s6: var(--arr1s5);
    --arr2s6: calc(var(--is-3-greater-2-step-6) * var(--arr2s5) + var(--is-2-greater-3-step-6) * var(--arr3s5));
    --arr3s6: calc(var(--is-2-greater-3-step-6) * var(--arr2s5) + var(--is-3-greater-2-step-6) * var(--arr3s5)); 
    --arr4s6: var(--arr4s5);
    --arr5s6: var(--arr5s5);
    
    
    /* step 7 - check 3 and 4*/
    --is-3-greater-4-step-7: Min(1, Max(calc(var(--arr3s6) - var(--arr4s6)), 0));
    --is-4-greater-3-step-7: calc(1 - var(--is-3-greater-4-step-7));
  
    --arr1s7: var(--arr1s6);
    --arr2s7: var(--arr2s6);
    --arr3s7: calc(var(--is-4-greater-3-step-7) * var(--arr3s6) + var(--is-3-greater-4-step-7) * var(--arr4s6));
    --arr4s7: calc(var(--is-3-greater-4-step-7) * var(--arr3s6) + var(--is-4-greater-3-step-7) * var(--arr4s6)); 
    --arr5s7: var(--arr5s6);
    
    
    /* step 8 - check 1 and 2*/
    --is-1-greater-2-step-8: Min(1, Max(calc(var(--arr1s7) - var(--arr2s7)), 0));
    --is-2-greater-1-step-8: calc(1 - var(--is-1-greater-2-step-8));
  
    --arr1s8: calc(var(--is-2-greater-1-step-8) * var(--arr1s7) + var(--is-1-greater-2-step-8) * var(--arr2s7));
    --arr2s8: calc(var(--is-1-greater-2-step-8) * var(--arr1s7) + var(--is-2-greater-1-step-8) * var(--arr2s7)); 
    --arr3s8: var(--arr3s7);
    --arr4s8: var(--arr4s7);
    --arr5s8: var(--arr5s7);
    
    
      /* step 9 - check 2 and 3*/
    --is-2-greater-3-step-9: Min(1, Max(calc(var(--arr2s8) - var(--arr3s8)), 0));
    --is-3-greater-2-step-9: calc(1 - var(--is-2-greater-3-step-9));
  
    --arr1s9: var(--arr1s8);
    --arr2s9: calc(var(--is-3-greater-2-step-9) * var(--arr2s8) + var(--is-2-greater-3-step-9) * var(--arr3s8));
    --arr3s9: calc(var(--is-2-greater-3-step-9) * var(--arr2s8) + var(--is-3-greater-2-step-9) * var(--arr3s8)); 
    --arr4s9: var(--arr4s8);
    --arr5s9: var(--arr5s8);
    
    
     /* step 10 - check 1 and 2*/
    --is-1-greater-2-step-10: Min(1, Max(calc(var(--arr1s9) - var(--arr2s9)), 0));
    --is-2-greater-1-step-10: calc(1 - var(--is-1-greater-2-step-10));
  
    --arr1s10: calc(var(--is-2-greater-1-step-10) * var(--arr1s9) + var(--is-1-greater-2-step-10) * var(--arr2s9));
    --arr2s10: calc(var(--is-1-greater-2-step-10) * var(--arr1s9) + var(--is-2-greater-1-step-10) * var(--arr2s9)); 
    --arr3s10: var(--arr3s9);
    --arr4s10: var(--arr4s9);
    --arr5s10: var(--arr5s9);
    
    
    
    
    /* colouring divs */
    
    
    --color1: green;
    --color2: red;
    --switch1: var(--color1) calc(100% * var(--is-1-greater-2-step-1)), 
                 var(--color2) 0;
    
    --switch2: var(--color1) calc(100% * var(--is-2-greater-3-step-2)), 
                 var(--color2) 0;
    
    --switch3: var(--color1) calc(100% * var(--is-3-greater-4-step-3)), 
                 var(--color2) 0;
    
    --switch4: var(--color1) calc(100% * var(--is-4-greater-5-step-4)), 
                 var(--color2) 0;
    
     --switch5: var(--color1) calc(100% * var(--is-1-greater-2-step-5)), 
                 var(--color2) 0;
    
     --switch6: var(--color1) calc(100% * var(--is-2-greater-3-step-6)), 
                 var(--color2) 0;
    
    --switch7: var(--color1) calc(100% * var(--is-3-greater-4-step-7)), 
                 var(--color2) 0;
    
    --switch8: var(--color1) calc(100% * var(--is-1-greater-2-step-8)), 
                 var(--color2) 0;
    
     --switch9: var(--color1) calc(100% * var(--is-2-greater-3-step-9)), 
                 var(--color2) 0;
    
    --switch10: var(--color1) calc(100% * var(--is-1-greater-2-step-10)), 
                 var(--color2) 0;
    
/*     
    
    --val2s1: calc(var(--is-2-greater-1) * var(--val1) + var(--is-1-greater-2) * var(--val2));
    --val2s1: calc(var(--is-1-greater-2) * var(--val1) + var(--is-2-greater-1) * var(--val2));
     */
    
    
/*     
    
    --color1: red;
    --color2: green;
    --switch1: var(--color1) calc(100% * var(--is-1-greater-2)), 
                 var(--color2) calc(100% * var(--is-1-greater-2)), 
                 var(--color2) calc(100% * (1 - var(--is-1-greater-2)));
     */
    
    --anim-height: 20px;
    
    
}


.grid{
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: end;
    padding: 20px;
    height: calc(var(--max-val) * var(--anim-height));
}

.grid div{
    background: linear-gradient(grey, grey); 
    width: 200px;
    animation-duration: 12s;
    animation-fill-mode: forwards;
}
.div1{
    height: calc(var(--arr1s0) * 20px);
    animation-name: div1;
}

.div2{
    height: calc(var(--arr2s0) * 20px);
    animation-name: div2;
}

.div3{
    height: calc(var(--arr3s0) * 20px);
    animation-name: div3;
}
.div4{
    height: calc(var(--arr4s0) * 20px);
    animation-name: div4;
}

.div5{
    height: calc(var(--arr5s1) * 20px);
    animation-name: div5;
}


@keyframes div1{
    0%{
       height: calc(var(--arr1s0) * var(--anim-height));
       background: linear-gradient(var(--switch1));
    }
    9%{
      background: linear-gradient(var(--switch1));  
    }
    10%{
       height: calc(var(--arr1s1) * var(--anim-height));
       background: linear-gradient(grey, grey);
    }
    20%{
       height: calc(var(--arr1s2) * var(--anim-height));
    }
    30%{
       height: calc(var(--arr1s3) * var(--anim-height));
    }
    40%{
       height: calc(var(--arr1s4) * var(--anim-height));
       background: linear-gradient(grey, grey);
    }
    41%{
       background: linear-gradient(var(--switch5));
    }
    49%{
       background: linear-gradient(var(--switch5));
    }
    50%{
       height: calc(var(--arr1s5) * var(--anim-height));
       background: linear-gradient(grey, grey);
    }
    60%{
       height: calc(var(--arr1s6) * var(--anim-height));
    }
    70%{
       height: calc(var(--arr1s7) * var(--anim-height));
       background: linear-gradient(grey, grey);
    }
    71%{
       height: calc(var(--arr1s7) * var(--anim-height));
        background: linear-gradient(var(--switch8));
    }
    79%{
       background: linear-gradient(var(--switch8));
    }
    80%{
       height: calc(var(--arr1s8) * var(--anim-height));
       background: linear-gradient(grey, grey); 
    }
    90%{
       height: calc(var(--arr1s9) * var(--anim-height));
       background: linear-gradient(grey, grey); 
    }
    91%{
       background: linear-gradient(var(--switch10));
    }
    99%{
      background: linear-gradient(var(--switch10));  
    }
    100%{
       height: calc(var(--arr1s10) * var(--anim-height));
       background: linear-gradient(grey, grey);  
    }
}
@keyframes div2{
    0%{
       height: calc(var(--arr2s0) * var(--anim-height));
       background: linear-gradient(var(--switch1));
    }
    10%{
       height: calc(var(--arr2s1) * var(--anim-height));
       background: linear-gradient(var(--switch1));
    }
    11%{
       height: calc(var(--arr2s1) * var(--anim-height));
       background: linear-gradient(var(--switch2));
    }
    19%{
       background: linear-gradient(var(--switch2));
    }
    20%{
       height: calc(var(--arr2s2) * var(--anim-height));
       background: linear-gradient(grey, grey);
    }
    30%{
       height: calc(var(--arr2s3) * var(--anim-height));
    }
    40%{
       height: calc(var(--arr2s4) * var(--anim-height));
       background: linear-gradient(grey, grey); 
    }
    41%{
       height: calc(var(--arr2s4) * var(--anim-height));
       background: linear-gradient(var(--switch5));
    }
    49%{
       background: linear-gradient(var(--switch5));
    }
    50%{
       height: calc(var(--arr2s5) * var(--anim-height));
        background: linear-gradient(var(--switch6));
    }
    59%{
       background: linear-gradient(var(--switch6));
    }
    60%{
       height: calc(var(--arr2s6) * var(--anim-height));
       background: linear-gradient(grey, grey); 
    }
    70%{
       height: calc(var(--arr2s7) * var(--anim-height));
       background: linear-gradient(grey, grey);
    }
    71%{
      background: linear-gradient(var(--switch8));  
    }
    80%{
       height: calc(var(--arr2s8) * var(--anim-height));
       background: linear-gradient(var(--switch8));
    }
    81%{
       height: calc(var(--arr2s8) * var(--anim-height));
       background: linear-gradient(var(--switch9));
    }
    90%{
       height: calc(var(--arr2s9) * var(--anim-height));
       background: linear-gradient(var(--switch9));  
    }
    91%{
       height: calc(var(--arr2s9) * var(--anim-height));
       background: linear-gradient(var(--switch10));
    }
    99%{
      height: calc(var(--arr2s10) * var(--anim-height));  
      background: linear-gradient(var(--switch10));  
    }
    100%{
       height: calc(var(--arr2s10) * var(--anim-height));
    }
}
@keyframes div3{
    0%{
       height: calc(var(--arr3s0) * var(--anim-height));
       background: linear-gradient(grey, grey);
    }
    10%{
       height: calc(var(--arr3s1) * var(--anim-height));
       background: linear-gradient(grey, grey);
    }
    11%{
      background: linear-gradient(var(--switch2));  
    }
    20%{
       height: calc(var(--arr3s2) * var(--anim-height));
       background: linear-gradient(var(--switch2));
    }
    21%{
       height: calc(var(--arr3s2) * var(--anim-height));
       background: linear-gradient(var(--switch3));
    }
    29%{
      background: linear-gradient(var(--switch3));  
    }
    30%{
       height: calc(var(--arr3s3) * var(--anim-height));
       background: linear-gradient(grey, grey);
    }
    40%{
       height: calc(var(--arr3s4) * var(--anim-height));
    }
    50%{
       height: calc(var(--arr3s5) * var(--anim-height));
       background: linear-gradient(grey, grey); 
    }
    51%{
       height: calc(var(--arr3s5) * var(--anim-height));
       background: linear-gradient(var(--switch6));
    }
    59%{
       background: linear-gradient(var(--switch6));
    }
    60%{
       height: calc(var(--arr3s6) * var(--anim-height));
        background: linear-gradient(var(--switch7));
    }
    69%{
       background: linear-gradient(var(--switch7));
    }
    70%{
       height: calc(var(--arr3s7) * var(--anim-height));
       background: linear-gradient(grey, grey); 
    }
    80%{
       height: calc(var(--arr3s8) * var(--anim-height));
       background: linear-gradient(grey, grey); 
    }
    81%{
       background: linear-gradient(var(--switch9));
    }
    89%{
       background: linear-gradient(var(--switch9));
    }
    90%{
       height: calc(var(--arr3s9) * var(--anim-height));
       background: linear-gradient(grey, grey); 
    }
    100%{
       height: calc(var(--arr3s10) * var(--anim-height));
    }
}
@keyframes div4{
    0%{
       height: calc(var(--arr4s0) * var(--anim-height));
       background: linear-gradient(grey, grey); 
    }
    10%{
       height: calc(var(--arr4s1) * var(--anim-height));
    }
    20%{
       height: calc(var(--arr4s2) * var(--anim-height));
       background: linear-gradient(grey, grey);
    }
    21%{
         background: linear-gradient(var(--switch3));
    }
    30%{
       height: calc(var(--arr4s3) * var(--anim-height));
       background: linear-gradient(var(--switch3)); 
    }
    31%{
       height: calc(var(--arr4s3) * var(--anim-height));
       background: linear-gradient(var(--switch4)); 
    }
    39%{
         background: linear-gradient(var(--switch4));
    }
    40%{
       height: calc(var(--arr4s4) * var(--anim-height));
       background: linear-gradient(grey, grey);
    }
    50%{
       height: calc(var(--arr4s5) * var(--anim-height));
    }
    60%{
       height: calc(var(--arr4s6) * var(--anim-height));
       background: linear-gradient(grey, grey); 
    }
    61%{
       height: calc(var(--arr4s6) * var(--anim-height));
       background: linear-gradient(var(--switch7));
    }
    69%{
       background: linear-gradient(var(--switch7));
    }
    70%{
       height: calc(var(--arr4s7) * var(--anim-height));
       background: linear-gradient(grey, grey);
    }
    80%{
       height: calc(var(--arr4s8) * var(--anim-height));
    }
    90%{
       height: calc(var(--arr4s9) * var(--anim-height));
    }
    100%{
       height: calc(var(--arr4s10) * var(--anim-height));
    }
}
@keyframes div5{
    0%{
       height: calc(var(--arr5s0) * var(--anim-height));
       background: linear-gradient(grey, grey);
    }
    10%{
       height: calc(var(--arr5s1) * var(--anim-height));
    }
    20%{
       height: calc(var(--arr5s2) * var(--anim-height));
    }
    30%{
       height: calc(var(--arr5s3) * var(--anim-height));
       background: linear-gradient(grey, grey); 
    }
    31%{
         background: linear-gradient(var(--switch4));
    }
    39%{
         background: linear-gradient(var(--switch4));
    }
    40%{
       height: calc(var(--arr5s4) * var(--anim-height));
       background: linear-gradient(grey, grey);
    }
    50%{
       height: calc(var(--arr5s5) * var(--anim-height));
    }
    60%{
       height: calc(var(--arr5s6) * var(--anim-height));
    }
    70%{
       height: calc(var(--arr5s7) * var(--anim-height));
    }
    80%{
       height: calc(var(--arr5s8) * var(--anim-height));
    }
    90%{
       height: calc(var(--arr5s9) * var(--anim-height));
    }
    100%{
       height: calc(var(--arr5s10) * var(--anim-height));
    }
}

<div class="grid">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
</div>

解釋

動(dòng)畫看起來有點(diǎn)蠢萌蠢萌的，具體的代碼也貼上去了。但還有幾件很有趣的事情我要說一下：

獲取v2 > v1的布爾值

--is-1-greater-2-step-1: Min(1, Max(var(--arr1s0) - var(--arr2s0), 0));

看起來復(fù)雜，但其實(shí)不然，代碼執(zhí)行以下操作：

在數(shù)組中，位置1的值減去位置2的值。（為了方便起見，我們稱之為diff1and2）
找出diff1and2和0的最大值。我們這樣做是為了“如果1大于2，得到正值，但如果2大于1，返回0”。這個(gè)結(jié)果稱之為1greaterOrZero。
對(duì)于1greaterOrZero使用Min確保它不大于1。即，如果OneGreaterOrZero是6，會(huì)減少到1，但如果是0，那么返回0。

還是困惑不解嗎？這在JS中也可用：

let pos1 = 7;
let pos2 = 15;

let diff1and2 = pos1 - pos2; 
//if "diff1and2" is negative the next step will change it to 0;
let OneGreaterOrZero = Math.max(diff1and2, 0);

let result = Math.min(1, OneGreaterOrZero);

console.log(diff1and2, OneGreaterOrZero, result); //always between 0 and 1 as false / true representation.

交換數(shù)組位置

現(xiàn)在我們來說說如何在數(shù)組中交換位置？

為了實(shí)現(xiàn)冒泡排序，如果第一個(gè)值大于第二個(gè)值，那么我們需要交換這兩個(gè)值。

這里我忍痛放棄了JS中臨時(shí)變量的魔法。

是的，我們得這樣做：

-arr1s1: calc(var(--is-2-greater-1-step-1) * var(--arr1s0) + var(--is-1-greater-2-step-1) * var(--arr2s0));
--arr2s1: calc(var(--is-1-greater-2-step-1) * var(--arr1s0) + var(--is-2-greater-1-step-1) * var(--arr2s0));

看起來還是那么復(fù)雜，不要擔(dān)心，實(shí)際上依然很簡單。

在我們之前的function中，我們創(chuàng)建了一個(gè)布爾值來查看1是否大于2。所以現(xiàn)在有一個(gè)1或一個(gè)0。

反之同理：

--is-2-greater-1-step-1: (1 - var(--is-1-greater-2-step-1));

這樣做的妙處在于，現(xiàn)在我們可以使用以下技巧：

// in bubble sort, if 1 
origArray = [7,2];

// we run our previous functions to get our 2 variables:

oneIsGreater = 1;
twoIsGreater = 0;

// we can now multiply the values together. If [2] is greater than one then we will return the same value. But if [1] is greater than [2] then we will swap the values.

newArray[0] = (twoIsGreater * origArray[0]) + (oneIsGreater * origArray[1]);  
newArray[1] = (oneIsGreater * origArray[0]) + (twoIsGreater * origArray[1]); 

// which is the same as this:
newArray[0] = 0 * 7 + 1 * 2;  //2 
newArray[1] = 1 * 7 + 0 * 2;  //7

巧妙吧？如果交換oneIsGreater和twoIsGreater，那就返回原始值！

origArray = [7,2];
oneIsGreater = 0;
twoIsGreater = 1;

//same "function"
newArray[0] = (twoIsGreater * origArray[0]) + (oneIsGreater * origArray[1]);  
newArray[1] = (oneIsGreater * origArray[0]) + (twoIsGreater * origArray[1]); 

// which is the same as this:
newArray[0] = 1 * 7 + 0 * 2;  //7 
newArray[1] = 0 * 7 + 1 * 2;  //2

冒泡排序完成！

之所以有這么多CSS的唯一原因是因?yàn)檫€不能在vanilla CSS中進(jìn)行循環(huán)。因此，我們必須手動(dòng)編寫冒泡排序每個(gè)階段的交換過程：