For the implementation of Animation, Android provides Animation and introduces two Animation modes in Android SDK:
1. Tween Animation: A gradient Animation is generated by constantly performing image transformations (translation, scaling, and rotation) on objects in the scenario;
2. Frame Animation: it is an Animation for converting images that are prepared in sequence.
Animation type
Next, let's take a look at the animation types provided by Android. Android animation consists of four types
In the XML file:
Alpha gradient transparency animation effect
Scale scaling Animation
Animated effect of moving the translate position
Rotate screen transfer rotation animation effect
The corresponding classes are defined in the Java source code. You can use these class methods to obtain and operate the corresponding attributes:
AlphaAnimation gradient transparency animation effect
ScaleAnimation gradient scaling animation effect
TranslateAnimation
RotateAnimation image transfer rotation animation effect
Tween Animation
A tween animation performs a series of simple conversions (location, size, rotation, transparency) on the content of the view object ). If you have a text view object, you can move it, rotate it, and make it larger or smaller. If there is a background image under the text, the background image will also be converted with the file.
Use XML to define Tween Animation
The XML file of the animation is in the res/anim directory of the project. This file must contain a root element, you can set <alpha> <scale> <translate> <rotate> interpolation element or add all the above elements to the <set> element group. By default, therefore, all animation commands occur at the same time. To enable them to occur in sequence, you need to set a special attribute startOffset. Animation commands define what kind of conversions you want to perform. when they happen, how long should they be executed? The conversions can be continuous or at the same time. For example, if you want to move the text content from the left to the right, then rotate the text 180 degrees, or rotate the text content simultaneously during the movement, no conversion requires some special parameters (the size of the start and end sizes, the rotation angle of the start and end, and so on). You can also set some basic parameters (for example, if several conversions occur simultaneously, you can set the same Start Time for them. If the conversion is based on the sequence, the calculation Start Time plus the cycle.
Common node attributes of Tween Animation
Attribute [type] function remarks
The Duration [long] attribute is the animation Duration in milliseconds.
When fillAfter [boolean] is set to true, the animation is applied after the animation ends.
When fillBefore [boolean] is set to true, the animation is applied before the animation starts.
Interpolator
There are some common inserts for an animation.
Accelerate_decelerate_interpolator
Accelerator-slowdown animation inserter
Accelerate_interpolator
Acceleration-animation insertor
Decelerate_interpolator
Slowdown-animation inserter
Other animation Effects
RepeatCount [int] Number of animation repetitions
RepeatMode [int] defines repeated behavior 1: Start again 2: plays backward
The interval between the startOffset [long] animations, starting from the time when the animation was stopped.
ZAdjustment [int] defines the change of Z Order of the animation 0: Keep Z Order unchanged
1: Keep at the top
-1: Keep at the bottom layer
Table 2
XML Node Function Description
Alpha gradient transparency animation effect
<Alpha
Android: fromAlpha = "0.1 ″
Android: toAlpha = "1.0 ″
Android: duration = "3000"/>
The fromAlpha attribute is the transparency when the animation starts.
0.0 indicates completely transparent
1.0 indicates completely opaque
The above value is a float data type number between 0.0 and 1.0.
Duration is the animation duration, in ms.
ToAlpha
The property is the transparency when the animation ends.
Table 3
Scale scaling Animation
<Scale
Android: interpolator = "@ android: anim/accelerate_decelerate_interpolator"
Android: fromXScale = "0.0 ″
Android: toXScale = "1.4 ″
Android: fromYScale = "0.0 ″
Android: toYScale = "1.4 ″
Android: Required Tx = "50%"
Android: Required ty = "50%"
Android: fillAfter = "false"
Android: startOffset = "700"
Android: duration = "700 ″
Android: repeatCount = "10"/>
FromXScale [float] fromYScale [float] is the starting point of an animation. The scale Size of 0.0 on the X and Y coordinates indicates that it is reduced to none.
1.0 indicates normal scaling-free
A value smaller than 1.0 indicates contraction.
Value greater than 1.0 indicates Amplification
ToXScale [float]
ToYScale [float] indicates the scaling size on the X and Y coordinates when the animation ends.
PivotX [float]
PivotY [float] is the starting position attribute value of the animation relative to the X and Y coordinates of the object. Description: from 0%-100%, 50% is the midpoint position on the X or Y coordinates of the object.
Table 4
Animated effect of moving the translate position
<Translate
Android: fromXDelta = "30 ″
Android: toXDelta = "-80 ″
Android: fromYDelta = "30 ″
Android: toYDelta = "300 ″
Android: duration = "2000"/>
FromXDelta
ToXDelta is the position on the X coordinate when the animation ends.
FromYDelta
ToYDelta is the position on the Y coordinate when the animation ends.
Table 5
Rotate screen transfer rotation animation effect
<Rotate
Android: interpolator = "@ android: anim/accelerate_decelerate_interpolator"
Android: fromDegrees = "0 ″
Android: toDegrees = "+ 350 ″
Android: Required Tx = "50%"
Android: Required ty = "50%"
Android: duration = "3000"/>
FromDegrees indicates the object angle when the animation starts.
If the angle is negative, it indicates clockwise rotation.
If the angle is positive, it indicates clockwise rotation.
(Negative from -- to positive: clockwise rotation)
(Negative from -- to negative: counter-clockwise rotation)
(Positive from -- to positive: clockwise rotation)
(Positive from -- to negative: clockwise rotation)
The toDegrees attribute indicates that the Rotation Angle of an object can be greater than 360 degrees when the animation ends.
PivotX
Ty indicates the starting position of the animation relative to the X and Y coordinates of the object. 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 following is a complete XML definition (provided by the SDK)
<Set android: Using interpolator = "false" xmlns: android = "http://schemas.android.com/apk/res/android">
<Scale
Android: interpolator = "@ android: anim/accelerate_decelerate_interpolator"
Android: fromXScale = "1.0"
Android: toXScale = "1.4"
Android: fromYScale = "1.0"
Android: toYScale = "0.6"
Android: Required Tx = "50%"
Android: Ty = "50%"
Android: fillAfter = "false"
Android: duration = "700"/>
<Set android: interpolator = "@ android: anim/decelerate_interpolator">
<Scale
Android: fromXScale = "1.4"
Android: toXScale = "0.0"
Android: fromYScale = "0.6"
Android: toYScale = "0.0"
Android: Required Tx = "50%"
Android: Ty = "50%"
Android: startOffset = "700"
Android: duration= "400"
Android: fillBefore = "false"/>
<Rotate
Android: fromDegrees = "0"
Android: toDegrees = "-45"
Android: toYScale = "0.0"
Android: Required Tx = "50%"
Android: Ty = "50%"
Android: startOffset = "700"
Android: duration = "400"/>
</Set>
</Set>
How to Use Tween Animation
Use the static method loadAnimation () of the AnimationUtils class to load the animated XML file in XML.
// ImageView in main. xml
ImageView spaceshipImage = (ImageView) findViewById (R. id. spaceshipImage );
// Load the animation
Animation hyperspaceJumpAnimation = AnimationUtils. loadAnimation (this, R. anim. hyperspace_jump );
// Use ImageView to display animations
SpaceshipImage. startAnimation (hyperspaceJumpAnimation );
How to define animations in Java code
// Define the animation instance object in the code
Private Animation myAnimation_Alpha;
Private Animation myAnimation_Scale;
Private Animation myAnimation_Translate;
Private Animation myAnimation_Rotate;
// Initialize an instance object based on its own Constructor
MyAnimation_Alpha = new AlphaAnimation (0.1f, 1.0f );
MyAnimation_Scale = new ScaleAnimation (0.0f, 1.4f, 0.0f, 1.4f,
Animation. RELATIVE_TO_SELF, 0.5f, Animation. RELATIVE_TO_SELF, 0.5f );
MyAnimation_Translate = new TranslateAnimation (30366f,-80366f, 30366f, 300366f );
MyAnimation_Rotate = new RotateAnimation (0.0f, + 3500000f,
Animation. RELATIVE_TO_SELF, 0.5f, Animation. RELATIVE_TO_SELF, 0.5f );
Explanation of interpolator
Interpolator defines the rate of change of an animation ). This allows the basic animation effects (alpha, scale, translate, and rotate) to accelerate, slow down, and repeat.
Interpolator defines the speed at which an animation changes, including constant speed, positive acceleration, negative acceleration, and irregular acceleration. Interpolator is a base class that encapsulates all the common methods of Interpolator. It has only one method, that is, getInterpolation (float input ), this method maps a point on the timeline to a multiplier to be applied to the transformations of an animation. Android provides several Interpolator subclasses to achieve different speed curves, as shown below:
AccelerateDecelerateInterpolator is slow at the beginning of the animation and the speed of the introduced place. It is accelerated in the middle.
AccelerateInterpolator changes slowly at the beginning of the animation, and then starts acceleration.
CycleInterpolator: specifies the number of times the animation is played cyclically, and the speed changes along the sine curve.
DecelerateInterpolator speed changes slowly at the beginning of the animation, and then starts to slow down
LinearInterpolator changes at an even rate in the animation
Frame Animation
Frame Animation is an image prepared in advance for sequential playback, similar to a movie. Unlike the animation package, the Android SDK provides another class, AnimationDrawable, to define and use Frame Animation.
Frame Animation can be defined in XML Resource (or stored in the res \ anim folder), or by using the API definition in AnimationDrawable. Since Tween Animation and Frame Animation are very different, the XML definition format is also completely different. The format is: first, the root node of the animation-list, the animation-list root node contains multiple item subnodes. Each item node defines an animation, The drawable resource of the current frame, and the duration of the current frame. The following describes the elements of a node:
XML Attribute description
Drawable resource referenced by the current frame
The display time of the current duration frame (unit: milliseconds)
If oneshot is set to true, the animation is played only once and stops at the last frame. If it is set to false, the animation is played cyclically.
VariablePadding If true, allows the drawable's padding to change based on the current state that is selected.
Visible specifies the initial visibility of drawable. The default value is flase;
The following is a specific XML example to define a frame-by-frame animation:
<Animation-list xmlns: android = "http://schemas.android.com/apk/res/android" android: oneshot = "true"> <item android: drawable = "@ drawable/rocket_thrust1" android: duration = "200"/> <item android: drawable = "@ drawable/rocket_thrust2" android: duration = "200"/> <item android: drawable = "@ drawable/rocket_thrust3" android: duration = "200"/> </animation-list>
The XML above defines a Frame Animation, which contains three animations. Three animations apply three pictures in drawable: rocket_thrust1, rocket_thrust2, and rocket_thrust3, each animation lasts for 200 milliseconds.
Then we save the above XML in the res/anim/folder and name it rocket_thrust.xml to display the animation code:
AnimationDrawable rocketAnimation; public void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. main); ImageView rocketImage = (ImageView) findViewById (R. id. rocket_image); rocketImage. setBackgroundResource (R. anim. rocket_thrust); rocketAnimation = (AnimationDrawable) rocketImage. getBackground ();} public boolean onTouchEvent (MotionEvent event) {if (event. getAction () = MotionEvent. ACTION_DOWN) {rocketAnimation. start (); return true;} return super. onTouchEvent (event );}
Result of code execution: three images are played in sequence.
One thing to note is that the Code for starting the Frame Animation is rocketAnimation. start (); cannot be in OnCreate (), because in OnCreate (), AnimationDrawable is not completely bound to ImageView, And the animation is started in OnCreate, you can only see the first image. This is actually implemented in the drag event.
Next, let's take a look at the introduction to AnimationDrawable In the Android SDK:
AnimationDrawable
Get and set animation attributes
Int getDuration () gets the animation duration
Int getNumberOfFrames () Get the number of animation Frames
Boolean isOneShot ()
Void setOneShot (boolean oneshot)
Get oneshot attributes
Set the oneshot attribute
Void inflate (Resurce r, XmlPullParser p,
AttributeSet attrs)
Add and retrieve frame animations
Drawable getFrame (int index) obtains the Drawable resource of a frame.
Void addFrame (Drawable frame, int duration) adds a frame (resource, duration) for the current animation)
Animation Control
Void start () start Animation
Void run () cannot be called directly, instead of start ().
Boolean isRunning () whether the current animation is running
Void stop () to stop the current Animation
The author does not want to sleep