Android Animation's motion tween (Tween Animation) example detailed _android

This example describes the motion tween animation for Android. Share to everyone for your reference, specific as follows:

In front of the "Android animation frame Animation", today to explain the use of tween animation in detail.

Also, before starting an instance demo, refer to a passage in the Official document:

Tween animation is the process of manipulating a control to show its rotation, gradient, move, and zoom, which we call motion tweens. We can define animations as XML, or we can encode implementations.

If you define an animation in XML, we complete the XML in the definition syntax of the animation and place it in the/res/anim directory where the filename can be referenced as a resource ID, and we need to use the animation object if the encoding is implemented.

If you implement animations in a defined XML way, we need to familiarize ourselves with the animated XML syntax:

<?xml version= "1.0" encoding= "Utf-8"?> <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:fromx= " Float "
    android:tox=" float "
    android:fromy=" float "
    android:toy=" float "/>
  <rotate
    android:fromdegrees= "float"
    android:todegrees= "float"
    android:pivotx= "float"
    android:pivoty= " Float "/>
  <set> ...
  </set>
</set>

You must have a root element in the XML file, either in <alpha>, <scale>, <translate>, <rotate>, or <set> To manage a collection of animations made up of the preceding elements.

<set> is an animation container that manages multiple animation groups, and the corresponding Java object is animationset. It has two properties, Android:interpolator represents an interpolation resource, you can refer to the system with its own interpolation resources, you can use a custom interpolation resource, the default is a constant-speed interpolation; I'll explain the interpolation in detail later. Android:shareinterpolator represents whether multiple animations in <set> are to share the interpolation, the default value is true, that is, the shared interpolation, if set to False, then the <set> interpolation will no longer work, We'll add the interpolation to each animation.
<alpha> is a gradient animation, you can achieve Fadein and fadeout effect, and the corresponding Java object is alphaanimation. The Android:fromalpha property represents the starting alpha value, the floating-point value, the range between 0.0 and 1.0, representing transparent and completely opaque, the Android:toalpha property represents the end alpha value, the floating-point value, and the range is between 0.0 and 1.0.
<scale> Zoom animation, you can achieve dynamic control size of the effect of the corresponding Java object is scaleanimation. The Android:fromxscale property represents the initial X-direction relative to its own scaling, floating-point values, such as 1.0 for their own no change, 0.5 for the beginning of the reduction of one-fold, 2.0 for a magnification; Android: The Toxscale property represents the scaling ratio of the end in the x direction relative to itself, the floating-point value, and the Android:fromyscale property represents the scaling relative to itself in the Y direction of the start, floating point value; Android: The Toyscale property represents the scaling relative to itself in the Y direction of the end, the floating-point value, the Android:pivotx property represents the scaled axis point x coordinate, the floating-point value, the Android:pivoty property represents the scaled axis point y coordinate, the floating-point value, for both properties, If we want to represent the center of the axis point as the image, we can define two property values as 0.5 or 50%.
<translate> is a bit of moving painting that represents a horizontal, vertical displacement. The corresponding Java object is translateanimation. The Android:fromxdelta property represents the position in the starting X direction, where the Android:toxdelta represents the position in the end X direction, and the Android:fromyscale property represents the position on the starting Y direction, Android: The Toydelta property represents the position in the end Y direction, and the above four properties support three representations: floating-point numbers, num%, num%p, or, if expressed as floating-point digits, the pixel values relative to their original position; If you represent a percentage of yourself in num%, For example, a toxdelta definition of 100% represents a 1 time-fold distance in the x direction, or a percentage of the parent class component, if expressed as num%p.
<rotate> is a rotational animation, and the corresponding Java object is rotateanimation. The Android:fromdegrees property represents the starting angle, the floating-point value, the unit: degree; The Android:todegrees property represents the end angle, the floating-point value, the unit: degree, and the Android:pivotx property represents the x-coordinate of the center of rotation, Android: The Pivoty property represents the y-coordinate value of the rotation center. These two properties also have three representations, which represent the pixel relative to the left edge of itself, the num% method represents the percentage relative to its left or top edge, and the num%p represents the percentage of the left or top edge relative to the parent container.

Also, in the animation, if we add android:fillafter= "true", the animation remains in its final state after it is finished, and android:duration= "Integer" represents the duration of the animation in milliseconds.

If you want to apply the animation defined in XML to a ImageView, the code is like this:

ImageView image = (ImageView) Findviewbyid (r.id.image);
Animation Testanim = Animationutils.loadanimation (this, r.anim.test);
Image.startanimation (Testanim);

The following focuses on the concept of the interpolation:

first you need to understand why the interpolation, because in the motion tween, we generally only define keyframes (first or end frames), and then the system automatically generates intermediate frames, the process of generating intermediate frames can be "interpolated." The interpolation defines the speed at which the animation changes and provides different rules for changing the value of the function to define the time, and can define a variety of non-linear change functions, such as acceleration, deceleration, etc. Here are a few common types of interpolation :

