Shulou(Shulou.com)06/02 Report--

How to achieve Javascript BOOM animation effect, I believe that many inexperienced people do not know what to do, so this paper summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

Origin

A few days ago, I saw such a small project by a colleague on github, which realized such a small animation effect on IOS. It looks pretty cool, and the effect picture:

I wondered how to implement it with Javascript in a browser environment.

Driven by strong curiosity, I finally use Javascript and CSS3 to simulate the above effect. By calling the method, the picture on the page can be exploded with one click. I gave it the name boomJS and posted an effect picture:

Realize

I think the effect is OK, because I don't use canvas, so I can't get the color value of each pixel on the picture. Using some sha (bi) methods, here is a brief description of how to achieve it:

1. Construct a new graph container and hide the original image.

The original image is a label map, a whole picture, and the final effect is not boom on the original image, of course. The seemingly continuous animation is essentially a cover, and some clever changes are made with Javascript, so what * steps do is take the height and width of the original image and the positioning relative to the browser window, and then create a new container attached to the original image, and then hide the original image.

In this method, I mainly use the getBoundingClientRect method, which returns the size of the element and its position relative to the viewport, which meets my needs.

Well, what did you do with this step? The simple ones are as follows:

2. Generate small fragmented pictures one by one

* the effect is that the image boom splits at once, so the second step is to simulate a small image, where each piece is a new div, and then use the positioning background-position of the image to locate it to the appropriate location. Hey, look at the effect:

As you can see, here it is divided into many small pieces, each of which is actually a div, and then these small pieces are added to the container we set up in the previous step, and then the background image of the div is set using the original image. All div uses the original image as a background image, and then the image positioning can achieve such an effect. It is very simple to say, but there is a lot of calculation in the middle, how to divide the image. The width and height ratio of the picture (horizontal or vertical), the positioning of each small div and the positioning of the small div background image, you can take a look here: boomJS.

In order to look good, a fillet is set, but if it explodes like this, it doesn't feel real enough, and the picture is clearly discernible piece by piece. So using zoom scale, randomly enlarge or shrink each small piece, and then see what the zoomed effect looks like:

Well, it blurs a lot, and the effect is further enhanced, so it explodes more realistically.

3. Boom explodes!

Well, when it comes to the exciting step, all you have to do is set a trajectory for each small piece of div and explode at the same time.

The process is quite tedious, it is necessary to calculate the center point of the picture first, and then each div block moves outward with the center as the reference point. I have to say that I specially made up my high school geometry knowledge (embarrassed). In order to make the effect more realistic, add a random number with appropriate positive and negative values to the straight line distance of each div block, so that some blocks can be fried farther and some blocks closer. Use small unscaled pictures to make a rough sketch:

At the moment of the explosion, let each small piece of gradient disappear, and you can achieve the effect shown in Gif above.

In fact, there are many details not mentioned in the process, the more important is the timing control triggered by animation, because recently in the study of jQuery source code, simply use the queue of jQuery to control the timing.

After reading the above, have you mastered how to realize the BOOM animation effect of Javascript? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.