Vue3 학습: 컴포넌트에서 부울 연산을 사용하는 방법에 대해 이야기해 보겠습니다.

(학습 영상 공유: vuejs 입문 튜토리얼, 기본 프로그래밍 영상)

안녕하세요 학생 여러분, 저자가 다시 콘텐츠를 출력하기 위해 왔습니다. 아마도 많은 친구들의 첫 번째 반응은 Javascript에서 true와 false일 것입니다. 그렇습니다. 둘 다 부울 값입니다. 운영은 그 이상입니다. 저자는 학생들에게 컴퓨터 그래픽 및 프런트엔드 개발에 부울 연산을 적용하는 방법을 소개합니다. 왜 갑자기 부울 연산을 공유하고 싶나요? 이는 작성자가 유지 관리하는 Varlet 구성 요소 라이브러리가 최근에 구성 요소 PR(일부 결과 정보를 표시하는 데 사용되는 Result 결과 구성 요소)을 수신했다는 사실에서 비롯됩니다. 구성 요소 애니메이션은 부울 연산을 비교적 잘 적용할 수 있습니다. 먼저 구성 요소 효과를 살펴보겠습니다. Javascript 中的 true 和 false，是的没错，它们都是布尔值，但是布尔运算却远不止如此。作者将为同学们介绍布尔运算在计算机图形学以及前端开发中的应用。为什么突然想分享布尔运算呢？这源自于作者维护的 Varlet 组件库 最近收到了一个组件 PR (是一个 Result 结果组件，用于展示一些结果信息)，它的组件动画可以算是布尔运算比较不错的应用了，我们先看组件效果。

数学中的布尔运算

作者的数学水平还停留在九年义务教育水平，作者没有自信能够讲清楚，就不误人子弟了，对这方面感兴趣可以去查下维基百科。

程序员眼里的布尔运算

布尔运算是一种数学运算，它可以用来对逻辑值（true 或 false）进行操作，布尔运算包括与（AND）、或（OR）、非（NOT）、异或（XOR）和否定（NAND）。这些运算符可以用于构建逻辑表达式，并通过计算得出一个逻辑值。例如，如果你想要确定两个条件（A 和 B）是否都为真，你可以使用与（AND）运算符，这样就可以得出表达式“A AND B”的逻辑值。

图形学中的布尔运算

在图形学中，布尔运算可用来对几何形状进行操作，并得出一个新的几何形状。例如，可以使用布尔运算来执行几何图形的交集运算，即找出两个图形重叠部分的形状。也可以使用布尔运算来执行并集运算，即将两个图形合并为一个图形。布尔运算还可以用来执行差集运算，即从一个图形中减去另一个图形。这些操作有助于创建复杂的图形，并为计算机图形学提供了基础。在前端开发中，我们也可以利用这种思想去构造许多图形和动画效果。在 PPT 以及一类图形设计软件中也有着广泛的运用。

(PS: 图片来自于互联网，如有版权问题联系我，必删，仅用作图解之用)

前端开发时常用的套路

上面介绍了很多思想，接下来作者将介绍如何将这些思想应用到我们的工作中。

通过多个图形组合成新的图形

我们将多个 DIV

수학에서의 부울 연산

작가의 수학 수준은 아직 9년 의무교육 수준에 불과하므로, 글쓴이는 이를 명확하게 설명할 자신이 없습니다. 다른 사람을 오해하지 않을 것입니다. 이 측면에 관심이 있다면 Wikipedia를 확인하세요.

프로그래머의 눈으로 본 부울 연산

부울 연산은 논리값을 평가하는 데 사용할 수 있는 수학적 연산입니다 ​(true code > 또는 <code>false), 부울 연산에는 AND, OR, NOT, XOR 및 NAND가 포함됩니다. 이러한 연산자를 사용하여 논리식을 작성하고 논리값을 평가할 수 있습니다. 예를 들어, 두 조건(A와 B)이 모두 참인지 확인하려는 경우 "A AND B" 표현식의 논리값을 평가하는 AND 연산자를 사용할 수 있습니다.

그래픽의 부울 연산

그래픽에서 부울 연산을 사용하여 기하학적 모양에 대해 연산을 수행하고 새로운 기하학적 모양을 파생할 수 있습니다. 예를 들어 부울 연산을 사용하여 기하학적 도형에 대한 교차 연산, 즉 두 도형이 겹치는 부분의 도형을 찾을 수 있습니다. 부울 연산을 사용하여 두 도형을 하나의 도형으로 결합하는 합집합 연산을 수행할 수도 있습니다. 부울 연산을 사용하여 한 모양에서 다른 모양을 빼는 차이 연산을 수행할 수도 있습니다. 이러한 작업은 복잡한 그래픽을 생성하고 컴퓨터 그래픽의 기초를 제공하는 데 도움이 됩니다. 프런트엔드 개발에서는 이 아이디어를 사용하여 많은 그래픽과 애니메이션 효과를 구축할 수도 있습니다. 또한 PPT 및 그래픽 디자인 소프트웨어의 일종에도 널리 사용됩니다.

