Android Study Notes 14: Implementation of Tween Animation

In Android, there are two Animation modes: Tween Animation (gradient Animation) and Frame Animation (Frame Animation ). Gradient animation continuously performs image translation (translation, scaling, rotation, etc.) on the objects in the scene to produce the animation effect. Frame animations produce animated effects by playing the prepared images in sequence, similar to movies.

1. Use Java code to implement Tween Animation

The Animation effect of Tween Animation is implemented through the Animation class. The Animation class has five direct subclasses: AlphaAnimation, ScaleAnimation, TranslateAnimation, RotateAnimation, and AnimationSet. AlphaAnimation is used to achieve the transparency gradient animation effect, ScaleAnimation is used to achieve the size scaling gradient animation effect, and TranslateAnimation is used to achieve the animation effect of converting the image position and moving the image; the AnimationSet is used to combine multiple animations.

1.1AlphaAnimation

The AlphaAnimation class is commonly used as follows:

AlphaAnimation (float fromAlpha, float toAlpha );

The fromAlpha parameter indicates the transparency at the animation start; the toAlpha parameter indicates the transparency at the animation end (0.0 indicates full transparency, and 1.0 indicates full opacity)

WillChangeBounds (); // whether the animation affects the specified view range

WillChangeTransformationMatrix (); // whether the animation affects the conversion matrix

Common Methods of 1.2ScaleAnimation class

Common ScaleAnimation classes are as follows:

ScaleAnimation (float fromX, float toX, float fromY, float toY, int limit txtype, float limit txvalue, int limit tytype, float limit tyvalue );

The fromX and toX parameters represent the scaling dimensions on the x coordinate at the start and end respectively, and the fromY and toY parameters represent the scaling dimensions on the y coordinate at the start and end respectively; the scaling txtype and tytype parameters indicate the scaling modes of x and y respectively. The two parameters, txvalue and tyvalue, respectively indicate the starting position of the scaling animation relative to the coordinates of x and y.

1.3TranslateAnimation

The common methods of the TranslateAnimation class are as follows:

TranslateAnimation (float fromXDelta, float toXDelta, float fromYDelta, float toYDelta );

The fromXDelta and fromYDelta parameters represent the x and y coordinates at the start, and the toXDelta and toYDelta parameters represent the x and y coordinates at the end, respectively.

1.4RotateAnimation

The common methods of the RotateAnimation class are as follows:

RotateAnimation (float fromDegrees, float toDegrees, int limit txtype, float limit txvalue, int limit tytype, float limit tyvalue );

The fromDegrees parameter indicates the angle at the start, the toDegrees parameter indicates the angle at the end, and the txtype and polictytype parameters represent the scaling modes of x and y respectively; parameters txvalue and tyvalue indicate the starting position of the scaling animation relative to the coordinates of x and y, respectively.

1.5AnimationSet

The following are common methods for the AnimationSet class:

AddAnimation (Animation a); // Add an Animation to the Animation component.

ComputeDurationHint (); // maximum animation duration

GetAnimation (); // get the animation

GetDuration (); // get the animation component duration

GetStartTime (); // get the animation start time

SetDuration (long durationMillis); // sets the animation duration.

SetFillAfter (boolean fillAfter); // sets the animation to be applied after the animation ends.

SetFillBefore (boolean fillBefore); // sets the animation to be applied before the animation starts.

SetStartOffset (long startOffset); // sets the interval between animations.

EtRepeatMode (int repeatMode); // you can specify the animation repetition mode.

 

2. Use the xml layout file to implement Tween Animation

The xml layout file can be used to more easily implement the Tween Animation effect.

The xml layout file of Animation is stored in the res/anim directory of the project.

The xml layout file must contain the root element <set>. Nodes <alpha>, <scale>, <translate>, and <rotate> correspond to AlphaAnimation, ScaleAnimation, TranslateAnimation, and RotateAnimation.

2.1 common node attributes of Tween Animation

The common node attributes of Tween Animation include the following:

Android: duration [long] // animation duration, in ms

Android: fillAfter [boolean] // when it is set to true, the animation is applied after the animation ends.

Android: fillBefore [boolean] // if it is set to true, the animation is applied before the animation starts.

