Android animation
There are many kinds of animation, we commonly have three kinds, divided into view animation (also known as tween animation), frame animation, property animation. Check out the following article series on Android frame-by-frame animation: It’s all about using frame-by-frame animation! Android: This is a comprehensive and detailed tween animation tutorial to teach you how to use tween animation (view animation) Android property animation: this is a detailed property animation summary & walkthrough Android ObjectAnimator class: Android animation: Do you really use interpolators with estimators? TypeEvaluator: Android Custom View: Take you inside the mysterious TypeEvaluator
There are three types of Animation in Android: View Animation: It can only be set to View and can change position, size, rotation and transparency. Drawable Animation (XML = anim) Drawable Animation (XML = anim) Drawable Animation (XML = anim) Drawable Animation (XML = Anim) Drawable Animation (XML = Anim) Drawable Animation (XML = Anim) Drawable Animation (XML = Anim) Drawable Animation (XML = drawable) Property Animation: used in Android3.0 or above, this Animation can be set to any object and is extensible, and can be customized for any type and attribute of Animation. View Animation (XML = animator) : The tween animation can change the position, size, rotation and transparency of the View. However, it is worth noting that the tween animation does not really change the properties of the View. That is to say, if a Button moves, the position after the move does not respond to the Button’s click event. Only the Button’s initial position can respond to the Button’s click event.
1. Drawable Animation
1.1 define
A Drawable animation is actually a Frame animation, and it allows you to do something that looks like a slide show. This animation is actually a Drawable, so the XML definition file for this animation is usually in the RES/Drawable/directory.
1.2 Drawable Animation description
Frame animation can still be implemented using XML or Java. However, XML is still recommended as follows:
must be the root node, containing one or more
elements with attributes such as:
android:oneshotTrue indicates that the command is executed only once. False indicates that the command is executed in a loop.<item>An animation resource similar to a frame.
Children of animation-list, containing the following attributes:
- Android :drawable The drawable resource of a frame.
- Android :duration Indicates how long a frame is.
1.3 Drawable animation example demonstration
Frame animation is relatively simple, here is a general framework for use, as follows:
<! Rocket. XML file in res/drawable/ --> <? The XML version = "1.0" encoding = "utf-8"? > <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot=["true" | "false"] > <item android:drawable="@[package:]drawable/drawable_resource_name" android:duration="integer" /> </animation-list>Copy the codeUse:
ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image);
rocketImage.setBackgroundResource(R.drawable.rocket_thrust);
rocketAnimation = (AnimationDrawable) rocketImage.getBackground();
rocketAnimation.start();
Copy the codeIn particular, the start() method of an AnimationDrawable cannot be invoked in the Activity’s onCreate method because the AnimationDrawable is not fully attached to the window. So the best time to load is in the onWindowFocusChanged() method.
2. View animation (tween animation)
2.1 define
View animations, also known as Tween animations, can perform a series of simple transformations (position, size, rotation, transparency) within a view container. Tween animations are defined in XML or Android code. XML file definitions are recommended because they are more readable and reusable
2.2 Classification of view animation
| The Java class name | XML keyword | Description information |
|---|---|---|
| AlphaAnimation | <alpha>Place it in the res/anim/ directory |
Gradient transparency animation effect |
| RotateAnimation | <rotate>Place it in the res/anim/ directory |
Screen transfer rotation animation effect |
| ScaleAnimation | <scale>Place it in the res/anim/ directory |
Tween size scaling animation effect |
| TranslateAnimation | <translate>Place it in the res/anim/ directory |
Screen shift position move animation effect |
| AnimationSet | <set>Place it in the res/anim/ directory |
A container that holds other animation elements alpha, scale, Translate, rotate, or other set elements |
 |
