写在前面
同学们大家好，作者又来输出内容了，本文的主要内容是布尔运算。或许不少小伙伴们第一反应是咱们 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 组件了，它的动画完成原理本质上也是经过上文说到的运用图形进行遮挡剪除。
这是第一块挡板，它是厚道孩子，老厚道实待在家里。它的层级很特别，它能挡住深绿色的部分，可是挡不住浅绿色的部分。这是因为运用了子元素肯定定位始终能够对父元素进行覆盖的原理，这儿就不展开了。有爱好的小伙伴能够去看源代码。
这是第二块挡板，留意这个第二块挡板是带了帧动画的，它会一边旋转，一边位移，在它疯狂走位之后，凭借着与第一块挡板的配合遮挡，外环的色彩看起来像是慢慢被填充起来了相同。
然后便是对勾的动画，这个动画没什么难度，便是两根棍子改变了下尺寸，这儿就不赘述了。
写在最终
好了！以上便是本文的全部内容了，作者更多是期望共享一些思考方法和一些常见的布尔运算的运用套路给小伙伴们，期望对大家有用吧～ 虽然咱们在工作中，尤其是在一些业务开发的场景下或许不会经常去运用这些东西，毕竟现在 svg 欠好处理就上 gif，gif 欠好处理就上视频。。。，可是作者一向信任八个大字：根底不牢，地动山摇。期望小伙伴们能和作者共勉。
顺便引荐一下作者维护的开源项目，Material Design 风格的移动端 Vue3 组件库。
库房地址: github.com/varletjs/va…
官方文档: varlet.gitee.io/varlet-ui/#…
另外有社区的小伙伴正在构建 Varlet主题修改工具，有爱好的小伙伴们能够去帮助一下他。
库房地址: github.com/varletjs/va…
欢迎大家 star、issue、pr、拍砖，感谢各位。
