Animation effect (i)-gradient animation

Section 1th Overview

In the Android system, for the interface or the components in the switch, change the time to appear natural and lively, the sense of fluidity, they added animation effect.

When the case is switched, the previous picture fades out and the next picture fades in.

The animations are divided into three categories: frame animations (frame-by-frames animation), Property animations (attribute animations), tween animations (gradient animations).

1. Frames-by-frame animation is a bit like playing a movie, it put a lot of pictures strung together, in order to display a picture, through the play to form an animated effect;

2. Property animations are animations that are used on a property of a control, such as a button whose width is set from narrow to wide, and we want its width to be adjusted so that it changes from narrow to wide, and then it needs to use property animations.

3. A gradient animation is an animation of the overall use of a control, with four of the most common effects: transparent, pan, zoom, and rotate.

/*******************************************************************/
* Copyright Notice
* This tutorial is only published in CSDN and the green Bean Network, other websites appear this tutorial is infringing.
/*******************************************************************/

2nd Section Gradient Animation

Gradient animations have four of the most common effects: transparent, pan, zoom, and rotate. All four of these effects have common ground,

1. Animated object as a whole a little change;
2. This is a state of the migration process, it takes time to match, the length of the animation can be specified, the speed of animation changes can be specified;
3. After the animation is executed, the object of this animation is not really turned into an animated display, it actually still remains the same as before, you see just a shadow of it, the animation ends, the shadow disappears.

Animation effects can be defined by a resource file or by code.

2.1 Transparent Animations

The effect of a transparent animation is that the transparency of an animated object changes from one degree to another. For example, the fade-in effect from transparent to opaque.

2.1.1 XML defining transparent animations

Defines transparent animations through XML,

2. resCreate a new one under anim目录 this directory, and xml文件

4. Define animation effects,

   <?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android">    <alpha        android:fromAlpha="0.0"        android:toAlpha="1.0"        android:duration="1500"        android:interpolator="@android:anim/linear_interpolator"/></set>

The various properties of a transparent animation represent the following meanings:

1. <alpha/>Tags: This is a transparent effect of the animation;
2. fromAlpha: At the beginning of the animation, the transparency value of the animated object, the value 0-1 between, 0 is completely transparent, 1 is completely opaque, 0 and 1 The value is a variety of semi-transparent effect;
3. toAlpha: At the end of the animation, the value of the transparency of the animated object is in 0-1 between;
4. duration: The duration of the animation, in milliseconds;

5. interpolator: This is a interpolator that specifies the rate at which the animation changes, such as whether it is fast or slow, fast, or even. The Android system provides us with a number of ready-made interpolator that we can use directly, such as the linear interpolator above @android:anim/linear_interpolator ;

The fade-in effect is just beginning to not show, gradually displayed, so it's fromAlpha going to be set 0 to, toAlpha set into 1 ;

Fade out effect is just beginning to show, gradually hidden, so it's fromAlpha going to be set 1 to, toAlpha set into 0 ;

In addition, the Android SDK also provides a way to customize the interpolator, which we will introduce later.

2.1.2 Java code defines transparent animations

Define transparent animations through Java code,

1. Create a alphaanimation that fills in the starting alpha value and the ending alpha value;
2. Setting the duration;
3. Set the Interpolator;

new AlphaAnimation(01);anim.setDuration(1500);anim.setInterpolator(context, android.R.interpolator.linear);

2.2 Panning Animations

The effect of panning the animation is that the animated object moves horizontally or vertically (or in two directions at the same time) to another position.

2.2.1 XML definition translation animation

Defines transparent animations through XML,

2. resCreate a new one under anim目录 this directory, and xml文件

3. Define animation effects,

   <?xml version= "1.0" encoding= "Utf-8"?><set xmlns:android="Http://schemas.android.com/apk/res/android">    <translateandroid:fromxdelta= "-100%"android:fromydelta="100%"  Android:toxdelta="0%"android:toydelta="0%"android:duration ="android:interpolator" = "@android: Anim/linear_interpolator"/>                                                </Set>

The various properties of the panning animation represent the following meanings:

1. <translate/>Tags: This is a translation effect of animation;
2. fromXDelta: The coordinates of the animated object relative to its true position in the x direction at the beginning of the animation;
3. fromYDelta: The coordinates of the animated object relative to its true position in the Y direction at the beginning of the animation;
4. toXDelta: The coordinates of the animated object in the Y direction relative to its true position at the end of the animation;
5. toYDelta: The coordinates of the animated object in the Y direction relative to its true position at the end of the animation;
6. duration: The duration of the animation, in milliseconds;
7. interpolator: This is the interpolator, which specifies the rate at which the animation changes;

The starting coordinates are expressed in 3 ways:

1. The absolute position of the animated object: represented by a numeric value.

2. The position of the animated object relative to itself: ％ denoted by. For example fromXDelta , to set －100% the start of the animation, the beginning of the left edge relative to its own real position, in the negative itself width of the place;

3. The position of the animated object relative to its parent layout: in the ％p notation, here p is parent the abbreviation.

Let the object shift from left to right into the effect, is to let it fromXDelta set into －100％ , toXDelta set 0% fromYDelta 0% toYDelta 0% , set, set into;

The effect of moving the object from bottom to top is to make it set to, set to fromXDelta 0％ , and set to (the toXDelta 0% fromYDelta 100% y coordinate is the positive direction from top to bottom); toYDelta 0%

2.2.2 Java code Definition panning animation

The translation animation is defined by Java code,

1. Create a translateanimation that fills in the starting and ending coordinates of the x y direction, and when you set the coordinates, you can set the type of the coordinates, indicating the position coordinates using relative to the Animation.RELATIVE_TO_SELF Animation.RELATIVE_TO_PARENT parent layout Animation.ABSOLUTE , Indicates the use of absolute position coordinates;
2. Setting the duration;
3. Set the Interpolator;

//使用坐标的绝对位置创建动画new TanslateAnimation(－1500, －500);anim.setDuration(1500);anim.setInterpolator(context, android.R.interpolator.linear);//使用坐标的相对位置创建动画new TanslateAnimation(Animation.RELATIVE_TO_SELF, －1.00, Animation.RELATIVE_TO_SELF, －1.00);anim.setDuration(1500);anim.setInterpolator(context, android.R.interpolator.linear);

2.3 Scaling Animations

The effect of the stretch animation is that the animated object zooms in or out at the center of a position.

2.3.1 XML definition Scaling animations

Scaling animations are defined by XML,

2. resCreate a new one under anim目录 this directory, and xml文件

3. Define animation effects,

   <?xml version= "1.0" encoding= "Utf-8"?><set xmlns:android="Http://schemas.android.com/apk/res/android">    <scaleAndroid:fromxscale=" -100%"android:fromyscale=" -100%" Android:toxscale="0%"android:toyscale= "0%"android:pivotx=" 50% "android:pivoty=" 50% "android:duration=" Android ": Interpolator="@android: Anim/linear_interpolator"/>                                                                </Set>

The various properties of the stretch animation represent the following meanings:

1. <scale/>Tags: This is a stretch effect of animation;
2. fromXScale: The scale of the animation object in the X direction relative to its true size at the beginning of the animation;
3. fromYScale: The scale of the animation object in the X direction relative to its true size at the beginning of the animation;
4. toXScale: The scale of the animation object in the Y direction relative to its true size at the end of the animation;
5. toYScale: The scale of the animation object in the Y direction relative to its true size at the end of the animation;
6. duration: The duration of the animation, in milliseconds;
7. interpolator: This is the interpolator, which specifies the rate at which the animation changes;
8. pivotX: The x-coordinate of the center point when the animation is scaled;
9. pivotY: The y-coordinate of the center point when the animation is scaled;

Here pivotX with the pivotY can set absolute coordinates, you can also set relative to their own relative coordinates ％ , as well as relative to the parent layout of relative coordinates ％p .

2.3.2 Java code Definition scaling animation

Define scaling animations through Java code,

1. Create a scaleanimation, fill in the X Y direction of the starting scale and end scaling scale; When you set the center coordinates, you can set the type of the coordinates, indicating the position coordinates that use relative to the Animation.RELATIVE_TO_SELF Animation.RELATIVE_TO_PARENT parent layout Animation.ABSOLUTE , Indicates the use of absolute position coordinates;
2. Setting the duration;
3. Set the Interpolator;

//Create an animation using the absolute position of the center pointScaleanimation Anim =NewScaleanimation (1,2,1,2, -, Max); Anim.setduration ( the); Anim.setinterpolator (context, Android. R.interpolator.linear);//Use the relative position of the center point to create an animationScaleanimation Anim =NewScaleanimation (1,2,1,2, Animation.relative_to_self,0.5, Animation.relative_to_self,0.5); Anim.setduration ( the); Anim.setinterpolator (context, Android. R.interpolator.linear);

2.4 Rotate Animation

The effect of rotating an animation is that the animated object rotates at the center of a position.

2.4.1 XML Definition Rotation animation

Rotate animations with XML definitions,

2. resCreate a new one under anim目录 this directory, and xml文件

3. Define animation effects,

   <?xml version= "1.0" encoding= "Utf-8"?><set xmlns:android="Http://schemas.android.com/apk/res/android">    <rotateandroid:fromdegrees="0"android:todegrees=" the" Android:pivotx="50%"android:pivoty= "50%"android:duration="1500 "android:interpolator=" @android: Anim/linear_interpolator "/>                                                </Set>

