Hello everyone, I am Han Cao 😈, a grass code ape 🐒. Intermittent warm blood 🔥, continuous sand sculpture 🌟 if you like my article, you can follow ➕ to like it, and grow with me ~ add my wechat: Hancao97, invite you to join the group, learn to communicate with the front end, become a better engineer ~

Small knowledge, big challenge! This article is participating in the “Essentials for Programmers” creative activity. This article has participated in the “Digitalstar Project” to win a creative gift package and challenge the creative incentive money.

preface

A few days ago, my colleague in the next group asked us whether our leader had done sequence frame animation. My dear leader pushed me out directly: “Cold grass meeting!” “Later sent me a screenshot of their conversation and expressed trust in me.

I was like, “Hey? I didn’t do it!” .

Then I started googling, did a search, and started coding sequence frames.

implementation

animation

I must have made a demo with animation at the very beginning.

Note the steps property in the animation, which is also used to realize the frame animation.

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Document</title>
  <style>
    @keyframes demo {
      0% {
        background-position: 0px 0;
      }

      10% {
        background-position: -20px 0;
      }

      20% {
        background-position: -40px 0;
      }

      30% {
        background-position: -60px 0;
      }

      40% {
        background-position: -80px 0;
      }

      50% {
        background-position: -100px 0;
      }

      60% {
        background-position: -120px 0;
      }

      70% {
        background-position: -140px 0;
      }

      80% {
        background-position: -160px 0;
      }

      90% {
        background-position: -180px 0;
      }

      100%{}}.animation {
      background-image: url('a.jpeg');
      background-repeat: no-repeat;
      height: 200px;
      width: 200px;
      position: absolute;
      top: 200px;
      left: 300px;
      border-radius: 50%;
      -webkit-animation: demo 1s steps(1, end) infinite;
    }
  </style>
</head>

<body>
  <div class="animation"></div>
</body>

</html>
Copy the code

That’s what it looks like

Then I felt confident enough to complete the sequence of frames. Then I found out that the material I got was:

180 pictures in 30 meters, I’m stupid!

I refuse to write 180 states for keyframes!

So I came up with the following JS method.

Js solution a

Company material cannot be used, so no effects are shown here.

I thought that I could not write 180 states, so I decided to use JS and set a timer to replace the URL of the background image after loading all the images.

const dom = document.getElementsByClassName('animation') [0];
    let promiseAll = []
    let img = []
    let imgTotal = 180;
    for (let i = 0; i < imgTotal; i++) {
      promiseAll[i] = new Promise((resolve, reject) = > {
        img[i] = new Image()
        img[i].src = `. 59 / asset/marshalling @ 2 x_00The ${String(i).padStart(3.'0')}.png`
        img[i].onload = function () {
          resolve(img[i])
        }
      })
    }
    let current = 0
    Promise.all(promiseAll).then((img) = > {
      setInterval(() = > {
        current = (++current) % 180;
        dom.style.backgroundImage = ` url (' asset/marshalling 59 @ 2 x_00The ${String(current).padStart(3.'0')}.png')`
      }, 40)})Copy the code

Note two details here:

  • PadStart usage (I rarely use this API)
  • Handle image loading with Promise
  • I set the time to 40 ms because I wanted at least 24 frames per second to ensure smooth flow

But there’s a problem:

On a low configuration computer, the screen flashes when opening the console… I am very confused

Js 2

Now I still don’t understand. If someone knows the reason, you can comment or friend me and tell me. The possible reason I think of is as follows:

  • Image too large, background image switching rendering consumption

After all, I don’t open the console, and I won’t flash the screen when I don’t operate frequently. But guess is just guess. After all, I’m a vegetable dog

I thought of many ways, such as:

  • Put 180 images together, just change the background-position
  • 180 DOM, then modify the transparency of the DOM

In the end, I took the second method, which was not lame and tacky, because I thought the DOM was already rendered, and I only needed to change the transparency of two DOM at a time, so there was not much performance pressure.

  • The PREVIOUSLY displayed DOM is hidden
  • The next DOM is displayed
let promiseAll = [];
    let imgList = [];
    let imgTotal = 180;
    for (let i = 0; i < imgTotal; i++) {
      promiseAll[i] = new Promise((resolve) = > {
        imgList[i] = new Image();
        imgList[
          i
        ].src = `. 59 / asset/marshalling @ 2 x_00The ${String(
          i
        ).padStart(3."0")}.png`;
        imgList[i].onload = function () {
          resolve(imgList[i]);
        };
      });
    }
    let current = 0;
    let domList = [];
    const domWrapper = document.body;
    Promise.all(promiseAll).then((imgList) = > {
      for (const img of imgList) {
        const domItem = document.createElement('div');
        domItem.classList = 'animation';
        domItem.style.backgroundImage = `url(${img.src}) `;
        domItem.style.backgroundSize = "308px 669px";
        domItem.style.opacity = 0;
        domWrapper.appendChild(domItem);
        domList.push(domItem);
      }

      setInterval(() = > {
        domList[current].style.opacity = 0;
        current = ++current % 180;
        domList[current].style.opacity = 1;
      }, 40);
    });
Copy the code

conclusion

Write in the last

In spring, flowers fall in colors

Gardenias bloom in summer

Three changes of hibiscus in autumn

Winter is dark

Spring, summer, autumn and winter

The cherry blossom

gardenia

hibiscus

wintersweet

Flowers bloom and fade

Only you, always in my heart

If you like my article, like it and follow it is the biggest encouragement. You can also add my friend: Hancao97 to have in-depth communication with me