( 추신: 사진은 인터넷에서 가져온 것입니다. 저작권 문제가 있는 경우 저에게 연락하시면 삭제됩니다.)

자주 사용하는 루틴입니다. in front-end development

위에 많은 아이디어가 소개되었습니다. 다음으로 저자는 이러한 아이디어를 우리 작업에 적용하는 방법을 소개합니다.

여러 그래픽을 결합하여 새로운 그래픽을 만듭니다

여러 DIV(이하 총칭하여 그래픽이라고 함)를 결합하여 새로운 그래픽을 얻습니다. 절대 위치 지정을 통해 여러 그래픽을 쌓을 수 있습니다.

🎜🎜🎜세 개의 작은 공이 작은 구름으로 변했어요~🎜🎜🎜다른 그래픽을 통해 클리핑 효과를 구현해보세요🎜🎜🎜특수 그래픽을 사용하여 배경색과 동일하게 설정할 수 있습니다. 예를 들어 , 아래 예는 흰색(친구들이 명확하게 볼 수 있도록 회색으로 설정)으로 배경과 혼합될 수 있고 레벨을 높여 차단 역할을 할 수 있습니다. 이미지 정리처럼 보입니다. 🎜🎜🎜🎜🎜🎜🎜🎜가지치기를 하고 나면 훨씬 좋아집니다. 그런 다음 같은 방식으로 또 다른 클라우드를 만들고 오프셋에 약간의 투명성을 추가합니다. 투명성의 사용도 똑같이 중요합니다. 저자는 항상 프런트 엔드가 절반은 기술이고 절반은 예술이며 세부 사항이 결과를 결정한다고 믿어 왔습니다. 🎜🎜🎜🎜🎜 추리 애니메이션을 첨부합니다. 🎜🎜🎜🎜

overflow:hidden을 통해 클리핑 효과 달성

컨테이너를 overflow:hidden으로 설정한 다음 오프셋을 통해 컨테이너에 있는 요소를 컨테이너 밖으로 밀어내면 클리핑 효과를 얻을 수 있습니다. 저처럼 나뭇잎 모양을 만들려면 두 개의 공을 사용하여 용기 밖으로 밀어내면 나뭇잎이 반쪽씩 나옵니다. overflow: hidden，然后将容器内的元素通过偏移推出容器外，来达到剪除效果，比如我想做一个叶子的形状，我可以使用两个球，并将他们推出容器，这样我们就得到了两个一半的叶子。

然后我们对得到的形状进行组合，组合成一个完整的叶子。

然后依旧是复制，旋转，加透明度。

我们将每片叶子的左半部分的元素背景染上颜色可以更直观的看清楚目前得到的图案的结构

依旧附上推演动画。

通过让元素动起来，实现动态的剪除效果

这里就要聊一下关于文章开头提到的 Result

그런 다음 우리는 모양이 결합되어 완전한 잎을 형성합니다.

그러면 계속 복사하고, 회전하고, 투명도를 추가하세요.

추가하겠습니다 Every 지금까지 얻은 패턴의 구조를 좀 더 직관적으로 볼 수 있도록 나뭇잎의 왼쪽 절반의 요소 배경을 컬러로 염색했습니다

추리 애니메이션은 아직 첨부되어 있습니다.

요소를 움직여 동적 클리핑 효과 달성

여기에서는 기사 시작 부분에서 언급한 Result 구성 요소에 대해 이야기하겠습니다. 구현 원리는 본질적으로 위에서 언급한 폐색 및 클리핑을 위한 그래픽을 사용하는 것입니다. 🎜🎜첫 번째 블록입니다. 정직한 아이에요. 집에 있어요. 그 레벨은 매우 특별합니다. 짙은 녹색 부분은 차단할 수 있지만 밝은 녹색 부분은 차단할 수 없습니다. 이는 하위 요소의 절대 위치 지정이 항상 상위 요소를 덮어쓸 수 있기 때문입니다. 여기서는 이에 대해 논의하지 않습니다. 관심있는 친구들은 소스코드를 확인해 보세요. 🎜🎜🎜🎜🎜이것은 두 번째 배플입니다. 이 두 번째 배플에는 첫 번째 배플의 움직임 덕분에 격렬하게 움직이는 동시에 회전하고 움직입니다. 바깥쪽 링의 색상이 서서히 채워지는 것처럼 보입니다. 🎜🎜🎜🎜🎜그 다음에는 체크 표시 애니메이션이 있습니다. 이 애니메이션은 두 막대의 크기만 변경하는 것뿐입니다. 여기서는 자세히 설명하지 않겠습니다. 🎜🎜🎜🎜🎜 (학습 영상 공유: 🎜vuejs 입문 튜토리얼🎜, 🎜기본 프로그래밍 영상🎜)🎜

위 내용은 Vue3 학습: 컴포넌트에서 부울 연산을 사용하는 방법에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!