Animation processing in Android

Animation)

Android provides two types of animations:

1> Tween animation

You can perform a series of graphic transformations (including translation, scaling, rotation, and transparency) on The View content to achieve the animation effect. You can use XML or encoding to define the animation effect. There are four types of Tween animation:

In this example, the image view object must be scaled with a gradient.
1> Create the anim folder under the res directory of the project, and then define the animation XML file under the anim folder. The file name can be customized, for example, scale. xml. The content is as follows:


Android: fromXScale = "0.0"
Android: fromYScale = "0.0"
Android: toXScale = "5"
Android: toYScale = "5"
Android: Required Tx = "50%"
Android: Ty = "50%"
Android: fillAfter = "false"
Android: duration= "5000"
/>

The animation progress is controlled by interpolator. android provides several Interpolator sub-classes to implement different speed curves, for example, LinearInterpolator achieves constant speed, Accelerateinterpolator achieves acceleration, and DecelerateInterpolator implements deceleration. You can also define your own Interpolator subclass to achieve physical effects such as parabolic and free-falling.

The fromXScale attribute is the scaling size on the X coordinate when the animation starts.
The fromYScale attribute is the scaling size on the Y coordinate at the start of the animation.
The toXScale attribute is the zoom size on the X coordinate at the animation end.
The toYScale attribute is the scaling size on the Y coordinate at the animation end.
Note: The preceding four property values
0.0 indicates shrinking to none
1.0 indicates normal scaling-free
A value smaller than 1.0 indicates contraction.
Value greater than 1.0 indicates Amplification
The floating point TX attribute is the starting position of the animation relative to the X coordinate of the object.
The floating-point attribute is the starting position of the animation relative to the Y coordinate of the object.
Note:
The preceding two attribute values are from 0% to 100%.
50% indicates the point position on the X or Y coordinate of the object.
The duration (long integer) attribute is the animation duration. Description: The time is in milliseconds.
When the fillAfter (Boolean) attribute is set to true, the animation is applied after the animation ends.


2> Add in the layout File Node:

Android: orientation = "horizontal"
Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent"
>
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"
Android: src = "@ drawable/icon"
Android: id = "@ + id/imageView"
/>

Note: Apart from Animation effects can also be implemented for other views, such:


3> use the previously defined animation effect on ImageView in Activity:
Public class AnimationActivity extends Activity {
@ Override
Public void onCreate (Bundle savedInstanceState ){
Super. onCreate (savedInstanceState );
SetContentView (R. layout. main );
ImageView imageView = (ImageView) this. findViewById (R. id. imageView );
// Load the animation XML file and generate the animation command
Animation animation = AnimationUtils. loadAnimation (this, R. anim. scale );
// Start executing the animation
ImageView. startAnimation (animation );
}
}


Note: The above uses an xml file to define the animation effect, instead, you can also use the encoding method. The following code is used to achieve the same effect of the above example:
Public class AnimationActivity extends Activity {
@ Override
Public void onCreate (Bundle savedInstanceState ){
Super. onCreate (savedInstanceState );
SetContentView (R. layout. main );
ImageView imageView = (ImageView) this. findViewById (R. id. imageView );
ScaleAnimation animation = new ScaleAnimation (0.0f, 5f, 0.0f, 5f,
Animation. RELATIVE_TO_SELF, 0.5f, Animation. RELATIVE_TO_SELF, 0.5f );
Animation. setDuration (5000); // sets the duration to 5 seconds.
ImageView. startAnimation (animation );
}
}




Examples of other animation effects:
======================= Gradient transparency animation effect ========================== ===


Android: fromalphi = "0.1"
Android: toAlpha = "1.0"
Android: duration= "3000"
/>

Transparency animation effect for coding:
Public class AnimationActivity extends Activity {
@ Override
Public void onCreate (Bundle savedInstanceState ){
Super. onCreate (savedInstanceState );
SetContentView (R. layout. main );
ImageView imageView = (ImageView) this. findViewById (R. id. imageView );
AlphaAnimation animation = new AlphaAnimation (0.1, 1.0 );
Animation. setDuration (5000); // sets the duration to 5 seconds.
ImageView. startAnimation (animation );
}
}


========================= Animation effects of moving the image position ========================== ====


Android: repeatCount = "2"
Android: fromXDelta = "0"
Android: fromYDelta = "0"
Android: toXDelta = "120"
Android: toYDelta = "120"
Android: duration= "3000"
/>




Encoding to achieve position movement animation effect:
Public class AnimationActivity extends Activity {
@ Override
Public void onCreate (Bundle savedInstanceState ){
Super. onCreate (savedInstanceState );
SetContentView (R. layout. main );
ImageView imageView = (ImageView) this. findViewById (R. id. imageView );
TranslateAnimation animation = new TranslateAnimation (0,120, 0,120 );
Animation. setDuration (5000); // sets the duration to 5 seconds.
ImageView. startAnimation (animation );
}
}


========================== Image rotation animation effect ======================== ===


Android: interpolator = "@ android: anim/accelerate_interpolator"
Android: repeatCount = "2"
Android: fromDegrees = "0"
Android: toDegrees = "+ 360"
Android: Required Tx = "50%"
Android: Ty = "50%"
Android: duration= "3000"
/>




Encoding implementation:
RotateAnimation animation = new RotateAnimation (0,-90, Animation. RELATIVE_TO_SELF, 0.5f, Animation. RELATIVE_TO_SELF, 0.5f );
Animation. setDuration (500 );
ImageView. startAnimation (animation );

Tween animation code example: alpha. xml: Transparency change

Rotate. xml: rotation Animation

