JS implements WeChat's "shit bombing" function

Hello everyone, I am Qiufeng. Recently, WeChat has released a new feature (updated to WeChat 8.0.6). The most popular function is undoubtedly the "shit explosion" function, and various groups have started to use the shit explosion function.

I don’t know if you have ever experienced such a time. When I was a kid (I mean when I was very young, when I was still in elementary school), I also tried this kind of evil fun during the Chinese New Year. I didn’t expect that WeChat would make an online version of it. Even the creator of the product made fun of this functional invention. However, if we can create a function that allows everyone to have fun, then the significance of the product is worth it.

Previously, when WeChat 8.0 was updated, I also wrote an article titled "Teaching you how to achieve the 'explosive' fireworks emoticon effects in WeChat 8.0". In a previous article, I used canvas to implement this. Someone commented at the end of the article that similar functions can be achieved through lottie . In fact, I am quite interested in this, but I have never tried it. This time I want to use a new way, lottie , to achieve this function.

Effect experience:

https://example.qiufeng.blue/wechat-feces/3-2-feces.html

Github address:

https://github.com/hua1995116/node-demo/tree/master/wechat-feces

Step Breakdown

Any object is made up of smaller objects, so if we want to achieve the above functions, we naturally have to do it step by step. I roughly broke down the above functions into the following four steps. Each of them is not too difficult, and it can be said that even a front-end novice can easily implement it.

1. Drop the bomb

In this step, we can use the knowledge of quadratic functions to write a trajectory path (similar to y = $x^2$), and then use tween.js to do tween animation.

2. Bomb Explosion

Use lottie to realize animation.

3. The poop was blown up

Using css animation

4. Everyone is shocked

Using css animation

Summarize

The above is the general idea we want to talk about. Maybe you are already familiar with some of the implementations of them, so you can skip some of them. With the above ideas in mind, let's start to put it into practice.

Specific implementation

1. Drop the bomb

If we observe carefully, we can see that the trajectory of the bomb is actually a parabola. If we want to achieve this function, we can easily think of quadratic functions.

First, let's look at the definition of a quadratic function.

Generally speaking, a function of the form y=ax²+bx+c (a≠0) (a, b, c are constants) is called a quadratic function.

This is how it is expressed in terms of images.

Obviously this is very similar to the trajectory we want.

Because the normal Cartesian coordinate system has the y-axis pointing vertically upward and the x-axis pointing horizontally to the right. For DOM positioning, the upper left is (0, 0), the horizontal right is the positive x axis, and the vertical downward is the positive y axis. The coordinate system is simply flipped along the x-axis.

So we just need to determine a quadratic function and we can get the trajectory. Since the general term of a quadratic function has three unknowns, we only need to know three points to determine a quadratic function. Let's assume that our quadratic function looks like this.

Our three points are (0,H), (H,0), (3H, 3H) We can get the following formula by substituting the general term:

Then solve

get:

Therefore, we only need to get the height of the highest point of the bomb from the "shit" to draw the entire trajectory.

Now suppose our bomb is a small square of 10px * 10px, and the starting point is set to (300, 300) and the end point is set to (0, 100) H=100. At this time, the quadratic function we get is:

We can get the following trajectory animation:

To render each frame of animation, we used the famous tween animation library Tween.js. Tween (animation) is a concept that allows you to change the properties of an object in a smooth way. You simply tell it which properties to change, what final values ​​they should have when the tween finishes running, and how long that should take, and the tween engine will take care of calculating the values ​​from the starting point to the ending point.

var coords = { x: 300 }; // The starting point is x = 300
var tween = new TWEEN.Tween(coords)
	.to({ x: 0 }, 1000) // The end point is x = 0, and the action will be completed in 1 second.easing(TWEEN.Easing.Linear.None) // Constant speed

With the above definition, we can get the x value of each change in onUpdate , and then get y through the above quadratic function, and then update the small square.

tween.onUpdate(function() {
    var x = coords.x;
    var y = 1/120 * x * x - 11/6 * x + 100;
		box.style.setProperty('transform', 'translate(' + x + 'px, ' + y + 'px)');
})

At this point, the effect we have completed is still missing something. Just like painting, we only drew the skeleton, and we need to wrap it and color it. Next, we only need to do the following two things, and then we can see the effect~

