Jquery simulates the Dodge effect of ubuntu 3D Desktop

Yesterday, I saw a demonstration video of ubuntu 3D desktop on Weibo. You can check it out. I am very interested in one of the results. I checked the information and it should be called dodge effect. On that evening, I made a demo to achieve this effect. Let's look at the demo below. You can click each color block to switch between different windows.

Next I will briefly introduce my development ideas to you. Because it is not implemented simply by modifying the Z-index value of a div and adding the animation effect, we must clarify our thinking first.

First, let's do the simplest thing, that is, without the animation effect. There is nothing to say about this step, and there is no technical content. Let's take a look at the demonstration.

After completing this step, let's go back and think about the animation effect? When I click a window under it, the window that overwrites it slides to the object one by one.

OK, know what to do next, that is, how to determine which windows are on the top of the click object, because Windows may be discharged side by side, not stacked together, in this way, the animation effect should not appear during the switchover.

As for how to judge, it is actually very simple. Based on the four-corner coordinate, see

If we want to click the blue window, there will be four red windows covered above. We can see that each of the four red windows has an angle in the blue window.

In this way, we can figure out the concept as long as the Z-index value of the window is greater than the clicked window, and the coordinates of one of the corners of the window are within the clicked window, then, you can determine that the window is overwritten by the clicked window. For more information, see the demo. When you click a window, alert will display the color of the window that overwrites it.

After the above functions are completed, we can screen out which forms are covered at the top of the clicked form. Based on the story, will the next generation be animated?

Slow down. Don't worry. There is another job you haven't done. Let'sRollGo back to the above page and check the animation effect again. ("Roll" of the scroll bar ")

It can be observed that some window animations move to the left, while others move to the right. How can we determine which animation moves to the left and which animation moves to the right? By the way, it is determined by the central axis.

Suppose we click the red window and overwrite a total of two blue and yellow windows above it. One spindle is located on the left of the center axis of the red window, and the other is located on the right, then we can follow this to determine the direction in which the animation window should move.

In the following example, you can click different windows to view the prompt information.

In addition to knowing which direction to move, we also need to know how much distance to move. I will not elaborate on it. Let's just look at the demo.

After completing the steps above, we will finally start to write an animation. (We can put some of the above statistics into an array object, such as the form ID to be moved, or the class name, in what direction, and how far to move)

The idea is nothing more than a loop object array, which binds the animation of the form to be moved in sequence. The only thing you need to pay attention to is that the animation effect has a duration, and it is especially important to modify the Z-index of the window to be clicked. If it is not done well, the viewing effect will be greatly reduced.

In the following example, setTimeout is used to delay execution.

It seems a little different. If you continue to roll back and watch the original animation, it seems that the moved window has a sequence, rather than starting the animation together.

OK. We use the delay method to implement this requirement. We initially set a dalaytime. The default value is 0. We add 100 to the array of loop objects each time, and then use this value to delay the animation effect, in this way, each form is separated by 100 milliseconds.

now, we have completed the Dodge Effect Simulation step by step. Of course, you can also drag the Code , even Judge under what circumstances the window is sliding up and down, the following direct look, do not do the idea analysis: http://runjs.cn/detail/pav1hhdb