Writing in the front

Clip-path is one of the new properties in CSS3. The clip-path property uses clipping to create a displayable area for an element. The part inside the region is displayed, and the part outside the region is hidden.

In English, it can turn a square DIV box into DIY shapes (triangles, squares, even irregular shapes).

As shown in the figure, three figures formed with clip-path:

Unfortunately, clip-path is still not widely used, and there are very few auxiliary tools in the online community

One of the few clip-path makers:

However, in order to use clip-path to complete the two needs of painting and animation, I made a special oneeasy-animation It is convenient for clip-path drawing and animation. We will introduce the details below. In order to arouse your interest, clip-path-based fragment rotation is specially released here:

Part1 How to draw a clip-path?

Let’s look at a small example: the CSS section:

    .ele-0{
      width:800px;
      height:400px;
      background: black;
      clip-path: polygon(35.00% 29.75%.21.00% 71.75%.63.38% 36.25%)}Copy the code

HTML part

<div class="ele-0"></div>
Copy the code

Here, the percentage is used as the unit, and the true value is calculated based on the width and height of the element. See the calculation below for example

35.00% *800 =280px
29.75% *400=119px
Copy the code

So the first point is going to be 280px,119px

You might ask, why do you use percentages instead of PX? If you use PX, the size of the image is fixed forever! That means you can’t just change the aspect ratio to scale it 2:1, so if you set width=400px, height=200px, you get a smaller triangle.

When adjacent points are connected and the last point wants to connect with the first point, a closed graph is formed. This is basically the principle that clip-path wants to draw any graph.

Part2 Clip-path animation?

As long as two clip-paths contain the same number of points, the animation frame can be switched linearly! Online direct experience: codepen: codepen. IO/a1163675107…

.ele-0{ width:800px; height:400px; position: absolute; background: black; animation: move-0 1s linear infinite; } @keyframes move-0 { 0%{ clip-path: Polygon (35.00% 29.75%, 21.00%, 71.75% and 63.38% 36.25%, 35.13%, 30.00%)} {100% clip - path: Polygon (82.88% 21.25%, 65.25%, 70.00% and 86.88% 63.25%, 83.00%, 21.00%)}}Copy the code

See? The number of points in 0% and 100% clip-path within @keyframes is the same, if not, there is no animation!

Part3 Easy-animation Open source project based on clip-path animation

Making address: github.com/moushicheng…

Use: online moushicheng. Making. IO/easy – animat…

A Brief introduction

Frame animator at the front, you as the user can draw multiple frames directly, and then click Import to get the corresponding CSS code

The concept of frame

The principle of modern animation forming is visual retention. An animation with a duration of 1s is usually composed of multiple frames (usually 24 frames /s in animation), and each frame is one frame. In Easy-animation, you only need to draw some key frames, and the program can automatically fill the frames and complete the animation. PS: Frame complement: Automatically fill in the missing frames in the middle to fill in the picture. For example, only two triangles are drawn above, but the transformation of the middle triangle has been completed. [Warning] Each frame must be a closed graph.

How to use it?

Take the process of drawing an animation. GIF demo:

Timeline:

The plus sign in the lower left corner:

It’s used to add new tracks and the new tracks means you can draw more moving objects.

cur:Number

Represents the frame you selected in the current track (toggle with a click). In the picture: cur:1. The image you draw in the drawing area is frame 2 (programmers count from 0 as we all know).

The plus sign on the right-hand track

Is used to add a new frame to the corresponding track

Common Situation 1:

At cur: 0,0, you have drawn the closed shape, and you want to draw the second shape, and if you don’t add a new frame, or if you don’t switch to cur: 1, you can’t draw a new shape, and you can’t draw a new point no matter how much you click on the screen. GIF! [pop4. GIF] (upload – images. Jianshu. IO/upload_imag…

The toolbar:

From top to bottom:

choose

Currently it is mainly used for dragging and inserting pictures. More features will be updated in the future……. PS: You can also drag an image in the pen state, but when you move the image to the drawing layer (the gray box defaults to 800×400 px) because the drawing layer is above the image layer, you have to use the Selection tool to drag the image

The pen

Draw the clipping screen by clicking in the drawing layer.

To withdraw

Retracts the last drawn point

forward

Return to the last point you accidentally retracted

Insert the picture

The inserted image can be enlarged, reduced and resized for the user to trace points on the top of the image, like photoshop

Preview animation

Click to view the animation you have drawn.

Exporting CSS Code

Export a string of CSS code with clip-path that you can use directly on your website

Resize the canvas

In fact, the most important thing is to adjust the proper aspect ratio, since the use of % as a unit in clip-path was described earlier.

Part4 See some good works using clip-path?

Page bar, note the switch between numbers:

codepen:Codepen. IO/ainalem/pen…

Fragmentation rotation :(it’s not too much to advertise)

Jane:www.jianshu.com/p/d1b1812a2…

Olympics 2020

codepen:Codepen. IO/ainalem/pen…