1. Replace the square with a bomb. The shape of the bomb is very simple, and we can use PS to cut it out of the layer.

2. Modify the angle of its movement.

Complete code for this section: https://github.com/hua1995116/node-demo/blob/master/wechat-feces/1-2-animation.html

2. Bomb Explosion

Then let’s talk about the effect of the bomb explosion. As mentioned above, I want to use lottie to write the animation, so what is lottie ?

Lottie is a library that can parse animations made with AE (need to be exported to json format using bodymovin), supporting web, ios, android and react native. On the web side, the lottie-web library can parse the exported animation json file and draw the animation into our page in the form of svg or canvas.

Then I went to https://lottiefiles.com/ and found a json explosion special effects file.

Its writing is very simple. You just need to import lottie and then call bodymovin.loadAnimation method.

<script src="https://cdn.bootcdn.net/ajax/libs/lottie-web/5.7.8/lottie.min.js"></script>
</head>
<body>
<div class="bodymovin"></div>
<script>
    const animation = window.bodymovin.loadAnimation({
        container: document.querySelector('.bodymovin'), // The DOM element to contain the animation renderer: 'svg', // Rendering method, svg, canvas, html (the lightweight version only renders svg)
        loop: true, // Whether to play in a loop autoplay: true, // Whether to play automatically path: './bomb.json', // animation json file path });
</script>

Therefore, we only need to call the explosion effect immediately after the parabola is completed, and tween.js also provides me with the event method onComplete . We just need to start the explosion animation in onComplete callback.

tween.onComplete(function () {
  // Write explosion animation}) 

Complete code for this section: https://github.com/hua1995116/node-demo/blob/master/wechat-feces/2-2-lottie.html

3. The poop was blown up

3.1 Shape

Similarly, Bomb uses PS to cut out a transparent layer of "baba", just like this. (It doesn’t matter if there are some burrs. The actual poop is not that big, so it is not easy to see the burrs. You can also fix it by fine-tuning it.)

.feces {
  position: absolute;
  background-image: url(./feces.jpg);
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  width: 80px;
  height: 80px;
  transform-origin: center;
}

// Create a baba element function createfeces(scale = 1) {
  const fece = document.createElement('div');
  fece.className = 'feces';
  // Since poop can be big or small and has directions, values ​​are reserved.
  const symbol = Math.random() > 0.5 ? 1 : -1;
  fece.style.transform = `scale(${scale * 1.1}) rotate(${symbol * 20 * Math.random()}deg)`
  return fece;
}

3.2 Location

We can see that poop flew out from the explosion. There are mainly 7 poops flying out. The middle one is the largest, and the others get smaller as they are farther away from the center. The arrangement is similar to a circle, but not so regular.

Therefore, we can first achieve this in the simplest way, which is to surround it in a circle. A circle is 360°, so we just need to divide it into 6 equal parts. We are surrounding a total of 6 balls, so there is 60° between each one.

Since the bomb above is roughly a 300 * 300 area, I set the coordinates of the center to (150,150), and then randomly generate an x ​​point from 70 to 230, and then calculate the y value. After determining the first point, the angle between each point is 60°, and the remaining 5 points can be calculated.

Since it is troublesome to calculate with the center point (150,150) as the center of the circle, I moved the center point to (0, 0) for calculation, and finally translated all the calculated points by 150 along the x-axis and y-axis.

// Calculate the positions of multiple poops to be generated // The parameter num passed in is the number of poops to be generated function randomPosition(num) {
  const radius = 80; // Circle radius const randomX = Math.random() * radius // Take any x from 0 to radius
  const y = Math.round(Math.sqrt(radius * radius - randomX * randomX)); // Determine a point on the circle in the first quadrant const radian = Math.atan(y / randomX); // The radian value of this point const step = Math.PI * 2 / num; // The radian value of each pile of shit return new Array(num).fill(0).map((item, index) => {
    const r = (index * step + radian)
    // Convert radians to 0 - 2 * PI
    const tr = r > Math.PI * 2 ? r - Math.PI * 2 : r < 0 ? r + Math.PI * 2 : r;
    return {
      x: radius * Math.sin(tr),
      y: radius * Math.cos(tr),
    }
  })
            
} 

Then we draw according to this idea, draw 6 poops, and then translate 150 degrees along the x-axis and y-axis respectively.