Interpolator Objects	Resource ID	Functional Role
Acceleratedecelerateinterpolator	@android: Anim/accelerate_decelerate_interpolator	Accelerate and slow down first.
Accelerateinterpolator	@android: Anim/accelerate_interpolator	Accelerated
Anticipateinterpolator	@android: Anim/anticipate_interpolator	Take one small step back and speed up the march.
Anticipateovershootinterpolator	@android: Anim/anticipate_overshoot_interpolator	On the previous basis, one small step beyond the finish line and then back to the end
Bounceinterpolator	@android: Anim/bounce_interpolator	Final stage Pinball effect
Cycleinterpolator	@android: Anim/cycle_interpolator	Cycle Motion
Decelerateinterpolator	@android: Anim/decelerate_interpolator	Slowdown
Linearinterpolator	@android: Anim/linear_interpolator	Uniform
Overshootinterpolator	@android: Anim/overshoot_interpolator	Get to the finish line quickly and go back to the finish step

We can then use a single interpolation:

<set android:interpolator= "@android: Anim/accelerate_interpolator" > ...
</set>

<alpha android:interpolator= "@android: Anim/accelerate_interpolator"
  .../>

If simply referencing these interpolation is not enough, we need to consider the personalization interpolation. We can create an interpolation resource to modify the properties of the interpolation, such as modifying the acceleration rate of the anticipateinterpolator, adjusting the number of cycleinterpolator cycles, and so on. To do this, we need to create an XML resource file and then put it under/res/anim and then reference it in the animation element. Let's take a look at some of the most common properties that can be adjusted by the interpolation device:

<accelerateDecelerateInterpolator> No
<accelerateInterpolator> Android:factor floating-point value, acceleration rate, defaults to 1
<anticipateInterploator> Android:tension floating-point value, starting point back tension, pull number, default to 2
<anticipateOvershootInterpolator> android:tension android:extratension floating-point values, pull multiples, default to 1.5 (2 * 1.5)
<bounceInterpolator> No
<cycleInterplolator> android:cycles integer value, number of loops, default to 1
<decelerateInterpolator> Android:factor floating-point value, deceleration rate, defaults to 1
<linearInterpolator> No
<overshootInterpolator> floating-point value, beyond the end of the tension, pull, the default is 2

Let's take the last interpolation for example:

<?xml version= "1.0" encoding= "Utf-8"?> <overshootinterpolator xmlns:android=
"http://" Schemas.android.com/apk/res/android "
  android:tension=" 7.0 "/>

In the code above, we change the tension to 7.0, then name the file My_overshoot_interpolator.xml and place it under/res/anim, and we can refer to the custom interpolation:

<scale xmlns:android= "http://schemas.android.com/apk/res/android"
  android:interpolator= "@anim/my_ Overshoot_interpolator "
  .../>

If these simple definitions are not enough to meet our needs, then we need to consider our own definition of the interpolation class.

We can implement the Interpolator interface, because all of the above interpolator implement the Interpolator interface, this interface defines a method: float getinterpolation (float input);

This method is called by the system, and input represents the time of the animation, between 0 and 1, which is between start and end.
The linear (constant) interpolation is defined as follows:

public float getinterpolation (float input) {return
  input;
}

The accelerated deceleration interpolation is defined as follows:

public float getinterpolation (float input) {return
  (float) (Math.Cos (input + 1) * Math.PI)/2.0f) + 0.5f;
}

If you are interested, you can try customizing an interpolation.

After talking about the concept for so long, let's combine the examples to illustrate the application of several tween animations.

First to introduce the use of rotating animation, layout files/res/layout/rotate.xml as follows:

 <?xml version= "1.0" encoding= "Utf-8"?> <linearlayout "xmlns:android=" Schemas.android.com/apk/res/android "android:orientation=" vertical "android:layout_width=" Fill_parent "Android: layout_height= "Fill_parent" android:background= "#FFFFFF" > <imageview android:id= "@+id/piechart" Android:la Yout_width= "Wrap_content" android:layout_height= "wrap_content" android:layout_gravity= "Center_horizontal" Andr oid:src= "@drawable/piechart"/> <button android:id= "@+id/positive" android:layout_width= "Fill_parent" an droid:layout_height= "Wrap_content" android:text= "clockwise" android:onclick= "positive"/> <button "android:id="
    @+id/negative "android:layout_width=" fill_parent "android:layout_height=" wrap_content "android:text=" counterclockwise " android:onclick= "negative"/> </LinearLayout> 

We define a imageview that shows a pie chart, demonstrates a rotational animation, and then defines two buttons to run the animation of the encoding implementation. The animation definition file/res/anim/rotate.xml is as follows:

<?xml version= "1.0" encoding= "Utf-8"?> <set xmlns:android=
"http://schemas.android.com/apk/res/" Android "
  android:interpolator=" @android: Anim/accelerate_decelerate_interpolator ">
  <rotate
    android:fromdegrees= "0"
    android:todegrees= "+360"
    android:pivotx= "50%"
    android:pivoty= "50%
    " android:duration= "5000"/>
</set>

Finally, let's take a look at the Rotateactivity.java code:

Package Com.scott.anim;
Import android.app.Activity;
Import Android.os.Bundle;
Import Android.view.View;
Import android.view.animation.Animation;
Import Android.view.animation.AnimationUtils;
Import Android.view.animation.LinearInterpolator;
Import android.view.animation.RotateAnimation;
  public class Rotateactivity extends activity {private int currangle;
  Private View Piechart;
    @Override public void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);
    Setcontentview (r.layout.rotate);
    Piechart = Findviewbyid (R.id.piechart);
    Animation Animation = Animationutils.loadanimation (this, r.anim.rotate);
  Piechart.startanimation (animation); public void positive (View v) {Animation anim = new Rotateanimation (currangle, Currangle + 180, animation.relative
    _to_self, 0.5f, Animation.relative_to_self, 0.5f);
    /** constant-speed interpolation */linearinterpolator Lir = new Linearinterpolator ();
    Anim.setinterpolator (LIR); Anim.setduration (1000);
    /** after the completion of the animation does not restore the original * * Anim.setfillafter (TRUE);
    Currangle + 180;
    if (Currangle > 360) {currangle = currAngle-360;
  } piechart.startanimation (Anim); public void negative (View v) {Animation anim = new Rotateanimation (Currangle, currAngle-180, animation.relative
    _to_self, 0.5f, Animation.relative_to_self, 0.5f);
    /** constant-speed interpolation */linearinterpolator Lir = new Linearinterpolator ();
    Anim.setinterpolator (LIR);
    Anim.setduration (1000);
    /** after the completion of the animation does not restore the original * * Anim.setfillafter (TRUE);
    Currangle-= 180;
    if (Currangle < -360) {Currangle = Currangle + 360;
  } piechart.startanimation (Anim);

 }
}

Then, looking at the gradient animation, the layout file/res/layout/alpha.xml as follows:

<?xml version= "1.0" encoding= "Utf-8"?> <framelayout xmlns:android=
 "http://schemas.android.com/" Apk/res/android "
 android:layout_width=" fill_parent "
 android:layout_height=" Fill_parent "
 android: background= "#FFFFFF" >
 <imageview
   android:id= "@+id/splash"
   android:layout_width= "Fill_parent"
   android:layout_height= "fill_parent"
   android:layout_gravity= "center"
   android:src= "@drawable Splash "/>
 <button
   android:layout_width= fill_parent" android:layout_height= "Wrap_content"
   android:layout_gravity= "Bottom"
   android:text= "Alpha"
   android:onclick= "alpha"/>
</ Framelayout>

The animation definition file/res/anim/alpha.xml is as follows:

<?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=" "3000" >
</set>

The Alphaactivity.java code is as follows:

Package Com.scott.anim;
Import android.app.Activity;
Import Android.os.Bundle;
Import Android.util.Log;
Import Android.view.View;
Import android.view.animation.AlphaAnimation;
Import android.view.animation.Animation;
Import Android.view.animation.Animation.AnimationListener;
Import Android.view.animation.AnimationUtils;
Import Android.widget.ImageView;
  public class Alphaactivity extends activity implements Animationlistener {private ImageView splash;
    @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);
    Setcontentview (R.layout.alpha);
    Splash = (ImageView) Findviewbyid (R.id.splash);
    Animation Anim = Animationutils.loadanimation (this, r.anim.alpha);
    Anim.setanimationlistener (this);
  Splash.startanimation (ANIM);
    public void alpha (view view) {Animation anim = new Alphaanimation (1.0f, 0.0f);
    Anim.setduration (3000);
    Anim.setfillafter (TRUE);
  Splash.startanimation (ANIM); } @Override Publicvoid Onanimationstart (Animation Animation) {log.i ("alpha", "Onanimationstart called.");
  @Override public void Onanimationend (Animation Animation) {log.i ("alpha", "onanimationend called");
  @Override public void Onanimationrepeat (Animation Animation) {log.i ("alpha", "onanimationrepeat called");

 }
}

Then look at the displacement animation, the layout file/res/layout/translate.xml as follows:

<?xml version= "1.0" encoding= "Utf-8"?> <framelayout xmlns:android=
 "http://schemas.android.com/" Apk/res/android "
 android:orientation=" vertical "
 android:layout_width=" fill_parent "
 android:layout_" height= "Fill_parent" >
 <imageview
  android:id= "@+id/trans_image" android:layout_width= "WRAP_"
  Content "
  android:layout_height=" wrap_content "
  android:layout_weight=" 1 "
  android:src=" @drawable Person "/>
 <button
  android:id= @+id/trans_button" android:layout_width= "
  fill_parent
  " android:layout_height= "Wrap_content"
  android:layout_gravity= "bottom"
  android:text= "Translate
  " android:onclick= "Translate"/>
</FrameLayout>

The animation definition file/res/anim/translate.xml is as follows:

<?xml version= "1.0" encoding= "Utf-8"?> <set xmlns:android=
"http://schemas.android.com/apk/res/" Android "
  android:interpolator=" @android: Anim/bounce_interpolator ">
  <translate
    android: Fromxdelta= "0"
    android:fromydelta= "0"
    android:toxdelta= "Android:toydelta="
    android: Duration= "/>"
</set>

Then translateactivity.java the code as follows:

Package Com.scott.anim;
Import android.app.Activity;
Import Android.os.Bundle;
Import Android.view.View;
Import android.view.animation.Animation;
Import Android.view.animation.AnimationUtils;
Import Android.view.animation.OvershootInterpolator;
Import android.view.animation.TranslateAnimation;
Import Android.widget.ImageView;
  public class Translateactivity extends activity {private ImageView trans_iamge;
    @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);
    Setcontentview (r.layout.tanslate);
    Trans_iamge = (ImageView) Findviewbyid (r.id.trans_image);
    Animation Anim = Animationutils.loadanimation (this, r.anim.translate);
    Anim.setfillafter (TRUE);
  Trans_iamge.startanimation (ANIM);
    public void translate (view view) {Animation anim = new Translateanimation (200, 0, 300, 0);
    Anim.setduration (2000);
    Anim.setfillafter (TRUE);
    Overshootinterpolator overshoot = new Overshootinterpolator (); Anim.setInterpolator (overshoot);
  Trans_iamge.startanimation (ANIM);

 }
}

Finally, let's look at the following zoom animation, the layout file/res/layout/scale.xml as follows:

<?xml version= "1.0" encoding= "Utf-8"?> <linearlayout xmlns:android=
 "http://schemas.android.com/" Apk/res/android "
 android:orientation=" vertical "
 android:layout_width=" fill_parent "
 android:layout_" height= "Fill_parent" >
 <imageview
  android:id= "@+id/scale_image" android:layout_width= "WRAP_"
  Content "
  android:layout_height=" wrap_content "
  android:layout_gravity=" center "
  Android:layout_ weight= "1"
  android:src= "@drawable/person"/>
 <button android:id=
  "@+id/scale_button"
  Android:layout_width= "Fill_parent"
  android:layout_height= "wrap_content"
  android:layout_gravity= " Bottom "
  android:text=" scale "
  android:onclick=" sclae "/>
</LinearLayout>

The animation definition file/res/anim/scale.xml is as follows:

<?xml version= "1.0" encoding= "Utf-8"?> <set xmlns:android=
"http://schemas.android.com/apk/res/" Android "
  android:interpolator=" @android: Anim/bounce_interpolator ">
  <scale
    android:fromxscale = "1.0" "android:toxscale=" 2.0 "android:fromyscale=" 1.0 "android:toyscale="
    2.0 "
    android:pivotx=" 0.5 "android:pivoty=" 50% "android:duration="/> <alpha android:fromalpha=
    "0.0"
    android:toalpha= "1.0"
    android:duration= "3000"/>
</set>

Then scaleactivity.java the code as follows:

Package Com.scott.anim;
Import android.app.Activity;
Import Android.os.Bundle;
Import Android.view.View;
Import android.view.animation.Animation;
Import Android.view.animation.AnimationUtils;
Import Android.view.animation.BounceInterpolator;
Import android.view.animation.ScaleAnimation;
Import Android.widget.ImageView;
  public class Scaleactivity extends activity {private ImageView scale_iamge;
    @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);
    Setcontentview (R.layout.scale);
    Scale_iamge = (ImageView) Findviewbyid (r.id.scale_image);
    Animation Anim = Animationutils.loadanimation (this, r.anim.scale);
    Anim.setfillafter (TRUE);
  Scale_iamge.startanimation (ANIM); public void sclae (view view) {Animation anim = new Scaleanimation (2.0f, 1.0f, 2.0f, 1.0f, Animation.relat
    Ive_to_self, 0.5f, Animation.relative_to_self, 0.5f);
    Anim.setduration (2000);
    Anim.setfillafter (TRUE); BounceintErpolator bounce = new Bounceinterpolator ();
    Anim.setinterpolator (bounce);
  Scale_iamge.startanimation (ANIM);

 }
}

Several animation effects are shown in the following illustration:

I hope this article will help you with the Android program.