Android: interpolator // specifies the animation inserter. The optional values include accelerate_decelerate_interpolator, accelerate_interpolator, and decelerate_interpolator.

Android: repeatCount [int] // Number of animation repetitions

Android: repeatMode [int] // repeat mode of the animation. 1 indicates that the animation is played again after the replay, and 2 indicates that the animation is played again after the replay.

Android: startOffset [long] // sets the interval between animations.

Android: zAdjustment [int] //

Common attributes of 2.2 node <alpha>

Common <alpha> attributes of a node are as follows:

Android: fromAlpha [float] indicates the transparency at the start.

Android: toAlpha [float] indicates the transparency at the end.

Value description: 0.0 indicates full transparency, and 1.0 indicates full opacity.

Common attributes of 2.3 nodes <scale>

Common attributes of a node <scale> are as follows:

Android: fromXScale [float] indicates the scaling size on the x coordinate at the animation start.

Android: toXScale [float] indicates the scaling size on the x coordinate at the animation end.

Android: fromYScale [float] indicates the scaling size on the y coordinate at the start of the animation.

Android: toYScale [float] indicates the scaling size on the y coordinate when the animation ends.

Value description: 0.0 indicates no contraction, 1.0 indicates normal no contraction, value greater than 1.0 indicates amplification, value less than 1.0 indicates contraction

Android: animated TX [float] indicates the starting position of the animation relative to the x coordinate of the object.

Android: interval ty [float] indicates the starting position of the animation relative to the y coordinate of the object

2.4 common attributes of node <translate>

Common <translate> attributes of a node are as follows:

Android: fromXDelta [int] indicates the position on the x coordinate when the animation starts.

Android: toXDelta [int] indicates the position on the x coordinate when the animation ends.

Android: fromYDelta [int] indicates the position on the y coordinate when the animation starts.

Android: toYDelta [int] indicates the position on the y coordinate when the animation ends.

2.5 common attributes of node <translate>

Common <rotate> attributes of a node are as follows:

Android: fromDegrees indicates the object angle when the animation starts.

Android: toDegrees indicates the object angle when the animation ends

Description of values: negative from-positive to indicates clockwise rotation, negative from-negative to indicates clockwise rotation, positive from-positive to indicates clockwise rotation, positive from-negative to indicates clockwise rotation

Android: Ready TX indicates the starting position of the x coordinate of the animation relative to the object.

Android: policty indicates the start position of the animation relative to the y coordinate of the object.

 

3. Instance

In this example, Java code and xml layout files are used to implement the Tween Animation effect. You can use the upper and lower left keys to achieve AlphaAnimation, ScaleAnimation, TranslateAnimation, and RotateAnimation animation effects.

Source code of TweenAnimation. java is as follows:

TweenAnimation. java source code
1 package com. example. android_tweenanimation;
2
3 import android. content. Context;
4 import android. graphics. Bitmap;
5 import android. graphics. Canvas;
6 import android. graphics. drawable. BitmapDrawable;
7 import android. view. KeyEvent;
8 import android. view. View;
9 import android. view. animation. AlphaAnimation;
10 import android. view. animation. Animation;
11 import android. view. animation. AnimationUtils;
12 import android. view. animation. RotateAnimation;
13 import android. view. animation. ScaleAnimation;
14 import android. view. animation. TranslateAnimation;
15
16 public class TweenAnimation extends View {
17
18 private Animation mAnimationAlpha = null; // Alpha Animation
19 private Animation mAnimationScale = null; // Scale Animation
20 private Animation mAnimationTranslate = null; // Translate Animation
21 private Animation mAnimationRotate = null; // Rotate Animation
22
23 Context mContext = null;
24 Bitmap mBitmap_fuwa = null; // Bitmap object
25
26 public TweenAnimation (Context context ){
27 super (context );
28 mContext = context;
29 mBitmap_fuwa = (BitmapDrawable) getResources (). getDrawable
30 (R. drawable. fuwa). getBitmap (); // load a Bitmap object
31}
32
33 public void onDraw (Canvas canvas ){
34 super. onDraw (canvas );
35 canvas. drawBitmap (mBitmap_fuwa, 0, 0, null );
36}
37
38 // press the button
39 public boolean onKeyDown (int keyCode, KeyEvent event ){
40 switch (keyCode ){
41 case KeyEvent. KEYCODE_DPAD_UP: // Mount key: Alpha animation effect
42 mAnimationAlpha = new AlphaAnimation (0.1f, 1.0f );
43 mAnimationAlpha. setDuration (3000 );
44 // mAnimationAlpha = AnimationUtils. loadAnimation (mContext, R. anim. alpha_animation );
45 this. startAnimation (mAnimationAlpha );
46 break;
47 case KeyEvent. KEYCODE_DPAD_DOWN: // lower key: Scale animation effect
48 mAnimationScale = new ScaleAnimation (0.0f, 1.0f, 0.0f, 1.0f,
49 Animation. RELATIVE_TO_SELF, 0.5f, Animation. RELATIVE_TO_SELF, 0.5f );
50 mAnimationScale. setDuration (3000 );
51 // mAnimationScale = AnimationUtils. loadAnimation (mContext, R. anim. scale_animation );
52 this. startAnimation (mAnimationScale );
53 break;
54 case KeyEvent. KEYCODE_DPAD_LEFT: // left click: Translate animation effect
55 mAnimationTranslate = new TranslateAnimation (10,100, 10,100 );
56 mAnimationTranslate. setDuration (3000 );
57 // mAnimationTranslate = AnimationUtils. loadAnimation (mContext, R. anim. translate_animation );
58 this. startAnimation (mAnimationTranslate );
59 break;
60 case KeyEvent. KEYCODE_DPAD_RIGHT: // right-click the Rotate animation effect.
61 mAnimationRotate = new RotateAnimation (0.0f, 360.0f,
62 Animation. RELATIVE_TO_SELF, 0.5f, Animation. RELATIVE_TO_SELF, 0.5f );
63 mAnimationRotate. setDuration (3000 );
64 // mAnimationRotate = AnimationUtils. loadAnimation (mContext, R. anim. rotate_animation );
65 this. startAnimation (mAnimationRotate );
66 break;
67}
68 return true;
69}
70
71 // press the button to bring up the event
72 public boolean onKeyUp (int keyCode, KeyEvent event ){
73 return false;
74}
75}
 

The source code of alpha_animation.xml is as follows:

Alpha_animation.xml source code
1 <? Xml version = "1.0" encoding = "UTF-8"?>
2 <set xmlns: android = "http://schemas.android.com/apk/res/android">
3 <alpha
4 android: fromAlpha = "0.1"
5 android: toAlpha = "1.0"
6 android: duration = "3000"
7/>
8 </set>
 

The source code of scale_animation.xml is as follows:

Scale_animation.xml source code
1 <? Xml version = "1.0" encoding = "UTF-8"?>
2 <set xmlns: android = "http://schemas.android.com/apk/res/android">
3 <scale
4 android: interpolator = "@ android: anim/accelerate_decelerate_interpolator"
5 android: fromXScale = "0.0"
6 android: toXScale = "1.0"
7 android: fromYScale = "0.0"
8 android: toYScale = "1.0"
9 android: Export Tx = "50%"
10 android: Ty = "50%"
11 android: fillAfter = "false"
12 android: duration= "500"
13/>
14 </set>
 

The source code of translate_animation.xml is as follows:

Source code of translate_animation.xml
1 <? Xml version = "1.0" encoding = "UTF-8"?>
2 <set xmlns: android = "http://schemas.android.com/apk/res/android">
3 <translate
4 android: fromXDelta = "10"
5 android: toXDelta = "100"
6 android: fromYDelta = "10"
7 android: toYDelta = "100"
8 android: duration = "3000"
9/>
10 </set>
 

The source code of rotate_animation.xml is as follows:

Rotate_animation.xml source code
1 <? Xml version = "1.0" encoding = "UTF-8"?>
2 <set xmlns: android = "http://schemas.android.com/apk/res/android">
3
4 <rotate
5 android: interpolator = "@ android: anim/accelerate_decelerate_interpolator"
6 android: fromDegrees = "0"
7 android: toDegrees = "+ 360"
8 android: Export Tx = "50%"
9 android: Ty = "50%"
10 android: duration = "3000"
11/>
12 </set>