Analysis android animation module

 

The main idea

 

 

Tween animation is completed by a series of content View graphics transformation (including translation, scaling, rotation, change the transparency) to achieve animation.

Specifically, a pre-defined set of instructions, which specifies the type of pattern transformation, trigger time duration. These instructions may be a way to define XML file, you can also define in source code. These program instructions executed along the time line animation can be achieved.

Interpolator control using animation progress, android Interpolator provides several subclasses to achieve a different speed profile, to achieve a uniform effect as LinearInterpolator, Accelerateinterpolator achieve acceleration effect, DecelerateInterpolator achieved deceleration effects. Interpolator can also define their own subclasses to achieve a parabolic physics, like free fall.

There are two operating modes of animation:

• Exclusive mode, that is the program's main thread into a loop, according to the animation instruction constantly refresh the screen, until the end of the animation;
• Interrupt mode, i.e. there is a single thread counts time, every predetermined time send a notification to the main thread, the main thread update notice screen;

Graphics transformation is achieved by affine matrix. Graphics transformation is a basic knowledge of graphics. In simple terms it is that each is a transformation matrix operations. In  Android  in, the Canvas class contains the current matrix, when calling Canvas.drawBitmap (bmp, x, y, Paint) drawing, android bmp will first do a matrix calculation, and the calculation result is displayed on the Canvas. In this way, programmers only need to constantly revise and refresh the screen matrix Canvas, View inside the object will keep doing graphics transformation, animation is formed.

Android provided in the Animation, Interpolator, Transformation and other types of specific implementation Tween animation, one by one following analysis.

Animation class and its subclasses

Animation Animation is the class and its subclass of a core module, which implements various animation effects such as pan, zoom, rotate, change transparency.

Tween animation frames each have to do a graphic transformation based on the content Interpolator of view, so the core work done Animation is transforming (transformation).

Aniamtion is the base class, he recorded the common attributes and methods of animation. The main attributes including animation duration, number of repetitions, interpolator and so on. Animation is the most important method getTransformation (currentTime, outTransformation), the method according to the current room (currentTime) and an interpolator, calculates the current transformation, the return outTransformation.

TranslateAnimation, RotateAnimation, AlphaAnimation like are Animation subclass, respectively, to achieve a translation, rotation, animation, etc. to change the value of Alpha.

Each animation applyTransformation override the parent class method, this method is called getTransformation method of the parent class. In addition, each animation there is the initialize method, the completion of initialization.

Different animations have different properties, such properties are RotateAnimation start angle and end angle the rotary point coordinates, TranslateAnimation property is the start position and end position. AlphaAnimation attribute value is the initial alpha values ​​alpha and termination.

FIG Animation class and its subclasses as follows:

 

 

 

Interpolator class and its subclasses

Interpolator defines the rate of change in animation can be achieved uniform, positive acceleration, negative acceleration, acceleration becomes irregular;

Interpolator is the base class that encapsulates all Interpolator common method, which is only one way, i.e. getInterpolation (float input), which maps a point on the timeline to a multiplier to be applied to the transformations of an animation.

LinearInerpolator, AccelerateInterpolator, DecelerateInterpolator, AccelerateDecelerateInterpolator, CycleInterpolator Interpolator is a subclass of, respectively, to achieve a uniform, acceleration, deceleration, transmission, circulation effect.

For LinearInterpolator, the rate of change is constant, i.e., f (x) = x.

Java code 

1. public float getInterpolation(float input) {  
2.       return input;  
3.   }  

 For AccelerateInterpolator, began to change slowly, then gradually faster, i.e., f (x) = x * x or f (x) = pow (x, 2 * mFactor).

 

Java code 

1. publicfloat getInterpolation(float input) {   
2.         if (mFactor == 1.0f) {  
3.             return (float)(input * input);  
4.         } else {  
5.             return (float)Math.pow(input, 2 * mFactor);  
6.         }  
7.     }  

 

 For AccelerateDecelerateInterpolator, the rate of change is very slow start and end, but the middle soon, i.e., f (x) = (cos ((x + 1) * PI) / 2.0f) + 0.5f.

