Vue3學習：聊聊組件中怎麼使用布林運算

（學習影片分享：vuejs入門教學、程式設計基礎影片）

同學們大家好，作者又來輸出內容了，本文的主要內容是布林運算。可能不少小夥伴們第一反應是咱們Javascript 中的true 和false，是的沒錯，它們都是布林值，但是布林運算卻遠不止如此。作者將為同學介紹布林運算在電腦圖形學以及前端開發的應用。為什麼突然想分享布爾運算呢？這源自於作者維護的Varlet 元件庫 最近收到了一個元件PR (是一個Result 結果元件，用來展示一些結果資訊)，它的元件動畫可以算是布爾運算比較不錯的應用了，我們先看組件效果。

數學中的布林運算

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

程式設計師眼中的布林運算

布林運算是一種數學運算，它可以用來對邏輯值（true# 或false）進行操作，布林運算包括與（AND）、或（OR）、非（NOT）、異或（XOR）和否定（NAND）。這些運算子可以用於建立邏輯表達式，並透過計算得出一個邏輯值。例如，如果你想要確定兩個條件（A 和 B）是否都為真，你可以使用與（AND）運算符，這樣就可以得出表達式「A AND B」的邏輯值。

圖形學中的布林運算

在圖形學中，布林運算可用來對幾何形狀進行操作，並得出一個新的幾何形狀。例如，可以使用布林運算來執行幾何圖形的交集運算，即找出兩個圖形重疊部分的形狀。也可以使用布林運算來執行並集運算，即將兩個圖形合併為一個圖形。布林運算也可以用來執行差集運算，也就是從一個圖形中減去另一個圖形。這些操作有助於創建複雜的圖形，並為電腦圖形學提供了基礎。在前端開發中，我們也可以利用這個想法來建構許多圖形和動畫效果。在 PPT 以及一類圖形設計軟體中也有著廣泛的運用。

(PS: 圖片來自於互聯網，如有版權問題聯繫我，必刪，僅用作圖解之用)

前端開發時常用的套路

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

透過多個圖形組合成新的圖形

我們將多個DIV(下文統稱作圖形) 進行拼合，可以得到一個全新的圖形，我們可以透過絕對定位的方式來堆疊多個圖形。

三個小球變成了一朵小雲彩～

透過另一個圖形實現剪除效果

我們可以利用一個特殊的圖形，並把它設定成和背景一樣的顏色，例如下文的例子是白色（為了讓小夥伴們看清楚先設定成了灰色） ，使其可以與背景融為一體，並提高它的層級，以起到遮蔽作用。看起來就像是影像翦除一樣。

# 修剪之後好多了。然後再如法炮製另外一朵雲，給個偏移再加點透明度，透明度的使用也同樣重要，作者一直認為前端一半是技術，一半是藝術，細節決定了結果。

附上推演動畫。

透過overflow: hidden 實現剪除效果

我們可以透過將容器設定為overflow: hidden，然後將容器內的元素透過偏移推出容器外面，來達到剪除效果，例如我想做一個葉子的形狀，我可以使用兩個球，並將他們推出容器，這樣我們就得到了兩個一半的葉子。

然後我們將得到的形狀進行組合，組合成一個完整的葉子。

然後依舊是複製，旋轉，加上透明度。

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

依舊附上推演動畫。

透過讓元素動起來，實現動態的剪除效果

這裡就要聊一下關於文章開頭提到的Result 元件了，它的動畫實作原理本質上也是透過上文提到的利用圖形來遮蔽剪除。

這是第一塊擋板，它是老實孩子，老實待在家裡。它的層級很特殊，它能擋住深綠色的部分，但是擋不住淺綠色的部分。這是因為利用了子元素絕對定位總是可以對父元素進行覆蓋的原理，這裡就不展開了。有興趣的小夥伴可以去看原始碼。

這是第二塊擋板，注意這個第二塊擋板是帶了幀動畫的，它會一邊旋轉，一邊位移，在它瘋狂走位之後，憑藉著與第一塊擋板的配合遮擋，外環的顏色看起來像是慢慢被填滿起來了一樣。

然後就是對勾的動畫，這個動畫沒什麼難度，就是兩根棍子改變了下尺寸，這裡就不贅述了。

（學習影片分享：vuejs入門教學、程式設計基礎影片）

以上是Vue3學習：聊聊組件中怎麼使用布林運算的詳細內容。更多資訊請關注PHP中文網其他相關文章！