[Convert] 2D animation: the matrix of the View

Address: http://blog.csdn.net/flowingflying

A small example of learning is an extension animation from the upper left corner. If we need to expand in the center, the relevant code is as follows:

Public class viewanimation1 extends animation {
Private float centerx, centery;

@ Override
Public void initialize (INT width, int height, int parentwidth, int parentheight ){
Super. initialize (width, height, parentwidth, parentheight );
Centerx = width/2.0f;
Centery = height/2.0f;
Setduration (2500 );
Setfillafter (true );
Setinterpolator (New linearinterpolator ());
}

@ Override
Protected void applytransformation (float interpolatedtime, transformation T ){
Final matrix = T. getmatrix ();
Log. V ("wei", "orignal matrix" + matrix );
Matrix. setscale (interpolatedtime, interpolatedtime );
Matrix. pretranslate (-lastpointx,-lastpointx );
Matrix. posttranslate (centerx, centery );
Log. V ("wei", "target matrix" + matrix );
}
}

Matrix

Here, the small example of starting with a relatively small animation code is somewhat confusing. You need to understand matrix first. From the reference of Android and the logcat trace of the example, we know that matrix is a 3 × 3 matrix, specifically:

Getmatrix () is used to obtain a matrix with no animated changes to the view, that is, the unit matrix:

Assignment operation

Setscale () and setxxx () indicate to directly set the matrix. Execute matrix. setscale (interpolatedtime, interpolatedtime) to get the view in the lower left graph. We need to move the position further to the lower right graph.

Setxxx () is equivalent to the value assignment operation. The assignment operation is as follows:

Matrix. Reset (): Set to the unit matrix.
Matrix. setscale (): Scale with (0, 0) as the pivot point as shown in the preceding figure.
Matrix. settranslate ()
Matrix. setrotate ()
Matrix. setskew ()

Multiplication operation: premultiplication and postmultiplication

If we perform the settranslate () operation after setscale (), it is equal to two assignments. The final value is the subsequent value, that is, the previous setscale () is invalid. We will see the movement of the entire view, with no scaling effect. Therefore, prexxx () and postxxx () operations are required. In mathematics, it is the calculation of the matrix. Pre represents multiplying the previous parameter by a matrix, that is, M' = m * Other, and m is the forward multiplication; post is used as the following parameter to multiply the matrix M' = Other * m, M is the posterior multiplication, and set is used to set the matrix m = Other. In image processing, pre indicates that a specific image is processed first, followed by set image processing, and finally post image processing.

To achieve the target effect, we can also use the following method:

Final matrix = T. getmatrix ();
Matrix. setscale (interpolatedtime, interpolatedtime );
Matrix. posttranslate (centerx * (1-interpolatedtime), centery * (1-interpolatedtime ));

In image processing, first scale, such as the left image, and then pan to the right image position. It is also easy to prove in Mathematics

If you use the following method:

Final matrix = T. getmatrix ();
Matrix. setscale (interpolatedtime, interpolatedtime );
Matrix. pretranslate (-centerx,-centery );
Matrix. posttranslate (centerx, centery );

On the image, first move the image (-centerx,-centery), the center is equal to (0, 0), then scale, and finally move the center to (centerx, centery ),:

Math and easy proof:

Or

The matrix operation is amazing. In fact, layout animation is also implemented through the matrix class.

Matrix computing

The matrix class also provides a direct matrix calculation method. Matrix A = new matrix () is equivalent to creating a matrix of units.

A. Set (B) is assigned A = B;

A. preconcat (B), equivalent to the premultiplication, that is, a = A × B;

A. postconcat (B), equivalent to the premultiplication, that is, a = B ×;

C. setconcat (a, B), equivalent to C = A × B;

For example, we can set three matrices to represent three different graphics effects;

Matrix M1 = new matrix ();
M1.setscale (interpolatedtime, interpolatedtime );

Matrix m2 = new matrix ();
M2.settranslate (-centerx,-centery );

Matrix m3 = new matrix ();
M3.settranslate (centerx, centery );

To achieve the same example effect, you can:

// Matrix = m1
Matrix. preconcat (m2); // matrix = matrix * M2 = m1 * m2;
Matrix. postconcat (m3); // matrix = M3 * matrix = m 3*(m1 * m2) = M3 * m1 * m2;

Or

// Matrix = m1 * m2;
Matrix. setconcat (M3, matrix); // matrix = M3 * matrix = M3 * (m1 * m2) = M3 * m1 * m2;