Android Animation Study Notes

 

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