前端（vue）入門到精通課程，老師在線輔導(dǎo)：聯(lián)系老師
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點(diǎn)擊使用

（學(xué)習(xí)視頻分享：vuejs入門教程、編程基礎(chǔ)視頻）

同學(xué)們大家好，作者又來輸出內(nèi)容了，本文的主要內(nèi)容是布爾運(yùn)算。可能不少小伙伴們第一反應(yīng)是咱們 Javascript 中的 true 和 false，是的沒錯(cuò)，它們都是布爾值，但是布爾運(yùn)算卻遠(yuǎn)不止如此。作者將為同學(xué)們介紹布爾運(yùn)算在計(jì)算機(jī)圖形學(xué)以及前端開發(fā)中的應(yīng)用。為什么突然想分享布爾運(yùn)算呢？這源自于作者維護(hù)的 Varlet 組件庫 最近收到了一個(gè)組件 PR (是一個(gè) Result 結(jié)果組件，用于展示一些結(jié)果信息)，它的組件動(dòng)畫可以算是布爾運(yùn)算比較不錯(cuò)的應(yīng)用了，我們先看組件效果。

數(shù)學(xué)中的布爾運(yùn)算

作者的數(shù)學(xué)水平還停留在九年義務(wù)教育水平，作者沒有自信能夠講清楚，就不誤人子弟了，對(duì)這方面感興趣可以去查下維基百科。

程序員眼里的布爾運(yùn)算

布爾運(yùn)算是一種數(shù)學(xué)運(yùn)算，它可以用來對(duì)邏輯值（true 或 false）進(jìn)行操作，布爾運(yùn)算包括與（AND）、或（OR）、非（NOT）、異或（XOR）和否定（NAND）。這些運(yùn)算符可以用于構(gòu)建邏輯表達(dá)式，并通過計(jì)算得出一個(gè)邏輯值。例如，如果你想要確定兩個(gè)條件（A 和 B）是否都為真，你可以使用與（AND）運(yùn)算符，這樣就可以得出表達(dá)式“A AND B”的邏輯值。

圖形學(xué)中的布爾運(yùn)算

在圖形學(xué)中，布爾運(yùn)算可用來對(duì)幾何形狀進(jìn)行操作，并得出一個(gè)新的幾何形狀。例如，可以使用布爾運(yùn)算來執(zhí)行幾何圖形的交集運(yùn)算，即找出兩個(gè)圖形重疊部分的形狀。也可以使用布爾運(yùn)算來執(zhí)行并集運(yùn)算，即將兩個(gè)圖形合并為一個(gè)圖形。布爾運(yùn)算還可以用來執(zhí)行差集運(yùn)算，即從一個(gè)圖形中減去另一個(gè)圖形。這些操作有助于創(chuàng)建復(fù)雜的圖形，并為計(jì)算機(jī)圖形學(xué)提供了基礎(chǔ)。在前端開發(fā)中，我們也可以利用這種思想去構(gòu)造許多圖形和動(dòng)畫效果。在 PPT 以及一類圖形設(shè)計(jì)軟件中也有著廣泛的運(yùn)用。

(PS: 圖片來自于互聯(lián)網(wǎng)，如有版權(quán)問題聯(lián)系我，必刪，僅用作圖解之用)

前端開發(fā)時(shí)常用的套路

上面介紹了很多思想，接下來作者將介紹如何將這些思想應(yīng)用到我們的工作中。

通過多個(gè)圖形組合成新的圖形

我們將多個(gè) DIV(下文統(tǒng)稱作圖形) 進(jìn)行拼合，可以得到一個(gè)全新的圖形，我們可以通過絕對(duì)定位的方式使多個(gè)圖形進(jìn)行堆疊。

三個(gè)小球變成了一朵小云彩～

通過另外一個(gè)圖形實(shí)現(xiàn)剪除效果

我們可以利用一個(gè)特殊的圖形，并把它設(shè)置成和背景一樣的顏色，比如下文的例子是白色（為了讓小伙伴們看清楚先設(shè)置成了灰色），使其可以與背景融為一體，并提高它的層級(jí)，以起到遮擋作用。看起來就像是圖像翦除一樣。

修剪之后好多了。然后再如法炮制另外一朵云，給個(gè)偏移再加點(diǎn)透明度，透明度的使用也同樣重要，作者一直認(rèn)為前端一半是技術(shù)，一半是藝術(shù)，細(xì)節(jié)決定了結(jié)果。

附上推演動(dòng)畫。

通過 overflow: hidden 實(shí)現(xiàn)剪除效果

我們可以通過將容器設(shè)置為 overflow: hidden，然后將容器內(nèi)的元素通過偏移推出容器外，來達(dá)到剪除效果，比如我想做一個(gè)葉子的形狀，我可以使用兩個(gè)球，并將他們推出容器，這樣我們就得到了兩個(gè)一半的葉子。

然后我們對(duì)得到的形狀進(jìn)行組合，組合成一個(gè)完整的葉子。

然后依舊是復(fù)制，旋轉(zhuǎn)，加透明度。

我們將每片葉子的左半部分的元素背景染上顏色可以更直觀的看清楚目前得到的圖案的結(jié)構(gòu)

依舊附上推演動(dòng)畫。

通過讓元素動(dòng)起來，實(shí)現(xiàn)動(dòng)態(tài)的剪除效果

這里就要聊一下關(guān)于文章開頭提到的 Result 組件了，它的動(dòng)畫實(shí)現(xiàn)原理本質(zhì)上也是通過上文提到的利用圖形進(jìn)行遮擋剪除。

這是第一塊擋板，它是老實(shí)孩子，老老實(shí)實(shí)待在家里。它的層級(jí)很特殊，它能擋住深綠色的部分，但是擋不住淺綠色的部分。這是因?yàn)槔昧俗釉亟^對(duì)定位始終可以對(duì)父元素進(jìn)行覆蓋的原理，這里就不展開了。有興趣的小伙伴可以去看源代碼。

這是第二塊擋板，注意這個(gè)第二塊擋板是帶了幀動(dòng)畫的，它會(huì)一邊旋轉(zhuǎn)，一邊位移，在它瘋狂走位之后，憑借著與第一塊擋板的配合遮擋，外環(huán)的顏色看起來像是慢慢被填充起來了一樣。

然后就是對(duì)勾的動(dòng)畫，這個(gè)動(dòng)畫沒什么難度，就是兩根棍子改變了下尺寸，這里就不贅述了。

（學(xué)習(xí)視頻分享：vuejs入門教程、編程基礎(chǔ)視頻）