PhysicsEditor applies to the CLIp-path polygon CSS property

origin

I happened to see In Pieces, a foreign website with the theme of animal protection, and found that the main animation effects are achieved by using the CSS property clip-path. The following is a partial animation

The Making Of “In Pieces” : Designing an Interactive Exhibition With CSS Clip Paths

Each animal is made up of triangles. Triangles are created by clip-path polygon cutting divs, stacking divs together, adding the transition attribute, and then changing the polygon path to create an animation. As for how to use clip-path Polygon to form animation transform, you can refer to “CSS3 Clip-path Polygon Graph Construction and Animation Transform two or three Things” by Zhang Xinxu. We will not expand too much here.

The author manually obtained and recorded the polygon path of each triangle. The process was a bit tedious, and it was even more troublesome when it came to complicated graphs. Based on the idea of improving efficiency (TOU) rate (LAN), we searched for auxiliary tools and found PhysicsEditor, which is briefly introduced below

The software is introduced

PhysicsEditor is a physical shape editor for 2D game projects. It can edit 2D collision polygons and physical parameters. Essentially, it describes shapes and exports data

How to use

1. Drag the target image directly to the left side of the software

2. Click the magic wand tool to pop up the parameter interface, adjust the tolerance parameter to keep each graph with the same number of Vertexes, and click OK

3. Select Panda 2 as the data format in the right column

4, add collision parameters and name (can be ignored)

5. Click Publish to export data

Note: Different clip-path polygon graphs can smoothly switch on the premise that there are the same number of Vertexes. If adjusting tolerance fails to achieve the goal, nodes can be added and deleted manually in the editing interface

Then get the number of points in JSON format

"ani3_00000": {
    "body": {
        "damping": 0.1."gravityScale": 1."mass": 1."size": [750.525]},"shapes": [{"name": ""."sensor": false."collisionGroup": 1."collisionMask": 1."type": "poly"."polys": [[521.000.134.000 , 511.000.137.000 , 517.000.127.000[]}]},Copy the code

Polys array records the position information of vertices. Here, the code is used for simple processing. The main principle is to connect point sets end to end to form a complete graph.

clipSignleGraphics (data, percent, reverse) {
    letend = ! reverse ? [] : ['0%'.'0%'.', '.'0%'.'100%'.', '];
    let bodySize = data.body.size;
    let shapes = data.shapes;

    let clacPos = (x, y) = > {
        return [(x / bodySize[0] * 100).toFixed(2) + The '%'.' ', (y / bodySize[1] * 100).toFixed(2) + The '%'];
    };

    shapes.forEach(ele1= > {
        if(ele1.type ! = ='poly') return;
        let polys = ele1.polys;

        reverse && (end = end.concat(clacPos(polys[0] [0].0) [0].'100%'.', '));

        polys.forEach(ele2= > {
            // When multiple triangles are divided, close the starting points of each triangle
            (polys.length > 1 || shapes.length > 1 || reverse) && (ele2 = ele2.concat(ele2[0], ele2[1]));

            // Return to the beginning of the first shape at the end of each shape
            shapes.length > 1 && (ele2 = ele2.concat(shapes[0] ['polys'] [0] [0], shapes[0] ['polys'] [0] [1]));

            for (let index = 0; index < ele2.length; index += 2) {
                end = end.concat(clacPos(ele2[index], ele2[index + 1]), ', '); }}); reverse && (end = end.concat(clacPos(polys[0] [0].0) [0].'100%'.', '));
    });

    reverse && (end = end.concat(['100%'.'100%'.', '.'100%'.'0%'.', ']));

    end.pop();
    return end.join(' ');
}
Copy the code

After passing in this function

'52.4% 53.05%, 52.4% 34.86%, 67.07% 38.57%';
Copy the code

Assign the clip-path polygon property to the corresponding div

for (let index = 32; index >= 0; index--) {
    setTimeout(() = > {
        let div = divall.eq(index);
        div.css('clip-path'.'polygon(' + this.clipSignleGraphics(data[0][data[1] + pad(index, 5+)])') ');
        div.css('background-color', data[2][index]);
    }, index * 20);
}
Copy the code

Record the position of each triangle and finally switch the polygon data for each animal when clicking to get the following effect (original on the right)

Other USES

In addition to this kind of single-triangle animation, irregular graphics also work well

1. Let’s say there’s an outer border like this

After PhysicsEditor edits and exports the data, you can crop the excess parts of the image

Note: Only cropping is done. If there is no animation requirement, you can also use the mask-image property of CSS. See details”Dramatically Optimizing PNG image size with CSS Mask”

2, the use of different graphics switching effect to achieve smooth continuous prompt:

A hollow algorithm is used here, and the principle is to join the sequence of points in reverse order

hollow (data) {
    let end = '0% 0%, 0% 100%, ';
    data.forEach(ele1= > {
        let arr = ele1.shape;
        let st = arr[0] / 100 + 'rem 100%, ';

        arr.push(arr[0]);
        arr.push(arr[1]);

        arr.forEach((ele2, idx) = > {
            let fix = (idx % 2) > 0 ? 'rem, ' : 'rem ';
            st += ((ele2 / 100) + fix);
        });

        st += (arr[0] / 100) + 'rem 100%,';
        end += st;
    });
    let aaa = end + '100%, 100% and 100% 0%';

    return aaa;
}
Copy the code

conclusion

With tools, you can reduce the amount of rework and focus on detail and creativity. This article is just a glimpse into PhysicsEditor and Polygon, and you’re welcome to explore more possibilities and post your thoughts

To learn more

The application of PhysicsEditor in the CLIp-path polygon CSS property