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.

Boolean operations in mathematics

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 in the eyes of programmers

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".

Boolean operations in graphics

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)

Front end Commonly used routines during development

Many ideas have been introduced above. Next, the author will introduce how to apply these ideas to our work.

Combining multiple graphics into a new graphics

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~

Achieved through another graphic Cutout effect

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.

Achieve the clipping effect through overflow: hidden

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.

#By making the elements move, you can achieve a dynamic clipping effect

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.

This is the first baffle. It is an honest child who stays at home. Its level is very special. It can block the dark green parts, but it cannot block the light green parts. This is because the absolute positioning of child elements can always overwrite the parent element, which will not be discussed here. Interested friends can check out the source code.

This is the second baffle. Note that this second baffle is animated with frames. It will rotate and move while it moves wildly. After that, by cooperating with the first baffle, the color of the outer ring looks like it is slowly being filled in.

Then there is the animation of the check mark. This animation is not difficult. It just changes the size of the two sticks. I won’t go into details here.

(Learning video sharing:

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!