The various properties of the stretch animation represent the following meanings:

1. <rotate/>Tags: This is an animation of the rotation effect;
2. fromDegrees: The angle at which the animation object rotates relative to the real position at the beginning of the animation;
3. toDegrees: The angle at which the animation object rotates relative to the real position at the beginning of the animation;
4. duration: The duration of the animation, in milliseconds;
5. interpolator: This is the interpolator, which specifies the rate at which the animation changes;
6. pivotX: The x-coordinate of the center point when the animation is scaled;
7. pivotY: The y-coordinate of the center point when the animation is scaled;

Here pivotX with the pivotY can set absolute coordinates, you can also set relative to their own relative coordinates ％ , as well as relative to the parent layout of relative coordinates ％p .

2.4.2 Java code Definition rotation animation

Define rotation animations through Java code,

1. Create a rotateanimation, fill in the starting angle and end angle; When you set the center coordinate, you can set the type of the coordinates, which means that the relative position coordinates are used, indicating the coordinates of the Animation.RELATIVE_TO_SELF Animation.RELATIVE_TO_PARENT position relative to the parent layout, Animation.ABSOLUTE indicating the use of absolute position coordinates;
2. Setting the duration;
3. Set the Interpolator;

//使用中心点的绝对位置创建动画new RotateAnimation(036050150);anim.setDuration(1500);anim.setInterpolator(context, android.R.interpolator.linear);//使用中心点的相对位置创建动画new ScaleAnimation(03600.50.5);anim.setDuration(1500);anim.setInterpolator(context, android.R.interpolator.linear);

2.5 animating with animations 2.5.1 using XML definitions

1. Use AnimationUtils.loadAnimation() load animations;
2. Use the function for the object you want to animate startAnimation() , and start the animation;

Animation anim = AnimationUtils.loadAnimation(this, R.anim.custom_anim);mAnimationTarget.startAnimation(anim);

2.5.2 using code-defined animations

Animations defined with code use functions to animate objects, as with XML, to startAnimation() start animations;

mAnimationTarget.startAnimation(anim);

2.6 + animation Effects Overlay

Not only can these animations be used alone, but they can also be mixed, for example, if you want an object to fade in one side and do the panning.

2.6.1 XML defines multiple animations

Use multiple animation effects on the same object at the same time, as long as you add multiple desired animations to the XML file that defines the animation.

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android">    <rotate        ....../>    <scale        ....../>    <translate        ....../>    <alpha        ....../></set>

2.6.2 Java code defines multiple animations

In the Java code, you can

1. Create multiple animations;
2. Create Animationset;
3. Add multiple animations created to the Animatonset;

newnewnewnewnew AnimationSet(true);set.addAnimation(anim1);set.addAnimation(anim2);set.addAnimation(anim3);set.addAnimation(anim4);mAnimationTarget.startAnimation(set);

2.7 Listening for gradient animations

Sometimes, when you need to know the state of an animation execution, you need to add a listener to the animation. Notifications of changes in animation status are obtained through the listener.

Translateanimation Anim =NewTranslateanimation (...); Anim.setanimationlistener (NewAnimation.animationlistener () {@Override     Public void Onanimationstart(Animation Animation) {//Animation start}@Override     Public void Onanimationend(Animation Animation) {//End of animation}@Override     Public void onanimationrepeat(Animation Animation) {//Animation repeat execution}});

2.8 Other Common properties of the gradient animation

In the previous we have introduced android:duration android:interpolator such common attributes. Now let's cover a few other important attributes.

2.8.1 android:fillAfter

Suppose a button is animated with a transparent effect, from opacity to full transparency. When the animation is complete, the button is restored to its true state (the button is not disappearing or transparent and still appears in the previous position).

If you set the property for this animation, the button remains the android:fillAfter true effect of the last frame of the animation after the animation is executed.

These two properties are set in the label to be <set/> effective.

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"    android:fillAfter="false">    ......</set>

In other words, if you create an animation with code, you have to put the animation into it and AnimationSet set the property.

newnew AnimationSet(true);set.addAnimation(anim);set.setFillAfter(true);

2.8.2 android:repeatModeAnd android:repeatCount

You can android:repeatCount make the animation repeat by setting the value;

1. The value is greater than 0 : the number of times that the animation repeats the number;
2. The value is set to INFINITE : The animation will be infinite loop to go on;

When android:repeatCount set greater than 0 later, can also be used android:repeatMode in conjunction with,

1. This value is set to RESTART : After each animation execution, return to the original state to re-execute the next animation;
2. The value is set to REVERSE : Each time the animation is completed, the animation is executed backwards;

Animation effect (i)-gradient animation