A few days ago, my friend introduced a cool website www.species-in-pieces.com/ F12. I looked at the Dom structure and found that the author only combined the clip-path and transition features of CSS3 to achieve a great effect. Every transition and animal detail is well done.

Then I made a Demo according to my own understanding, and packaged the core JS part, welcome interested friends to communicate with us

Demo for ani-clipath

In the Demo pictures from www.behance.net/tomanders, I just did lower edge processing

Preview address:Luosijie. Making. IO/ANI – clipath…

Source code address:Github.com/luosijie/an…

The implementation process

Start with a simple clip-path transformation

Clip – path animation


      
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>simple move</title>
  <style>
    .polygon{
      width: 600px;
      height: 300px;
      background-color: black;
      clip-path: polygon(20% 30%, 0 70%, 40% 70%);
      animation: move 1s infinite alternate;
    }
    @keyframes move {
      to {
        background-color: grey;
        clip-path: polygon(80% 70%, 100% 30%, 60% 30%); }}</style>
</head>
<body>
 <div class="polygon"></div>
</body>
</html>Copy the code

This is the basic animation morphing + color change required in the Demo, but how to build beautiful graphics changes requires a little imagination and design ability

design

We need to design a satisfactory low-edge pattern first, pay attention to control the number of triangles, as little as possible, as little as possible, as little as possible, as little as possible

shark

shark

shark

Next, you need to convert the coordinates and color values of each triangle into a data format. At present, I can’t find a very efficient way to transform, so I used the labeling software to mark and input by hand. Finally, I drew three pictures and finished. So as few triangles as possible, as few triangles as possible, as few triangles as possible.

Or you have a good way to introduce, please let me know.

Graph to data

The preparations are now complete and the worst is over

Since the code

The basic idea of code implementation is this

  1. Each animal is made up of 36 different-colored triangles, so 36 divs are required to display
  2. Each change reassigns the clip-path property of 36 divs
  3. Each div has the transition property set to make the transition automatic

Just a few lines of code will not be posted, interested in github

But I’d like to explain how to use a packaged plug-in

The installation

CDN

<script src="https://unpkg.com/ani-clipath/dist/ani-clipath.min.js">Copy the code

NPM

npm install --save ani-clipathCopy the code

use

You need to customize a DOM container and set width and height

<style>
  .shapes{
    width: 800px;
    height: 600px;
  }
</style>.<div class="shapes"></div>Copy the code

Initialize an instance and pass in parameters

parameter type instructions
el String Bind DOM container
speed Number Control rate of change
delay Number Control the delay of change
shapes Array Coordinates of a low-edge graph

Use the public method to switch

methods instructions
next() Switch to the next figure
previous() Switch to the previous figure 
<script>
  var aniClipath = new AniClipath({
    el: '.shapes'.speed: 1000.delay: 30.shapes: data
  })
  setInterval(function(){
    aniClipath.next()
  },3000)
</script>Copy the code

Data format for the Shapes property

varData = [the first1Low edge graph [// Basic graphics parameters
    { 
      / / color
      c: '#1A1A1A'./ / polygon coordinates
      p: [ { x: '50%'.y: '30%' }, { x: '30%'.y: '70%' }, { x: '70%'.y: '70%'}}]... ] In the first2Low edge graph [{c: '#E6E6E6'.p: [{x: '50%'.y: '70%' }, { x: '30%'.y: '30%' }, { x: '70%'.y: '30%'}}]... ] . NTH low-edge graph]Copy the code

That’s it. Welcome star