Fragment from the face -- first experience of 3D split-up of images-Tomato

Fragment on the surface -- 3D split effect on the image first experience-ChokCoco's explosive effect works are displayed when you visit the garden before the tomato fruit: [BOOM] An interesting Javascript animation effect. effect). The effect is as follows:

However, I think this explosion effect is still a little soft, and I don't feel like it is a splash of fragments. I have never forgotten that I want to make a 3D explosion effect myself. In the past two days, we have made some small animations. By the way, we have made 3D explosions. The animation effect is as follows:

Implementation

The principle is very simple, that is, to use a lot of small pictures to piece together a large image, and then let the small pictures follow a certain regular motion to form an explosion effect. The explosion effect here is produced by using the 3D transformations of CSS3, and animations are formed by dynamically changing the transformation parameters through js. Implementation steps:

1. Image patchwork

This step is relatively simple. It uses a lot of background images of p tags to piece together. You can set the position and background-position of each p tag. Note that you must add all the p tags in innerHTML at one time. Although the image is not directly displayed here, a new image is added here and the image is pieced together and executed in the load event. The Effect and code are as follows (the actual effect is not a grid line ):

Var img = new Image (); img. src = 'img/zoro.jpg '; // 160*160, or you need to change wrapper's sizeimg. onload = function () {var x = y = 0, p = styleCtn = '', imgWidth = this. width, imgHeight = this. height, pwidth = pheight = 10, nx = Math. floor (imgWidth/pwidth), // number of particles in the x direction ny = Math. floor (imgHeight/pheight), // number of particles in the y direction wrap = document. getElementById ('zd-wrap'); for (var I = 0, num = nx * ny; I <num; I ++) {x = (I % nx) * pwidth; y = Math. floor (I/ny) * 10; styleCtn = 'left: '+ x + 'px; top:' + y + 'px; background-position: '+ (-x) + 'px' + (-y) + 'px; '; p = p +'
';} Wrap. innerHTML = p; // Add image };

View Code

2. Explosion Effect

This step is much more difficult, because it is a three-dimensional movement, which can be divided into translation and flip.

A) translation movement: the explosion in a three-dimensional space should be like this:

The returned flat space should be like this:

The movement direction of a small part can be summarized. The movement direction varies according to the position of the small part. The upper left corner shows the upper left corner, and the lower right corner shows the lower right corner. Some small pieces should fly to the screen, and some may stay away from the screen to highlight the face. In programming, translate3d is used to show the motion of each axis. Pay attention to the coordinate relationship between the screen and the image. The Y axis of the screen is the vertical direction in reality, the downward direction is positive, and the Z axis is the user-oriented direction. Sports are summarized as follows:

Upper left corner: vx <0, vy <0, vz random

Bottom left: vx <0, vy> 0, vz random

Upper right corner: vx> 0, vy <0, vz random

Bottom right corner: vx> 0, vy> 0, vz random

There is no strict half-score in the Y direction, and there is a general upward feeling. Acceleration imitation needs to imitate gravity: vxa = 0, vya = 0.5 (imitate gravity), vza can be appropriate to add, can enhance the feeling of the face.

B) flip

The flip effect is the rotation of the X axis. To make the effect more realistic, the Y axis rotation must be introduced. The rotation of the z axis can be ignored. Because the size of small particles is small, you do not need to strictly control the rotation parameters here. On the one hand, you can simplify the model and reduce the browser load. Of course, you do not need to introduce the rotation variable. Using the coordinates of x and y can also get a good turning effect: rotateX (xdeg) rotateY (ydeg ), here I reference the Zachstronaut algorithm:

rotateX: Math.cos(0.1 *ys) + 'radrotateY: Math.sin(0.1 * xs) + 'rad

Finally, you can set the termination condition to determine whether to exit the animation Loop Based on the x and y coordinates of the small particle blocks.

In this way, the animation is implemented. Of course, you must enable the perspective attribute of the parent object. You can set the perspective distance to about PX.

Remarks

The size of the image I used is 160*160, and the particle size is 10*10. It is excellent in iOS and mobile chrome is also good. Although GPU acceleration rendering has been called, many domestic mobile browsers have reached the upper limit, so we do not recommend increasing the number of particles. Performance improvement is also done, but no good breakthrough point is found. If you have a better idea, please contact me!

Time consumption test:

We can see that the bottleneck is Painting. If we break it down, we will mainly restructure the layers. Next, let's take a look at the animation process:

We can see that at the very beginning there was a dense green box, that is, a lot of painting flashing ). Let's look at the background image patchwork method at the beginning, using absolute positioning + left + top, which will lead to a lot of re-painting. Although you can use a translate3d (0, 0, 0) at the beginning to limit the rendering layer to make the green box disappear, it does not have much effect, because it mainly takes time to merge layers, it is not a painting. Layering is required. I have also tried to use translate to replace left + top, but the effect is not ideal. I have not come up with a better way to improve the rendering performance ......

DOM operations can be further improved. The code for the dynamic effects is:

 this.nodes[i].style[this.transformProperty] = 'translate3d(' + this.xs[i] + 'px, ' + this.ys[i] + 'px, ' + this.zs[i] + 'px) rotateX(' + Math.cos(0.1 * this.ys[i]) + 'rad) rotateY(' + Math.sin(0.1 * this.xs[i]) + 'rad)';

Dom is operated every time in the loop, and the attribute search method is still used for setting the style, which should be improved here. First, rewrite the style to avoid searching for attributes. Second, rewrite the innerHTML in the parent object p, just like setting the background at the beginning, to update all particle blocks at a time.

However, during step-by-step debugging, I found that, except for the first execution, the attributes of the particle block will be set one by one, and all subsequent animation loops have been optimized by the browser to be overwritten as a whole, each update is a full update, so the above method does not seem to be much better. I did not really think of other optimization methods. If you have any ideas, please contact me!

How to Use

The source code has been put on GitHub (bomb. js). If you are interested, you can take a look at fork and find the stars!

I have encapsulated js + HTML + CSS. After setting the container, you can directly reference bomb. js, as shown below:

View Code

This is where the code is written. It is not easy to use ~~~

References:

1) [BOOM] An interesting Javascript animation effect

2) Front-end performance optimization (CSS animation)

Http://www.zachstronaut.com/

(Image Source: xiaozhou)

Original article. For more information, see the source! Link: http://www.cnblogs.com/qieguo/p/5491192.html