||
| The relationship and types of tween animations can be intuitively seen from the above figure and table. Next, we will introduce various tween animations in detail one by one. | ||
| View animation type details | ||
| #### 2.3-1 Animation base class | ||
| It can be seen that the Animation abstract class is the base class of all tween classes, so the base class provides some general Animation property methods. Let’s take a look at these properties in detail below. | ||
| Detailed explanation of corresponding attributes | ||
| XML attributes | Java method | explain |
| ———————– | —————————– | ———————————————————— |
| android:detachWallpaper | setDetachWallpaper(boolean) | Whether to run on wallpaper |
| android:duration | setDuration(long) | Animation duration in milliseconds |
| android:fillAfter | setFillAfter(boolean) | Control whether the last state of the animation remains when the animation ends |
| android:fillBefore | setFillBefore(boolean) | Control whether the animation ends in the state before the animation began |
| android:fillEnabled | setFillEnabled(boolean) | The same effect as Android :fillBefore |
| android:interpolator | setInterpolator(Interpolator) | Set interpolators (specify animation effects, such as rebound, etc.) |
| android:repeatCount | setRepeatCount(int) | Repeat the number |
| android:repeatMode | setRepeatMode(int) | The repeat type has two values: Reverse for playback in reverse order and restart for playback from the beginning |
| android:startOffset | setStartOffset(long) | The time, in milliseconds, to wait to start running after calling the start function |
| android:zAdjustment | setZAdjustment(int) | Represents the position on the Z-axis (top/bottom/normal) where the content is animated when it runs. The default is normal |
| #### 2.3-2 Alpha attribute details |
| XML attributes | Java method | explain |
|---|---|---|
| android:fromAlpha | AlphaAnimation (float fromAlpha,…). | Opacity at the beginning of the animation (0.0 to 1.0, 0.0 is fully transparent, 1.0 is opaque) |
| android:toAlpha | AlphaAnimation (… , float toAlpha) | Opacity at the end of the animation, ditto |
2.3-3 Rotate Attribute description
| XML attributes | Java method | explain |
|---|---|---|
| android:fromDegrees | RotateAnimation (float fromDegrees,…). | Rotation Angle, positive represents clockwise degrees, negative represents counterclockwise degrees |
| android:toDegrees | RotateAnimation (… The float toDegrees,…). | Rotation end Angle, positive represents clockwise degrees, negative represents counterclockwise degrees |
| android:pivotX | RotateAnimation (… The float pivotX,…). | Rotate the starting X coordinate (value, percentage, percentage P, for example, 50 means to the current View top left coordinate plus 50px as the initial point, 50% means to the current View top left corner plus the current View width and height of 50% as the initial point, 50% P means to the current View top left corner plus the parent control width and height of 50% as the initial point) |
| android:pivotY | RotateAnimation (… , float pivotY) | Scale the starting Y coordinate, same as above |
2.3-4. Detailed explanation of Scale attribute
| XML attributes | Java method | explain |
|---|---|---|
| android:fromXScale | ScaleAnimation (float fromX,…). | Initial X-axis scaling, 1.0 means no change |
| android:toXScale | ScaleAnimation (… , float toX,…). | End X-axis scaling |
| android:fromYScale | ScaleAnimation (… The float fromY,…). | Initial Y scale |
| android:toYScale | ScaleAnimation (… The float toY,…). | End Y axis scaling |
| android:pivotX | ScaleAnimation (… The float pivotX,…). | Scale the starting X-axis coordinates (value, percentage, percentage P, such as 50 to the current View top left coordinates plus 50px as the initial point, 50% to the current View top left plus the current View width and height of 50% as the initial point, 50% P to the current View top left plus the parent control width and height of 50% as the initial point) |
| android:pivotY | ScaleAnimation (… , float pivotY) | Scale the Y coordinates of the starting point, as above |
2.3-5. Translate attribute Details
| XML attributes | Java method | explain |
|---|---|---|
| android:fromXDelta | TranslateAnimation (float fromXDelta,…). | Starting point X axis coordinates (value, percentage, percentage P, such as 50 to the current View top left coordinates plus 50px as the initial point, 50% to the current View top left plus the current View width and height of 50% as the initial point, 50% P to the current View top left plus the parent control width and height of 50% as the initial point) |
| android:fromYDelta | TranslateAnimation (… , float fromYDelta,…). | Same rule as above |
| android:toXDelta | TranslateAnimation (… , float toXDelta,…). | The x-coordinate of the end point is the same as above |
| android:toYDelta | TranslateAnimation (… , float toYDelta) | The y-coordinate of the end point is the same as above |
| #### 2.3-6. AnimationSet details |
AnimationSet is a composite container-managed class that inherits from Animation. AnimationSet has no unique properties of its own. Its properties inherit from Animation. When we use the Animation property on the set tag, it affects all the child controls under that tag.
2.3 Use of view animation
Let’s take a look at how these animations can be used on Android (PS: XML is directly demonstrated here, but Java is too easy to say), as follows:
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@[package:]anim/interpolator_resource"
android:shareInterpolator=["true"|"false"] >
<alpha
android:fromAlpha="float"
android:toAlpha="float" />
<scale
android:fromXScale="float"
android:toXScale="float"
android:fromYScale="float"
android:toYScale="float"
android:pivotX="float"
android:pivotY="float" />
<translate
android:fromXDelta="float"
android:toXDelta="float"
android:fromYDelta="float"
android:toYDelta="float" />
<rotate
android:fromDegrees="float"
android:toDegrees="float"
android:pivotX="float"
android:pivotY="float" />
<set>.</set>
</set>
Copy the codeUse:
ImageView spaceshipImage = (ImageView) findViewById(R.id.spaceshipImage);
Animation hyperspaceJumpAnimation = AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump);
spaceshipImage.startAnimation(hyperspaceJumpAnimation);
Copy the codeThe above is a standard template using the tween animation we defined. As for the use of tween Animation, Animation also introduces some practical methods as follows:
| Animation class method | explain |
|---|---|
| reset() | Reset the initialization of the Animation |
| cancel() | Unanimate |
| start() | Start Animation |
| setAnimationListener(AnimationListener listener) | Sets the Animation listener for the current Animation |
| hasStarted() | Checks whether the Animation is started |
| hasEnded() | Check whether the Animation is finished |
Since tween animations can only be used by views, let’s take a look at some of the common methods that views use for animation:
| View class common animation operation method | explain |
|---|---|
| startAnimation(Animation animation) | The Animation that starts setting the current View |
| clearAnimation() | Cancels the Animation while the View is executing |
To this entire Android tween animation commonly used detailed attributes and methods are all introduced
2.4 Detailed explanation of View animation Interpolator
Actually all Interpolator is realized the Interpolator interface, system can be seen at the same time provides many Interpolator is OK, specific as follows:
| Java classes | XML id value | describe |
|---|---|---|
| AccelerateDecelerateInterpolator | @android:anim/accelerate_decelerate_interpolator | The animation starts and ends at a slower rate and speeds up in the middle |
| AccelerateInterpolator | @android:anim/accelerate_interpolator | The animation starts slowly and then speeds up |
| AnticipateInterpolator | @android:anim/anticipate_interpolator | Start swinging from back to front |
| AnticipateOvershootInterpolator | @android:anim/anticipate_overshoot_interpolator | Similar to above argateinterpolator |
| BounceInterpolator | @android:anim/bounce_interpolator | Bounces at the end of the animation |
| CycleInterpolator | @android:anim/cycle_interpolator | The loop rate changes to a sine curve |
| DecelerateInterpolator | @android:anim/decelerate_interpolator | The animation starts fast and then slow |
| LinearInterpolator | @android:anim/linear_interpolator | The animation changes at constant speed |
| OvershootInterpolator | @android:anim/overshoot_interpolator | Pop a certain value forward and return to the original position |
| PathInterpolator | New, run according to path coordinates after defining path coordinates. |
2.5 Use method of interpolator
The use of interpolators is relatively simple, as follows:
<set android:interpolator="@android:anim/accelerate_interpolator">.</set>
Copy the code2.6 Customization of interpolators
Sometimes you will find that the interpolators provided by the system are not enough and may need to be customized, just like the View. So let’s take a look at the customizations of interpolators. There are two ways of customizing interpolators: XML customizations (which are essentially modifications to existing interpolators) or Java code implementations. Here’s what we’ll say.
Let’s take a look at the steps for an XML custom interpolator:
-
Create filename.xml in the res/anim/ directory.
-
Modify your intended custom interpolator as follows:
<InterpolatorName xmlns:android="http://schemas.android.com/apk/res/android" android:attribute_name="value" /> Copy the code -
Just reference this file in your tween animation file.
You can see that the second step above modifies some properties of the existing interpolator, but some interpolators do not have modified properties, as follows:
No custom attribute is available.
Android :factor Floating point value, acceleration rate (default: 1).
Android: Tension point value, the number of tension points after the start point (default is 2).
Android: Tension point value, the number of tension points after the start point (default is 2). Android :extraTension floating point value, multiple of pull (default 1.5).
No custom attribute is available.
Android: Cycles Indicates the number of cycles (default: 1).
Android :factor Indicates the floating point value, which indicates the speed of deceleration (default: 1).
No custom attribute is available.
Android: Tension point value, tension beyond the end point (default: 2).
Let’s take a look at Java custom interpolators (Java custom interpolators are XML custom upgrades, which means that if we can’t modify XML attributes enough, we can do it in Java).
Interpolator interface we can see that all interpolators above implement Interpolator interface, which in turn inherits from TimeInterpolator, The TimeInterpolator interface defines a float getInterpolation(float Input); Method, which is called by the system with the input parameter representing the time of the animation, between 0 and 1, between the beginning and the end.
The following is a beginning and end of the animation rate slower, intermediate accelerating AccelerateDecelerateInterpolator interpolation:
public class AccelerateDecelerateInterpolator extends BaseInterpolator
implements NativeInterpolatorFactory {...public float getInterpolation(float input) {
return (float)(Math.cos((input + 1) * Math.PI) / 2.0 f) + 0.5 f; }... }Copy the codeAt this point, the interpolation of the entire tween animation and tween animation has been analyzed.
Property Animation
This is a direct reference to Guo God’s three works of Android attribute animation complete analysis (on), the first knowledge of the basic use of attribute animation