Java code 

1. public float getInterpolation(float input) {  
2.        return (float)(Math.cos((input + 1) * Math.PI) / 2.0f) + 0.5f;  
3.    }  

 FIG Interpolator class and its subclasses as follows:

 

 

 

 

 

 

 

 

Transformation category

Transformation record affine matrix Matrix, animated every triggering, the original matrix will do a calculation, View of Bitmap matrix multiplication can be achieved with the appropriate action (rotation, translation, scaling, etc.).

Transformation class encapsulates the matrix and the alpha value, it has two important members, one mMatrix, the second is mAlpha.

Transformation class diagram is shown below:

 

How to animate in View

Logically, to achieve animation requires the following steps:

1. view create animated objects, animate properties, call invalidate refresh the screen, start the animation;
2. invalidate method triggers onDraw function;
3. In onDraw function:
   • getTransformation method calls the animation, the current point of time to get the matrix
   • The matrix of this matrix is ​​arranged Canvas
   • DrawBitmap method calls the canvas, draw the screen.
   • GetTransformation determine the return value, if true, call the invalidate method, go to the next screen refresh frames; if it is false, indicating that the animation is complete.

The whole process a sequence diagram showing available:

Use Case

The following code is a view, the system will call onCreate method when you create a view, which defines a TranslateAniamtion, specify the start and end of the movement, animation duration 1s, the last call startAnimation stored in the animation and the members mCurrentAnianmtion View start the animation.

Note that you need to define member variables and mTransformation in mCurrentAnimation View, were recorded current animation and transformation. Also you need to define a member function startAnimation start the animation.

 

Java code 

1. class MyView extends View {  
2.   
3.     Animation mCurrentAnimation  = null;  
4.   
5.     Transformation mTransformation = new Transformation;  
6.   
7.   
8.   
9.     private void setAnimation(Animation animation) {  
10.         mCurrentAnimation = animation;  
11.         if (animation != null) {  
12.             animation.reset();  
13.         }  
14.     }  
15.   
16.   
17.   
18.     public void startAnimation(Animation animation) {  
19.         animation.setStartTime(animation.START_ON_FIRST_FRAME);  
20.         setAnimation(animation);  
21.         invalidate();  
22.     }  
23.   
24.   
25.     onDraw (Canvas canvas) {  
26.   
27.         long curTime = SystemClock.uptimeMillis ();  
28.   
29.         if (mCurrentAniamtion == null){  
30.   
31.             canvas.drawBitmap (b, x, y, mPaint);  
32.   
33.         }  
34.   
35.         else {  
36.   
37.             if (!mCurrentAnimation.isInitialized())  //initialize animation  
38.   
39.                 mCurrentAnimation.initialize (w, h, pw, ph);  
40.   
41.             boolean more = mCurrentAnimation.getTransformation (curTime, mTransformation);  
42.   
43.             if(more) {  
44.   
45.                 Matrix m = canvas.getMatrix();  
46.   
47.                 canvas.setMatrix (mTransformation.getMatrix());  
48.   
49.                 canvas.drawBitmap (b, x, y, mPaint);  
50.   
51.                 canvas.setMatrix (m);  
52.   
53.                 this.invalidate ();  
54.   
55.             }  
56.   
57.             else {  
58.   
59.                 mCurrentAnimation = null;  
60.   
61.                 this.invalidate ();  
62.   
63.             }  
64.   
65.         }  
66.   
67.   
68.   
69.     }  
70.   
71.   
72.     void onCreate (){  
73.   
74.         Animation anim = new TranslateAnimation (10, 20, 0, 0);  
75.   
76.         anim.setDuration (1000); // 1s  
77.   
78.         anim.setInterpolator (new AcceleratInterpolator(3.0f));  
79.   
80.         startAniamtion (anim);  
81.   
82.     }  
83.   
84. }