Scale. xml: Scaling Animation

Translate. xml: Translation Animation

Set. xml: animation set

Demoactivity. java:

Package cn. itcast. anim; import android. app. activity; import android. OS. bundle; import android. view. view; import android. view. animation. alphaAnimation; import android. view. animation. animation; import android. view. animation. animationSet; import android. view. animation. animationUtils; import android. view. animation. rotateAnimation; import android. view. animation. scaleAnimation; import android. view. animation. transl AteAnimation; import android. widget. imageView; public class DemoActivity extends Activity {private ImageView iv; @ Overridepublic void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. main); iv = (ImageView) this. findViewById (R. id. iv);}/*** playback transparency change animation **/public void alpha (View view) {// AlphaAnimation aa = new AlphaAnimation (0.0f, 1.0f ); // aa. setDuration (2000); Animation aa = AnimationUtils. loadAnimation (this, R. anim. alpha); iv. startAnimation (aa);}/*** play the selected animation **/public void rotate (View view) {// RotateAnimation ra = new RotateAnimation (0, 90 ); // RotateAnimation ra = new RotateAnimation (0, 90, // (iv. getRight () + iv. getLeft ()/2, (iv. getTop () + iv. getBottom ()/2); // how do I define the intermediate position of rotation? // RotateAnimation ra = new RotateAnimation (0, 90, 0.5f, 0.5f); // ra. setDuration (2000); Animation ra = AnimationUtils. loadAnimation (this, R. anim. rotate); iv. startAnimation (ra);} public void scale (View view) {// ScaleAnimation sa = new ScaleAnimation (0.0f, 2.0f, 0.0f, 2.0f); // sa. setDuration (2000); Animation sa = AnimationUtils. loadAnimation (this, R. anim. scale); iv. startAnimation (sa);} public void translate (View view) {// TranslateAnimation ta = new TranslateAnimation (100,-200,300,100); // ta. setDuration (2000); Animation ta = AnimationUtils. loadAnimation (this, R. anim. translate); iv. startAnimation (ta);}/*** animation combination */public void set (View view) {// AlphaAnimation aa = new AlphaAnimation (0.0f, 1.0f); // aa. setDuration (2000); // RotateAnimation ra = new RotateAnimation (0, 90); // ra. setDuration (2000); // TranslateAnimation ta = new TranslateAnimation (0,200, 0,200); // ta. setDuration (2000); // AnimationSet set = new AnimationSet (false); // set. addAnimation (ta); // set. addAnimation (ra); // set. addAnimation (aa); // iv. startAnimation (set); Animation aa = AnimationUtils. loadAnimation (this, R. anim. set); iv. startAnimation (aa );}}

Main. xml:

2> Frame Animation, that is, playing images prepared in advance in sequence, is similar to playing a film. Development steps:

(1) Put the prepared images under the res/drawable project.
(2) Create the anim folder under the res directory of the project, and then define the animation XML file under the anim folder. The file name can be customized. Of course, you can also use the encoding method to define the animation effect (using the AnimationDrawable class ).
(3) bind an animation effect to the View control. Call the start () method that represents the animation's AnimationDrawable to start the animation.

================================= Frame Animation example ====================== ====================
(1) Put the prepared images under the res/drawable project.
Images: girl_1.gif, girl_2.gif, and girl_3.gif
(2) Create the anim folder under the res directory of the project, and then define the animation XML file under the anim folder. The file name can be customized, for example, frame. xml.

Android: oneshot = "false">




The XML above defines a Frame animation, which contains three frames. Three frames of the animation apply three images in drawable: girl_1.gif, girl_2.gif, and girl_3.gif respectively, each animation lasts for 200 milliseconds. If the android: oneshot attribute is true, it indicates that the animation is played only once and stops at the last frame. If it is set to false, it indicates that the animation is played cyclically.
(3) bind an animation effect to the View control and call the start () method that represents the animation's AnimationDrawable to start the animation.
Public class FrameActivity extends Activity {
Private AnimationDrawable animationDrawable;
@ Override
Public void onCreate (Bundle savedInstanceState ){
Super. onCreate (savedInstanceState );
SetContentView (R. layout. main );
ImageView imageView = (ImageView) this. findViewById (R. id. imageView );
ImageView. setBackgroundResource (R. anim. frame );
AnimationDrawable = (AnimationDrawable) imageView. getBackground ();
}
@ Override
Public boolean onTouchEvent (MotionEvent event ){
If (event. getAction () = MotionEvent. ACTION_DOWN) {// Press
AnimationDrawable. start ();
Return true;
}
Return super. onTouchEvent (event );
}
}
One thing to note is that the Code for starting the Frame animation is animationDrawable. start (); cannot be applied in the OnCreate () method, because in OnCreate (), AnimationDrawable is not fully bound to ImageView. Start the animation in OnCreate () And you can only see the first image. This is implemented in the touch event.

Complete Frame Animation code example: list. xml:

FrameActivity. java:

Package cn. itcast. frame; import android. app. activity; import android. graphics. drawable. animationDrawable; import android. OS. bundle; import android. view. motionEvent; import android. widget. imageView; public class FrameActivity extends Activity {private ImageView iv; private AnimationDrawable drawable; @ Overridepublic void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. main); iv = (ImageView) this. findViewById (R. id. iv); iv. setBackgroundResource (R. drawable. list); drawable = (AnimationDrawable) iv. getBackground () ;}@ Overridepublic boolean onTouchEvent (MotionEvent event) {if (event. getAction () = MotionEvent. ACTION_DOWN) {// start playing the Frame Animation drawable. start ();} return super. onTouchEvent (event );}}

Main. xml: