Home > Article > Web Front-end > Vue3 learning: Let’s talk about how to use Boolean operations in components
(Learning video sharing: vuejs introductory tutorial, Basic programming video)
Hello students, the author is here again Let’s output the content. The main content of this article is Boolean operations. Maybe the first reaction of many friends is true
and false
in our Javascript
. Yes, they are both Boolean values, but Boolean operations But it's much more than that. The author will introduce students to the application of Boolean operations in computer graphics and front-end development. Why do you suddenly want to share Boolean operations? This comes from the Varlet component library
maintained by the author that recently received a component PR (it is a Result
result component, used to display some result information), and its component animation can be regarded as Boolean It’s a relatively good application for computing. Let’s look at the component effects first.
The author’s mathematics level is still at the nine-year compulsory education level, and the author is not confident that he can speak It’s clear so I won’t mislead others. If you are interested in this aspect, you can check Wikipedia.
Boolean operations are a mathematical operation that can be used to operate on logical values (true
or false
), Boolean operations include AND, OR, NOT, XOR and NAND. These operators can be used to build logical expressions and evaluate to a logical value. For example, if you want to determine whether two conditions (A and B) are both true, you can use the AND operator, which evaluates the logical value of the expression "A AND B".
In graphics, Boolean operations can be used to operate on geometric shapes and derive a new geometric shape. For example, you can use Boolean operations to perform the intersection operation on geometric shapes, that is, to find the shape of the overlapping portion of two shapes. You can also use Boolean operations to perform a union operation, which combines two shapes into one shape. Boolean operations can also be used to perform difference operations, which subtract one shape from another. These operations help create complex graphics and provide the foundation for computer graphics. In front-end development, we can also use this idea to construct many graphics and animation effects. It is also widely used in PPT and a type of graphic design software.
(PS: The picture comes from the Internet. If you have any copyright issues, please contact me and it will be deleted. It is only used for illustration purposes)
Many ideas have been introduced above. Next, the author will introduce how to apply these ideas to our work.
We combine multiple DIV
(hereinafter collectively referred to as graphics) to get a Brand new graphics, we can stack multiple graphics through absolute positioning.
Three small balls turned into a small cloud~
We can use a special graphic and set it to the same color as the background. For example, the example below is white (set it to gray in order to let the friends see clearly) , so that it can blend in with the background and raise its level to provide occlusion. It looks like image pruning.
It’s much better after pruning. Then create another cloud in the same way, add some transparency to the offset. The use of transparency is equally important. The author has always believed that the front end is half technology and half art, and details determine the result.
Attached is the deduction animation.
We can set the container to overflow: hidden
, and then push the elements in the container out of the container through offset Also, to achieve a cutout effect, for example if I want to make a leaf shape, I can use two balls and push them out of the container so that we get two halves of a leaf.
Then we combine the resulting shapes to form a complete leaf.
Then still copy, rotate, and add transparency.
We dye the element background of the left half of each leaf with color to more intuitively see the structure of the pattern we have obtained so far
Still attached is the deduction animation.
Here we will talk about the # mentioned at the beginning of the article. ##Result component, its animation implementation principle is essentially the use of graphics for occlusion and clipping as mentioned above.
vuejs introductory tutorial, Basic programming video)
The above is the detailed content of Vue3 learning: Let’s talk about how to use Boolean operations in components. For more information, please follow other related articles on the PHP Chinese website!