randomPosition(6).map(item => ({ x: item.x + 150, y: item.y + 150 })) // You can also define more than 6 here 

It seems a bit like that, but all of them are the same size, so we need to deal with it and scale the size according to the distance from the center. I roughly wrote one. Because the radius of the circle is 80, every increase of 80 will make the size of the poop become 2/3 of the original.

const dis = Math.sqrt((end.x - 150) * (end.x - 150) + (end.y - 150) * (end.y - 150)); // Since it has been translated 150 degrees, it is necessary to calculate the distance from the center point const r = Math.pow(2/3, dis / length); // The ratio to be scaled 

However, in real scenes, our placement will be more random, so I added a random value to the position of each poop, and the center poop will be more biased towards the upper left corner, and also added a certain random value.

function randomPosition(num) {
...
return new Array(num).fill(0).map((item, index) => {
  const r = (index * step + radian)
  const tr = r > Math.PI * 2 ? r - Math.PI * 2 : r < 0 ? r + Math.PI * 2 : r;
  return {
    // Add random value x: length * Math.sin(tr) + (Math.random() > 0.5 ? 1 : -1) * 10 * Math.random(),
    y: length * Math.cos(tr) + (Math.random() > 0.5 ? 1 : -1) * 10 * Math.random(),
  }
})
} 

3.3 Angle

Finally, we just need to embellish the angle of each baba.

function createfeces(scale) {
  const fece = document.createElement('div');
  fece.className = 'feces';
  const symbol = Math.random() > 0.5 ? 1 : -1; // Generate a random angle between -20 and 20 fece.style.transform = `scale(${scale}) rotate(${symbol * 20 * Math.random()}deg)`
  fece.style.opacity = '0';
  return fece;
} 

3.4 Animation

Since this is similar to dropping a bomb, I won’t go into detail. It should be mentioned that since the poop comes out from the bomb position first and then slowly comes down, we need to use two Tween animations here.

// The animation of the initial appearance, rushing out from the explosion hole function initFece(end) {
	...
  const start = { x: 0, y: 100, z: 0 }; // explosion point const tween = new TWEEN.Tween(start)
  .to({ ...end, z: 1 }, 100)
  .easing(TWEEN.Easing.Linear.None)
  .onUpdate(function () {
    fece.style.setProperty('top', `${start.y}px`);
    fece.style.setProperty('left', `${start.x}px`);
    fece.style.setProperty('opacity', `${start.z}`);
  })
  .onComplete(function () {
    initDown(start, fece).start(); // Punch out completed, perform falling transparent animation})
  return tween;
}
// Falling and becoming transparent animation function initDown(start, fece) {
  const s = {
    y: start.y,
    o: 1,
  };
  const e = { y: start.y + 80, o: 0 };
  const tween = new TWEEN.Tween(s)
  .to(e, 2000 + 500 * Math.random())
  .easing(TWEEN.Easing.Quadratic.In)
  .onUpdate(function () {
    fece.style.setProperty('top', `${sy}px`);
    fece.style.setProperty('opacity', `${so}`);
  })
  .onComplete(function () {
  })
  return tween;
}

Final effect

Complete code for this section: https://github.com/hua1995116/node-demo/blob/master/wechat-feces/3-2-feces.html

3.5 Summary

Since this section is quite long, let’s summarize the knowledge

• First, use the characteristics of the circular trajectory of 1 = x² + y² to establish the initial position
• By adding random values, the distribution is made slightly less regular.
• Add random angles to the poop
• Make the center closer to the explosion point
• Add chained animations to appear and fall

4. Everyone is shocked

This function can be achieved with simple CSS animation. I will not go into details here. If you are interested, you can implement it and put it in the comments~

Conclusion

This is purely an exploration out of curiosity about this effect, not a 100% restoration of the animation. I am not an animation programmer, and this is my first time using the above library, so my writing may not be very professional (if you have any questions, please point out any errors in the comment section). But I hope to provide you with an interesting idea. When making animations, you can use lottie and tween libraries, simplify complex problems, turn irregular things into regular things, turn complex things into simple things, and finally deepen them step by step. I would also like to thank Nanxi for proofreading this article.

This is the end of this article about how to use JS to implement the WeChat "shit bombing" campaign. For more relevant js WeChat "shit bombing" campaign content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!