gossip
Once I was wandering around and saw a nice 3D flip toggle effect. The address is here: tympanus.net/Development… I’ve been thinking about doing one for a while, but I recently pulled out a custom View that contains several effects, one of which is similar.
The body of the
1. The effect is not to say more, first look at the effect: 2D translation:
3 d flip:
3 d opening and closing:
Blinds:
3 d rotation:
Do you think it’s cool? If you can’t wait to know the implementation of the principle, then I first give you the source of the portal: github.com/zhangyuChen… But direct masturbation code, efficiency is inevitably low, if there is an introduction of the article, why not look? Next, we will analyze the realization process of various effects step by step. To cut to the chase, let’s get to the point: this set of effects is based on the use of two classes, Camera and Matrix. That’s what we’re going to be talking about today. Let’s start with a few apis: Camera.rotatex (float deg); camera.rotateY(float deg); camera.rotateZ(float deg); The camera has a three-dimensional coordinate system, with the x axis horizontal, Y axis vertical, and Z axis pointing at you. The above three apis clearly mean rotation of a certain Angle around three axes. The object of camera processing is matrix. Applying the processed matrix to the picture will make a tiled picture on the screen produce 3D effect after rotation around x or Y axis. This is from another good article about Camera and Matrix: The portal is here.
With this basic and key CAMERA API in mind, let’s look at the following code:
camera.save();
camera.rotateX(-rotateDegree);
camera.getMatrix(matrix);
camera.restore();
matrix.preTranslate(-currBitmap.getWidth() / 2.0);
matrix.postTranslate(currBitmap.getWidth() / 2 + i * averageWidth, axisY);
canvas.drawBitmap(currBitmap, matrix, paint);Copy the codeThe above code does one thing: rotate the matrix in camera and apply it to the bitmap to display the bitmap. The effect shown here is shown in the above image, which has a 3D effect. But that’s not the point here. Notice the four lines of code:
camera.rotateX(-rotateDegree);
camera.getMatrix(matrix);
matrix.preTranslate(-currBitmap.getWidth() / 2, -currBitmap.getHeight());
matrix.postTranslate(currBitmap.getWidth() / 2 , axisY);Copy the codeWhat do preTranslate() and postTranslate() do here? PreTranslate () translates a matrix before it changes, while postTranslate() translates a matrix after it changes. According to the parameters, the action here is to move it first to the upper left and then to the lower right, with only one purpose: to change the position of the rotation center during the matrix rotation processing. When the camera rotates the matrix, the center point is at (0,0), which is its rotation center, and the point (0,0) is only the upper left corner of the matrix. If the camera rotates the matrix without processing, the rotation axis is the top edge or left side of the matrix. Here, the vertical direction first moves up the whole bitmap height. So that its rotation axis becomes the bottom of the bitmap or, if not moving, the top of the bitmap. Combine this with an ugly picture:
The center of the blue box is the center of the rotation operation. If you move to the green box, the picture will be rotated around the center. Therefore, the process here is summarized as follows: 1. Move the bitmap to the appropriate position of the rotation axis; 2. Rotate the bitmap back to the original position; 3
One other thing to note is that the arguments for moving past and moving back are different in the code above, which means that the image is not moving back. This point should be easier to understand, in the process of 3D flipping, the position of the picture actually changes, the current picture will gradually move out of the display box, the next picture will gradually come in, so the different parameters just cause the position of the picture to move.
The above paragraph is actually the core of the entire implementation of all effects, if you follow this idea clear, look at the code should be much less effort.
Then let’s sort out the overall 3D flipping process: horizontal flipping to the left. The rotation axis of the first picture is at the far right, and the rotation Angle keeps increasing while the rotation axis gradually moves to the left. In the second picture, the rotation axis is on the far left of the image, and the rotation Angle decreases gradually, while the rotation axis gradually moves to the left. This creates a 3D flip toggle effect. The vertical direction is similar. If you understand the process described above, follow this description and try writing code!
In fact, here, the most key principle has been said, there is no too dry goods below, we simply comb the process of segmentation change.
4. Based on the extended whole 3D flip, we are dealing with the whole bitmap of the image. The principle of the split flip is the same, but the first step is to split the bitmap into equal chunks and put them in an array. When the effect is activated, take each bitmap in turn and process its rotation and displacement.
1. Split and merge effect: this is nothing to say, the overall 3D is one operation, here divided into 3 according to the overall 3D which processing can be. The only caveat is that as each bitmap pans back, remember to calculate the correct parameters to put the image back together.
2. Shutter effect: The only difference is that the center of each bitmap is different. Other rotation axes are on the edge, but it is in the center.
3. Rotation effect: This is one of the coolest effects I’ve ever seen. In fact, that’s how it works.
At the end
Finally, I also want to say that in the process of practice, I found that offset some parameters match with each other, in fact, will produce more 3D vivid and gorgeous effect. I dabble, look forward to your imagination rich infinite exploration, only think of, no can not do!
Finally, post the address of the project again, and welcome everyone to look at it. Github.com/zhangyuChen… If you find any problems, welcome to correct them!